Создание сайта Pawfect на HTML и CSS
В этом подробном руководстве вы узнаете, как создать простой, но аккуратный сайт с нуля, используя только HTML и CSS. Пример — сайт для питомца под названием Pawfect: он состоит из трёх основных разделов: Home, Services и About. Вверху добавим навигацию, внизу — футер.
Ниже шаги для сборки сайта: структура HTML, подключение стилей и шрифта, оформление навигации и секции «hero», сетка услуг, блок «о нас» и футер. В конце — практические заметки по публикации.
Навигация и секция hero
Добавьте секцию
для установки названия проекта, подключите файл style.css и подключите шрифт Rubik с Google Fonts через тег .HTML:
`
Pawfect
`
Добавьте секцию
и оформите первый экран сайта. Создайте header с логотипом и навигацией, затем секцию с классом section-hero для основного заголовка и короткого описания сервиса.HTML:
`
Pawfect🐾
Pet Home Grooming Service in North Carolina
Running out of time? Say no more. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?
`
Теперь стилизуем навигацию и hero.
Общие стили CSS
Добавьте базовые правила в начало style.css. Секция hero использует фоновое изображение — для полноты можно взять исходные изображения из репозитория на GitHub или свои.
`* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/* 10px / 16px = 0.625 =62.5*/
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
font-family: 'Rubik', sans-serif;
line-height: 1.5;
font-size: 1.5rem;
font-weight: 400;
overflow-x: hidden;
color: #523414;
background-color: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
font-weight: 700;
color: #523414;
letter-spacing: -0.5px;
}
.heading-primary {
font-size: 5.2rem;
line-height: 1.05;
margin-bottom: 3.2rem;
}
.heading-secondary {
font-size: 4.4rem;
line-height: 1.2;
margin-bottom: 5.6rem;
text-align: center;
}
.heading-tertiary {
font-size: 3rem;
line-height: 1.2;
margin: 1.2rem;
}
a {
text-decoration: none;
}
.first-fold {
background-image: url(img/Pawfect-bg.png);
min-height: 80rem;
}
`
Стилизация навигации
Используйте flexbox, чтобы расположить логотип и меню в ряд. Сделайте фон прозрачным и задайте кнопке CTA скругление 9px.
CSS для навигации
`/* ****************** */
/* Logo */
/* ****************** */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: transparent;
height: 9.6rem;
padding: 0 4.8rem;
}
.logo {
height: 2.2rem;
font-size: 3.6rem;
text-decoration: none;
text-align: center;
font-weight: bold;
color: #462d12;
}
/* ****************** */
/* Navigation */
/* ****************** */
.main-nav-list {
list-style: none;
display: flex;
align-items: center;
gap: 4.8rem;
}
.main-nav-link {
display: inline-block;
text-decoration: none;
color: #462d12;
font-weight: 400;
font-size: 1.8rem;
}
.main-nav-link.nav-cta {
padding: 1.2rem 2.4rem;
border-radius: 9px;
color: #fff;
background-color: #523414;
}
`
Секция hero: верстка и стили
Ограничьте ширину контейнера hero, чтобы заголовок и описание оставались слева, а не растягивались на всю ширину.
CSS для hero
`/* ****************** */
/* Hero section */
/* ****************** */
.section-hero {
padding: 15rem 0 9.6rem;
}
.hero {
max-width: 75rem;
padding: 0 9.6rem;
align-items: left;
}
.hero-description {
font-size: 2rem;
line-height: 1.6;
margin: 4.8rem 0;
}
`
Секция услуг
Сайт предлагает четыре услуги: полная груминг-процедура, самостоятельная мойка, мойка с сушкой и массаж тела и лап.
HTML для услуг
`
Our Services
Full Grooming
Lorem ipsum consectetur adipisicing elit.
Self Serve Dog Wash
Odit aliquam dolor ex doloremque sed itaque.
Wash & Blow Dry
Voluptatem suscipit ut omnis quas saepe.
Body and Paw Massage
Sapiente quos qui hic porro voluptatibus impedit.
`
CSS для услуг
`/* ****************** */
/* Our Services */
/* ****************** */
.our-services {
padding: 9.6rem 0;
}
.container {
max-width: 120rem;
margin: 0 auto;
padding: 1.5rem 3.2rem;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
justify-content: center;
text-align: center;
}
.services img {
width: 80%;
border-radius: 9px;
}
`
.jpg?q=50&fit=crop&w=825&dpr=1.5)
Раздел «О нас»
Блок «О нас» содержит изображение и текстовую карточку с небольшой информацией о команде.
HTML для раздела «О нас»
`Create a and place the image and the text inside it.
About Us
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
dicta!
`
CSS для раздела «О нас»
`/* ****************** */
/* About Us */
/* ****************** */
.grid-about {
grid-template-columns: 1.2fr 0.8fr;
gap: 0;
}
.about {
padding: 2rem 0 7rem 0;
}
.about img {
width: 98%;
justify-self: end;
border-radius: 9px;
}
.about p {
font-size: 2.2rem;
}
.text {
max-width: 45rem;
background-color: #e7ac21;
padding: 10rem 5rem;
margin-left: -5rem;
border-radius: 9px;
}
.text h2 {
margin-bottom: 4.5rem;
text-align: center;
}
`
Футер
Футер завершает сайт — он должен быть ясным и аккуратным.
HTML футера
`
`
Important: В реальном проекте используйте единый H1 на странице и заменяйте заголовок футера на более подходящий тег (например, h2 или p), чтобы не дублировать основной H1 в документе.
CSS для футера
`/* ****************** */
/* Footer */
/* ****************** */
footer {
text-align: center;
background-color: #e7ac21;
padding: 2.5rem;
}
`
Публикация сайта
Поздравляем — вы собрали сайт из HTML и CSS! Следующий шаг — публикация и сбор отзывов. Если вы раньше не публиковали сайты, посмотрите, как разместить статический сайт бесплатно с помощью GitHub Pages.
Дополнительно: когда этот подход хорош, а когда нет
- Подходит для: простых промостраниц, лендингов, портфолио, демонстрационных версий учебных проектов. Простая поддержка и быстрый старт.
- Не подходит для: крупных динамических приложений, систем с пользовательскими профилями, базами данных и сложной серверной логикой — для этого нужна связка с бэкендом (Node, Python, PHP) или SPA на фреймворках.
Альтернативные подходы
- Использовать фреймворки CSS (Tailwind, Bootstrap) для ускорения верстки и готовой адаптивности.
- Переехать на статический сайт-генератор (Gatsby, Hugo) для более масштабируемой структуры и шаблонов.
- Если нужен динамический контент — использовать Headless CMS (Strapi, Contentful) и деплой на Vercel или Netlify.
Быстрые эвристики и чек-листы
- Ментальная модель: HTML отвечает за структуру, CSS — за представление; начните с семантической разметки, затем добавьте стили.
- Мини-чек-лист перед публикацией:
- Все ссылки и изображения доступны и не битые.
- Шрифты подключаются корректно (проверьте network в devtools).
- Контент читаем на мобильных: проверьте viewport и font-size.
- Проверка accessibility: alt у всех изображений, правильные заголовки.
Критерии приёмки
- Страница корректно открывается в современных браузерах (Chrome, Firefox, Edge).
- Навигация кликабельна и ведёт к секциям (#services, #about).
- Hero-зона отображается с фоновым изображением и не размывается.
- Все изображения имеют alt-описания и не превышают разумный размер файла.
Роль‑ориентированные чек‑листы
- Для дизайнера: проверить визуальную иерархию, цветовую палитру и отступы.
- Для фронтенд‑разработчика: протестировать на разных разрешениях, исправить баги flex/grid.
- Для контент-менеджера: подготовить тексты без lorem ipsum, заменить плейсхолдеры.
Шаблон публикации (короткий SOP)
- Создайте репозиторий на GitHub и загрузите index.html и style.css вместе с /img.
- Включите GitHub Pages в настройках репозитория (branch main / folder root).
- Подождите несколько минут и проверьте URL вида https://
.github.io/. - Проверьте шрифты и изображения в продакшене, исправьте пути при необходимости.
Локальные и юридические заметки для публикации
- Избегайте копирования защищённого контента — используйте свои изображения или статические ресурсы с открытой лицензией.
- При работе с персональными данными в будущем учитывайте требования локального законодательства и GDPR, если будете собирать данные пользователей.
Глоссарий (1 строка)
- Hero: верхняя видимая часть страницы с основным заголовком и призывом к действию.
- CTA: Call To Action — кнопка или ссылка, побуждающая пользователя совершить действие.
Короткое резюме
Вы создали простой статический сайт Pawfect: подключили шрифты, оформили навигацию, hero, блок услуг, раздел «о нас» и футер. Для публикации используйте GitHub Pages или любой статический хостинг.
Если хотите, могу подготовить готовый архив проекта с файлами index.html, style.css и инструкцией по деплою.
Примечание: не забудьте заменить placeholder-тексты и изображения на реальные материалы вашего проекта перед публикацией.
Похожие материалы
Как исправить время чтения на Kindle
Как проверить и обновить книги на Kindle
X‑Ray на Kindle: как использовать и что важно
Как включить тёплый свет на Kindle
Как настроить и использовать Amazon Household
