href = " https://fonts.googleapis.com/css2?family=Rubik: wght @ 400; 500; 600; 700 & display = swap "
 rel = "таблица стилей"
 />

Pawfect🐾










 Услуги по уходу за домашними животными в Северной Каролине







instagram viewer



 Не хватает времени? Больше ни слова. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo acceptnda facere?

Вывод:

Пришло время стилизовать меню навигации и раздел главного героя.

Общий CSS

Добавьте общий стиль CSS вверху вашего style.css файл. В разделе героев есть фоновое изображение. Ты сможешь получить доступ к полному коду, включая изображения, на GitHub, или используйте собственное изображение.

* {
 маржа: 0;
 отступ: 0;
 размер коробки: рамка-рамка;
}
html {
/ * 10 пикселей / 16 пикселей = 0,625 = 62,5 * /
 размер шрифта: 62,5%;
 переполнение-x: скрыто;
 поведение прокрутки: плавное;
}
тело {
 семейство шрифтов: «Рубик», без засечек;
 высота строки: 1,5;
 размер шрифта: 1,5 бэр;
 font-weight: 400;
 переполнение-x: скрыто;
 цвет: # 523414;
 цвет фона: # e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
 font-weight: 700;
 цвет: # 523414;
 межбуквенный интервал: -0,5 пикселей;
}
.heading-primary {
 размер шрифта: 5,2 бэр;
 высота строки: 1,05;
 нижнее поле: 3,2 бэр;
}
.heading-secondary {
 размер шрифта: 4,4 бэр;
 высота строки: 1,2;
 нижнее поле: 5,6 бэр;
 выравнивание текста: центр;
}
.heading-tertiary {
 размер шрифта: 3rem;
 высота строки: 1,2;
 маржа: 1,2 бэр;
}
a {
 текстовое оформление: нет;
}
.first-fold {
 фоновое изображение: url (img / Pawfect-bg.png);
 мин-высота: 80 бэр;
}

Стилизация панели навигации

Использовать CSS flexbox для настройки логотипа и меню навигации подряд. Набор фоновый цвет сделать прозрачным и дать граница-радиус из 9 пикселей к кнопке с призывом к действию (CTA).

Панель навигации CSS

/* ****************** */
/ * Логотип * /
/* ****************** */
.header {
 дисплей: гибкий;
 justify-content: пробел между;
 align-items: center;
 цвет фона: прозрачный;
 высота: 9,6 бэр;
 набивка: 0 4,8 бэр;
}
.logo {
 высота: 2,2 бэр;
 размер шрифта: 3,6 бэр;
 текстовое оформление: нет;
 выравнивание текста: центр;
 font-weight: жирный;
 цвет: # 462d12;
}
/* ****************** */
/ * Навигация * /
/* ****************** */
.main-nav-list {
 стиль списка: нет;
 дисплей: гибкий;
 align-items: center;
 разрыв: 4,8 бэр;
}
.main-nav-link {
 дисплей: встроенный блок;
 текстовое оформление: нет;
 цвет: # 462d12;
 font-weight: 400;
 размер шрифта: 1,8 бэр;
}
.main-nav-link.nav-cta {
 набивка: 1,2 бэр, 2,4 бэр;
 радиус границы: 9 пикселей;
 цвет: #fff;
 цвет фона: # 523414;
}

Вывод:

Связанный: Как создать адаптивную панель навигации с помощью HTML и CSS

Стилизация секции героя

Установить Максимальная ширина на классе героя вложены первичный заголовок и описание. В противном случае он будет расширяться до конца, а не оставаться на левой стороне. Установить размер шрифта и набивка согласно вашему требованию.

CSS Раздела Героев

/* ****************** */
/ * Раздел героя * /
/* ****************** */
.section-hero {
 набивка: 15 бэр 0 9,6 бэр;
}
.hero {
 максимальная ширина: 75 бэр;
 набивка: 0 9,6 бэр;
 align-items: left;
}
.hero-description {
 размер шрифта: 2rem;
 высота строки: 1,6;
 маржа: 4.8rem 0;
}

Вывод:

Строительство Секции услуг

Сайт предоставляет четыре услуги: полный уход, мытье собак самообслуживания, стирка и сушка феном, а также массаж тела и лап.

