הפוסט לא גמור בעז''ה בהמשך
עכשיו נצטרך גם להכניס את הקובץ CSS שקודם הפננו אליו
בא ננסה להסביר אותו שוב כמו הקובץ הקודם שורה אחר שורה
נקרא לקובץ הזה בשם style
/* פה אנחנו הולכים לבחור גופן
נתחיל בעובדא שלגוגל יש API של גופנים שמספיק להכניס קישור של הגופן ע''מ להשתמש בו וכמו בשורה הבאה שבה אנו מפנים בקשה לגוגל להשתמש בגופן הנקרא Poppins על המשך הבקשה נלמד בעז''ה בפעמים הבאות
הסמל הזה הוא זה שיאפשר לנו לקרוא לנתונים לתוך הקובץ @import*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
בשורה זו אנו מגדירים את גודל השוליים בפיקסלים ה 0 ישמש לנו כברירת מחדל
padding: 0;
זה נקרא ריפוד משמעותו שחוץ מהשוליים יהיה גם רווח בפנים כלומר שיהיה גם רווח בין השוליים לבין התוכן עצמו גם כאן אנו נכניס את ברירת המחדל 0
box-sizing: border-box;
box-sizing מגדיר כיצד מחושבים הרוחב והגובה של אלמנט: האם הם צריכים לכלול ריפוד וגבולות, או לא.
font-family: 'Poppins', sans-serif;
היות ולפעמים הדפדפן לא מסתדר עם הגופן תמיד נגדיר לו בסוף גופן מוכר וידוע כמו sans-serif ולכן כתבנו לו שאם הוא לא מצליח להשתמש ב Poppins שישתמש ב sans-serif
}
body{
כעת נגדיר את תוכן המסמך שהכנסנו למעלה בתוך html
height: 100vh;
פה נגדיר את הגובה של התיבה שלנו אם כי המידה 100vh אומרת לו לשמור על גודל משתנה כלומר מי שיפתח את זה במחשב עם מסך קטן לא נרצה שזה יקפוץ לו בגודל של מסך של מחשב רגיל
background: #f2f2f2;
בשורה זו בחרנו צבע רקע, חשוב להדגיש שיש שני אפשרויות לבחור צבעים א לרשום את שמות הצבעים באנגלית באופן פשוט ב ע"י מספרים ואותיות משולבות בל"נ בהמשך העלה קישור שבו ניתן לראות את כל הצבעים האפשריים עם שמותיהם
overflow: hidden;
ההגדרה הזו היא רק מה לעשות במקרה והתוכן יהיה גדול מגודל העיצוב שהכנו עבורו האם להוסיף פס גלילה האם לחתוך וכו אצלנו מוגדר לחתו את התוכן והשאר לא יהיה נראה
}
.container{
position: absolute;
right: 30px;
bottom: 30px;
}
.container .box{
background: #fff;
display: flex;
align-items: center;
border-radius: 6px;
padding: 15px 25px 15px 15px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
position: relative;
animation: show_box 0.8s ease forwards;
}
@keyframes show_box {
0%{
transform: translateX(100%);
}
40%{
transform: translateX(-5%);
}
80%{
transform: translateX(0%);
}
100%{
transform: translateX(-10px);
}
}
#hide:checked ~ .box{
animation: hide_box 0.8s ease forwards;
}
@keyframes hide_box {
0%{
transform: translateX(0%);
}
40%{
transform: translateX(5%);
}
80%{
transform: translateX(0%);
}
100%{
transform: translateX(calc(100% + 35px ));
}
}
.container .box i{
position: absolute;
right: 15px;
top: 10px;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
}
.container i:hover{
color: #000;
}
.container .logo{
height: 90px;
width: 90px;
margin-right: 15px;
}
.container .logo img{
height: 100%;
width: 100%;
object-fit: cover;
}
.box .right{
display: flex;
flex-direction: column;
}
.box .right .text-1{
font-size: 18px;
font-weight: 600;
color: #333;
}
.box .right .text-2{
font-size: 14px;
color: #666;
margin: 2px 0 8px 0;
}
.box .right a{
font-size: 18px;
font-weight: 500;
display: block;
padding: 8px 0;
background: #24d8fc;
border-radius: 6px;
color: #fff;
text-align: center;
text-decoration: none;
transition: all 0.4s ease;
}
.box .right a:hover{
background-color: #03bde2;
}
.container #hide{
display: none;
}
/* .... */
וכמובן לא לשכוח לעלות את התמונה של האתר של מתמחים
[image: 1659439978133-logo.png]
בהצלחה אשמח להארות והערות ולכל ביקורת בונה
רק קחו בחשבון שזה המדריך הראשון שלי אז בבקשה בעדינות
ולכל מי שאין לו כח לקרוא ולבנות לבד מצורף כאן הקבצים פשוט להוריד ולפתוח רגיל במחשב
מקוה שאהבתם
חלונית קופצת מתמחים טופ.rar
קרדיט
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}