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

Pawfect










 خدمة العناية بالمنزل للحيوانات الأليفة في ولاية كارولينا الشمالية




 الوقت ينفد؟ قل لا زيادة. Veniome Pawfect ea fugiat itaque، aut unde ratione veniam ipsum temporibus cumque sunt nemo facere؟

انتاج |:

حان الوقت الآن لتصميم قائمة التنقل وقسم الأبطال.

عام CSS

أضف نمط CSS العام في الجزء العلوي من ملف style.css ملف. قسم البطل لديه صورة خلفية. أنت تستطيع الوصول إلى الكود الكامل بما في ذلك الصور على جيثب، أو استخدم صورتك الخاصة.

* {
 الهامش: 0؛
 حشوة: 0؛
 تحجيم الصندوق: مربع الحدود ؛
}
لغة البرمجة {
/ * 10 بكسل / 16 بكسل = 0.625 = 62.5 * /
 حجم الخط: 62.5٪؛
 تجاوز- x: مخفي ؛
 التمرير السلوك: على نحو سلس.
}
الجسم {
 عائلة الخطوط: 'Rubik'، sans-serif؛
 ارتفاع الخط: 1.5 ؛
 حجم الخط: 1.5rem ؛
 وزن الخط: 400 ؛
 تجاوز- x: مخفي ؛
 اللون: # 523414 ؛
 لون الخلفية: # e9be5a ؛
}
.heading-Primary ،
.heading-Secondary ،
.heading-tertiary {
 وزن الخط: 700 ؛
 اللون: # 523414 ؛
 تباعد الأحرف: -0.5 بكسل ؛
}
.heading-Primary {
 حجم الخط: 5.2rem ؛
 ارتفاع الخط: 1.05 ؛
 الهامش السفلي: 3.2rem ؛
}
.heading-Secondary {
 حجم الخط: 4.4rem ؛
 ارتفاع الخط: 1.2 ؛
 الهامش السفلي: 5.6rem ؛
 محاذاة النص: مركز ؛
}
.heading-tertiary {
 حجم الخط: 3rem ؛
 ارتفاع الخط: 1.2 ؛
 الهامش: 1.2rem ؛
}
أ {
 زخرفة النص: لا شيء ؛
}
.first-fold {
 صورة الخلفية: url (img / Pawfect-bg.png);
 أدنى ارتفاع: 80rem ؛
}

تصميم شريط التنقل

يستخدم فليكس بوكس ​​CSS لضبط الشعار وقوائم التنقل على التوالي. تعيين لون الخلفية إلى الشفافية وإعطاء نصف قطر الحد من 9 بكسل إلى زر Call-To-Action (CTA).

شريط التنقل CSS

/* ****************** */
/* شعار */
/* ****************** */
.header {
 عرض: فليكس ؛
 تبرير المحتوى: مسافة بين ؛
 محاذاة العناصر: مركز ؛
 لون الخلفية: شفاف.
 الارتفاع: 9.6 ريم ؛
 الحشو: 0 4.8 ريم ؛
}
.شعار {
 الارتفاع: 2.2 ريم ؛
 حجم الخط: 3.6rem ؛
 زخرفة النص: لا شيء ؛
 محاذاة النص: مركز ؛
 وزن الخط: عريض ؛
 اللون: # 462d12 ؛
}
/* ****************** */
/* التنقل */
/* ****************** */
.main-nav-list {
 نمط القائمة: لا شيء ؛
 عرض: فليكس ؛
 محاذاة العناصر: مركز ؛
 فجوة: 4.8rem ؛
}
.main-nav-link {
 عرض: مضمنة كتلة ؛
 زخرفة النص: لا شيء ؛
 اللون: # 462d12 ؛
 وزن الخط: 400 ؛
 حجم الخط: 1.8rem ؛
}
.main-nav-link.nav-cta {
 الحشو: 1.2rem 2.4rem ؛
 نصف قطر الحدود: 9 بكسل ؛
 اللون: #fff ؛
 لون الخلفية: # 523414 ؛
}

انتاج |:

متعلق ب: كيفية إنشاء شريط تنقل سريع الاستجابة باستخدام HTML و CSS

تصميم قسم البطل

تعيين أقصى عرض في فئة البطل التي تضم العنوان الأساسي والوصف. وبخلاف ذلك ، فإنه سيمتد حتى النهاية بدلاً من البقاء على الجانب الأيسر. تعيين حجم الخط و حشوة وفقا لمتطلباتك.

قسم البطل CSS

/* ****************** */
/ * قسم البطل * /
/* ****************** */
.section-hero {
 الحشو: 15 ريم 0 9.6 ريم ؛
}
.hero {
 أقصى عرض: 75 ريم ؛
 الحشو: 0 9.6 ريم ؛
 محاذاة العناصر: اليسار ؛
}
.hero-description {
 حجم الخط: 2rem ؛
 ارتفاع الخط: 1.6 ؛
 الهامش: 4.8rem 0 ؛
}