Раздел услуг HTML

Создать родителя class = "сетевые услуги" и добавьте все четыре сервиса, используя. Добавьте изображение, название службы и небольшое ее описание.

Наши услуги






Полный уход

Lorem ipsum conctetur adipisicing elit.







Мытье собак самообслуживания

Odit aliquam dolor ex doloremque sed itaque.







Стирка и сушка феном

Voluptatem suscipit ut omnis quas saepe.







Массаж тела и лап

Sapiente quos qui hic porro voluptatibus impedit.

Раздел служб CSS

Создайте сетку с двумя равными столбцами и установите зазор к 4рем. Отрегулируйте все сетка в центре и установите изображение ширина до 80% от исходного размера.

/* ****************** */
/* Наши услуги */
/* ****************** */
.Наши услуги {
 заполнение: 9.6rem 0;
}
.container {
 максимальная ширина: 120 бэр;
 маржа: 0 авто;
 набивка: 1,5 бэр, 3,2 бэр;
}
.сетка {
 дисплей: сетка;
 сетка-шаблон-столбцы: 1fr 1fr;
 разрыв: 4 бэр;
 align-items: center;
 justify-content: center;
 выравнивание текста: центр;
}
.services img {
 ширина: 80%;
 радиус границы: 9 пикселей;
}

Вывод:

Создание раздела "О нас"

В разделе «О нас» будет изображение и текстовое поле с краткой информацией о команде.

О разделе HTML

Создать 
 и поместите в него изображение и текст. 








О нас


 Lorem ipsum dolor sit amet conctetur adipisicing elit. Quas
 officiis, perferendis iure Possimus dolor aspernatur incidunt rem
 ipsa, consctetur temporibus dolor ea? Tenetur nobis labouriosam
 dolor perspiciatis aspernatur incidunt rem placeat quis acceptnda
 dicta!

О разделе CSS

Создайте стиль изображения и текстового поля с помощью CSS Grid и добавьте тень чтобы сделать его более привлекательным. Использовать отрицательная маржа чтобы установить текстовое поле над изображением.

/* ****************** */
/* О нас */
/* ****************** */
.grid-about {
 сетка-шаблон-столбцы: 1.2fr 0.8fr;
 разрыв: 0;
}
.о {
 заполнение: 2rem 0 7rem 0;
}
.about img {
 ширина: 98%;
 оправдать себя: конец;
 радиус границы: 9 пикселей;
}
.about p {
 размер шрифта: 2,2 бэр;
}
.text {
 максимальная ширина: 45 бэр;
 цвет фона: # e7ac21;
 набивка: 10 бэр 5 бэр;
 маржа слева: -5бэр;
 радиус границы: 9 пикселей;
}
.text h2 {
 нижнее поле: 4,5 бэр;
 выравнивание текста: центр;
}

Вывод:

Нижний колонтитул веб-сайта оставляет неизгладимое впечатление у посетителей, поэтому убедитесь, что он чистый и хорошо организованный.

Добавьте основной заголовок, в котором говорите «спасибо» посетителям. © это HTML-объект для © символ.

Стилизуйте нижний колонтитул, придав ему другой фоновый цвет и установка соответствующих набивка.

/* ****************** */
/ * Нижний колонтитул * /
/* ****************** */
нижний колонтитул {
 выравнивание текста: центр;
 цвет фона: # e7ac21;
 набивка: 2,5 бэр;
}

Вывод:

Вы можете просмотреть окончательный веб-сайт Pawfect по этой ссылке.

Опубликуйте свой веб-сайт

Поздравляем, вы создали полноценный веб-сайт с нуля, используя HTML и CSS! Пришло время опубликовать свой веб-сайт и получить отзывы сообщества. Надеемся, вам понравился процесс создания сайта. Если вы новичок в хостинге, посмотрите, как разместить сайт бесплатно с помощью GitHub Pages.

Наинси Мурья (Опубликовано 19 статей)

Naincy специализируется на создании высокочувствительных веб-сайтов и эффективной контентной стратегии наряду с веб-копиями. Она - внештатный технический писатель, внимательно следящий за тенденциями в технологиях.

Ещё от Naincy Mourya