href=" https://fonts.googleapis.com/css2?family=Rubik: wght@400;500;600;700&display=swap"
 rel="stylesheet"
 />

פאופקט🐾










 שירות טיפוח ביתי לחיות מחמד בצפון קרולינה




 נגמר הזמן? אל תגיד יותר. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?

תְפוּקָה:

עכשיו הגיע הזמן לעצב את תפריט הניווט ואת קטע הגיבורים.

CSS כללי

הוסף את סגנון ה-CSS הכללי בראש שלך style.css קוֹבֶץ. למדור הגיבורים יש תמונת רקע. אתה יכול גש לקוד המלא כולל תמונות ב-GitHub, או השתמש בתמונה משלך.

* {
 שוליים: 0;
 ריפוד: 0;
 גודל קופסה: border-box;
}
html {
/* 10px / 16px = 0.625 =62.5*/
 גודל גופן: 62.5%;
 overflow-x: מוסתר;
 גלילה-התנהגות: חלקה;
}
גוף {
 font-family: 'Rubik', sans-serif;
 גובה קו: 1.5;
 גודל גופן: 1.5 רם;
 משקל גופן: 400;
 overflow-x: מוסתר;
 צבע: #523414;
 צבע רקע: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tretiary {
 משקל גופן: 700;
 צבע: #523414;
 מרווח אותיות: -0.5px;
}
.heading-primary {
 גודל גופן: 5.2rem;
 גובה קו: 1.05;
 שוליים-תחתית: 3.2 רם;
}
.heading-secondary {
 גודל גופן: 4.4 רם;
 גובה קו: 1.2;
 שוליים-תחתית: 5.6 רם;
 יישור טקסט: מרכז;
}
.heading-tretiary {
 גודל גופן: 3rem;
 גובה קו: 1.2;
 שוליים: 1.2 רם;
}
a {
 קישוט טקסט: אין;
}
‎.first-fold {
 רקע-תמונה: url(img/Pawfect-bg.png);
 גובה מינימלי: 80 רם;
}

עיצוב סרגל הניווט

להשתמש CSS flexbox כדי להתאים את הלוגו ותפריטי הניווט ברצף. מַעֲרֶכֶת צבע רקע לשקוף ולתת א גבול-רדיוס שֶׁל 9 פיקסלים ללחצן הקריאה לפעולה (CTA).

סרגל ניווט CSS

/* ****************** */
/* לוגו */
/* ****************** */
.header {
 תצוגה: flex;
 להצדיק-תוכן: רווח-בין;
 align-items: center;
 צבע רקע: שקוף;
 גובה: 9.6 רם;
 ריפוד: 0 4.8 רם;
}
‎.logo {
 גובה: 2.2 רמ;
 גודל גופן: 3.6 רם;
 קישוט טקסט: אין;
 יישור טקסט: מרכז;
 מודגש;
 צבע: #462d12;
}
/* ****************** */
/* ניווט */
/* ****************** */
.main-nav-list {
 סגנון רשימה: אין;
 תצוגה: flex;
 align-items: center;
 פער: 4.8 ר"מ;
}
.main-nav-link {
 תצוגה: בלוק מוטבע;
 קישוט טקסט: אין;
 צבע: #462d12;
 משקל גופן: 400;
 גודל גופן: 1.8 רם;
}
.main-nav-link.nav-cta {
 ריפוד: 1.2 רם 2.4 רם;
 border-radius: 9px;
 צבע: #fff;
 צבע רקע: #523414;
}

תְפוּקָה:

קָשׁוּר: כיצד לבנות סרגל ניווט רספונסיבי באמצעות HTML ו-CSS

עיצוב מדור הגיבורים

הגדר א רוחב מקסימלי על כיתת הגיבורים המקננים את הכותרת והתיאור העיקריים. אחרת, הוא יימשך עד הסוף במקום להישאר בצד שמאל. הגדר את גודל גופן ו ריפוד לפי הדרישה שלך.

CSS של מדור גיבורים

/* ****************** */
/* מדור גיבורים */
/* ****************** */
.section-hero {
 ריפוד: 15rem 0 9.6rem;
}
.hero {
 רוחב מקסימלי: 75 רם;
 ריפוד: 0 9.6 רם;
 align-items: left;
}
.hero-description {
 גודל גופן: 2rem;
 גובה קו: 1.6;
 שוליים: 4.8 רם 0;
}

תְפוּקָה:

בניית מדור השירותים

האתר מספק ארבעה שירותים: טיפוח מלא, שטיפת כלבים בשירות עצמי, כביסה וייבוש, ועיסוי גוף וכפות.

מדור שירותים HTML

צור הורה class="שירותי רשת" ולהוסיף את כל ארבעת השירותים באמצעות. הוסף את התמונה, שם השירות ותיאור קטן שלה.

השירותים שלנו






טיפוח מלא

Lorem ipsum consectetur adipisicing elit.







שטיפת כלבים בשירות עצמי

אודית אליקאם דולור לשעבר דולורמקה סעד איטאקה.







כביסה וייבוש

Voluptatem suscipit ut omnis quas saepe.







עיסוי גוף וכפות

Sapiente quos qui hic porro voluptatibus impedit.

מדור שירותים CSS

צור רשת עם שתי עמודות שוות והגדר את פער ל 4 רמ. התאם את כל פריטי רשת במרכז וקבע את התמונה רוֹחַב עד 80% מהגודל המקורי.

/* ****************** */
/* השירותים שלנו */
/* ****************** */
.השירותים שלנו {
 ריפוד: 9.6 רם 0;
}
.container {
 רוחב מקסימלי: 120 רם;
 שוליים: 0 אוטומטי;
 ריפוד: 1.5 רם 3.2 רם;
}
.grid {
 תצוגה: רשת;
 עמודות-תבנית-רשת: 1fr 1fr;
 פער: 4rem;
 align-items: center;
 להצדיק-תוכן: מרכז;
 יישור טקסט: מרכז;
}
.services img {
 רוחב: 80%;
 border-radius: 9px;
}

תְפוּקָה:

בניית מדור אודות

בקטע 'אודות' יהיו תמונה ותיבת טקסט עם מידע קצר על הצוות.

על סעיף HTML

ליצור 
 וממקמים את התמונה והטקסט בתוכה. 








עלינו


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
 officiis, perferendis iure possimus dolor aspernatur incidunt rem
 ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam
 dolor perspiciatis aspernatur incidunt rem placeat quis assumenda
 תכתיב!

על סעיף CSS

סגננו את התמונה ותיבת הטקסט באמצעות CSS Grid והוסיפו א טיפת צל כדי להפוך אותו לאטרקטיבי יותר. תשתמש ב מרווח שלילי כדי להגדיר את תיבת הטקסט מעל התמונה.

/* ****************** */
/* עלינו */
/* ****************** */
.grid-about {
 עמודות-תבנית-רשת: 1.2fr 0.8fr;
 פער: 0;
}
.על אודות {
 ריפוד: 2rem 0 7rem 0;
}
.about img {
 רוחב: 98%;
 להצדיק-עצמי: סוף;
 border-radius: 9px;
}
.about p {
 גודל גופן: 2.2rem;
}
‎.text {
 רוחב מקסימלי: 45 רם;
 צבע רקע: #e7ac21;
 ריפוד: 10rem 5rem;
 שוליים-שמאליים: -5rem;
 border-radius: 9px;
}
.text h2 {
 שוליים-תחתית: 4.5 רם;
 יישור טקסט: מרכז;
}

תְפוּקָה:

כותרת תחתונה של אתר משאירה רושם מתמשך בתודעת המבקרים, אז ודא שהיא נקייה ומאורגנת היטב.

הוסף כותרת ראשית האומרת תודה למבקרים. © היא ישות HTML עבור © סֵמֶל.

סגנון הכותרת התחתונה על ידי מתן שונה צבע רקע והגדרה מתאימה ריפוד.

/* ****************** */
/* כותרת תחתונה */
/* ****************** */
כותרת תחתונה {
 יישור טקסט: מרכז;
 צבע רקע: #e7ac21;
 ריפוד: 2.5 רם;
}

תְפוּקָה:

אתה יכול לצפות באתר הסופי של Pawfect באמצעות קישור זה.

פרסם את האתר שלך

מזל טוב, יצרת אתר שלם מאפס באמצעות HTML ו-CSS! זה הזמן לפרסם את האתר שלך ולקבל משוב מהקהילה. אנו מקווים שנהנית מתהליך יצירת האתר. אם אתה חדש באירוח, עיין כיצד לארח אתר בחינם באמצעות דפי GitHub.

נאינסי מוריה (19 מאמרים שפורסמו)

Naincy מתמחה בבניית אתרים רספונסיביים במיוחד ואסטרטגיית תוכן יעילה יחד עם עותקי אינטרנט. היא סופרת טכנולוגית עצמאית ששומרת עין חדה על טכנולוגיות טרנדיות.

עוד מאת Naincy Mourya