انتاج |:

بناء قسم الخدمات

يوفر الموقع أربع خدمات: عناية كاملة ، غسيل للكلاب بخدمة ذاتية ، غسيل وتجفيف ، تدليك للجسم والقدم.

خدمات قسم HTML

قم بإنشاء أحد الوالدين class = "خدمات الشبكة" وإضافة جميع الخدمات الأربع باستخدام. أضف الصورة واسم الخدمة ووصفًا بسيطًا لها.

خدماتنا






العناية الكاملة

Lorem ipsum consectetur Adipisicing elit.







غسل الكلب للخدمة الذاتية

Odit aliquam dolor ex doloremque sed itaque.







غسل وتجفيف

Voluptatem suscipit ut omnis quas saepe.







تدليك الجسم والقدمين

Sapiente quos qui hic porro voluptatibus impedit.

قسم الخدمات CSS

قم بإنشاء شبكة ذات عمودين متساويين واضبط قيمة فجوة ل 4rem. اضبط كل ملفات عناصر الشبكة في المنتصف وضبط الصورة العرض حتى 80٪ من الحجم الأصلي.

/* ****************** */
/* خدماتنا */
/* ****************** */
.خدماتنا {
 الحشو: 9.6rem 0 ؛
}
.وعاء {
 أقصى عرض: 120rem ؛
 الهامش: 0 تلقائي ؛
 الحشو: 1.5rem 3.2rem ؛
}
.شبكة {
 عرض: شبكة ؛
 أعمدة شبكة القوالب: 1fr 1fr ؛
 فجوة: 4rem ؛
 محاذاة العناصر: مركز ؛
 تبرير المحتوى: مركز ؛
 محاذاة النص: مركز ؛
}
.services img {
 العرض: 80٪؛
 نصف قطر الحدود: 9 بكسل ؛
}

انتاج |:

بناء قسم حول

سيحتوي قسم "حول" على صورة ومربع نص به بعض المعلومات المختصرة عن الفريق.

حول قسم HTML

إنشاء 
 ووضع الصورة والنص بداخلها. 








معلومات عنا


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
 officiis ، perferendis iure posimus dolor aspernatur incidunt rem
 ipsa ، consectetur temporibus dolor ea؟ Tenetur nobis labouriosam
 تعرق الآفات
 ديكتا!

حول قسم CSS

صمم الصورة ومربع النص باستخدام CSS Grid وأضف ملف شبح الهبوط لجعلها أكثر جاذبية. إستخدم هامش سلبي لتعيين مربع النص فوق الصورة.

/* ****************** */
/* معلومات عنا */
/* ****************** */
.grid-about {
 أعمدة شبكة القوالب: 1.2fr 0.8fr ؛
 فجوة: 0؛
}
.حول {
 الحشو: 2rem 0 7rem 0 ؛
}
.about img {
 العرض: 98٪؛
 تبرير الذات: النهاية ؛
 نصف قطر الحدود: 9 بكسل ؛
}
.about p {
 حجم الخط: 2.2rem ؛
}
.نص {
 أقصى عرض: 45 ريم ؛
 لون الخلفية: # e7ac21 ؛
 الحشو: 10rem 5rem ؛
 الهامش الأيسر: -5rem ؛
 نصف قطر الحدود: 9 بكسل ؛
}
.text h2 {
 الهامش السفلي: 4.5rem ؛
 محاذاة النص: مركز ؛
}

انتاج |:

يترك تذييل موقع الويب انطباعًا دائمًا في أذهان الزائرين ، لذا تأكد من أنه نظيف ومنظم جيدًا.

أضف عنوانًا أساسيًا يقول الشكر للزوار. © هو كيان HTML لـ © رمز.

صمم التذييل من خلال إعطائه شكلًا مختلفًا لون الخلفية والإعداد المناسب حشوة.

/* ****************** */
/* تذييل */
/* ****************** */
تذييل {
 محاذاة النص: مركز ؛
 لون الخلفية: # e7ac21 ؛
 الحشو: 2.5 ريم.
}

انتاج |:

يمكنك عرض موقع Pawfect النهائي باتباع هذا الرابط.

انشر موقع الويب الخاص بك

تهانينا ، لقد قمت بإنشاء موقع ويب كامل من البداية باستخدام HTML و CSS! حان الوقت لنشر موقعك على الويب والحصول على تعليقات من المجتمع. نأمل أن تكون قد استمتعت بعملية إنشاء الموقع. إذا كنت مستضافًا جديدًا ، فقم بإلقاء نظرة على كيفية استضافة موقع ويب مجانًا باستخدام صفحات GitHub.

ناينسى موريا (تم نشر 19 مقالة)

Naincy متخصصة في بناء مواقع ويب سريعة الاستجابة واستراتيجية محتوى فعالة إلى جانب نسخ الويب. إنها كاتبة تقنية مستقلة تراقب التقنيات الشائعة.

المزيد من Naincy Mourya