Как создать сайт для питомца с нуля на HTML и CSS
Кратко
Кратко: пошаговое руководство по созданию простого и привлекательного одностраничного сайта для питомца с использованием только HTML и CSS. Покрыты: навигация, блок «герой», раздел услуг, «о нас», футер и советы по публикации.
Важно: этот материал ориентирован на практическую верстку и не включает серверную логику. Если нужно — в конце есть чек-листы, критерии приёмки и шпаргалка.
В этом полном руководстве вы узнаете, как создать простой, но приятный внешне сайт с нуля, используя только HTML и CSS. Что может быть лучше, чем сайт для вашего любимого питомца? Структура сайта будет состоять из трёх основных блоков: Home, Services и About. Вверху добавим навигационное меню, внизу — футер.
Далее — пошагово, с сохранением всех примеров кода. Код-блоки оставлены в исходном виде для быстрого копирования.
Построение навигации и секции «герой»
Сначала добавьте секцию
, чтобы задать заголовок проекта. Подключите файл style.css и шрифт Rubik из Google Fonts через тег link.HTML: секция head
Pawfect
Добавьте секцию
и создайте разметку «первого экрана». Добавьте header с логотипом и навигацией, затем секцию .section-hero с основным заголовком и кратким описанием услуг.HTML: секция body
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?
Выход визуализации этой разметки показан ниже:
Теперь применим стили к навигации и секции «герой».
Общие стили CSS
Добавьте общие правила CSS в начало style.css. Секция герой использует фоновое изображение. Полный код и изображения можно хранить на 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 для размещения логотипа и ссылок в одну строку. Сделайте фон прозрачным и задайте border-radius: 9px для CTA-кнопки.
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;
}
Связанный материал: как сделать адаптивный навбар с HTML и CSS.
Стилизация секции герой
Ограничьте ширину блока hero, чтобы заголовок и описание не растягивались по всей ширине. Настройте font-size и padding по своему вкусу.
CSS секции герой
/* ****************** */
/* 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: раздел услуг
Создайте родительский контейнер class=”grid services” и добавьте четыре блока с изображением, названием услуги и коротким описанием.
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: раздел услуг
Создайте grid с двумя равными колонками и отступом 4rem. Центрируйте элементы и задайте ширину изображений 80%.
/* ****************** */
/* 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)
Примечание: второй путь изображения содержит именную строку, которую следует оставить как есть, если вы копируете пример напрямую.
Секция «О нас»
В разделе «О нас» разместите изображение и текстовый блок с информацией о команде.
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: раздел о нас
Стилируем изображение и текстовый блок через CSS Grid и добавим тень. Отрицательный margin поднимает текстовый блок над изображением.
/* ****************** */
/* 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: футер
Примечание: в демонстрационных примерах внутри кода используется h1; в реальном проекте следите, чтобы в сгенерированном DOM был только один семантический H1 на странице.
CSS: футер
/* ****************** */
/* Footer */
/* ****************** */
footer {
text-align: center;
background-color: #e7ac21;
padding: 2.5rem;
}
Вы можете посмотреть финальную версию Pawfect по ссылке в исходном материале.
Публикация сайта
Поздравляем — вы создали сайт с нуля на HTML и CSS! Пора опубликовать сайт и получить обратную связь. Если вы новичок, посмотрите, как разместить сайт бесплатно через GitHub Pages.
Практические дополнения и рекомендации
Ниже — полезные шаблоны, критерии и чек-листы, которые помогут закончить проект быстрее и качественнее.
Краткая методология (микро-процесс)
- План: определите структуру (Home, Services, About, Contact).
- Разметка: создайте семантический HTML и базовые классы.
- Стили: задайте общий reset, типографику, цвета, grid/flex.
- Итерации: адаптивность, улучшения UX, тестирование.
- Публикация и мониторинг обратной связи.
Чек-листы по ролям
Для дизайнера:
- Подготовить макет и изображения по размерам.
- Проверить контраст текста и фона.
- Согласовать шрифты и иконки.
Для фронтенд-разработчика:
- Семантическая разметка.
- CSS-переменные для цвета/отступов.
- Кроссбраузерные проверки и адаптивность.
Для контент-менеджера:
- Тексты без «Lorem ipsum».
- ALT для всех изображений.
- Проверить ссылки и контактные данные.
Критерии приёмки
- Страница валидна в HTML/CSS и нет ошибок в консоле.
- Вёрстка корректно адаптируется от 320px до 1920px.
- Все изображения имеют корректные ALT.
- Навигация работает и скролл-переходы плавные.
- Футер читабелен и содержит год и авторские права.
Шпаргалка HTML/CSS (быстрый набор)
- Сброс: * {box-sizing: border-box;}
- Типографика: html {font-size:62.5%;} body {font-size:1.6rem;}
- Flex центрирование: display:flex; align-items:center; justify-content:center;
- Grid простая сетка: display:grid; grid-template-columns: repeat(2, 1fr); gap:2rem;
- Кнопка CTA: padding: 1rem 2rem; border-radius:9px; background:#523414; color:#fff;
Тесты и случаи приёмки
- Тест 1: Откройте страницу на мобильном (ширина 375px) — навбар сворачивается либо остаётся читабельным.
- Тест 2: Отключите CSS — структура должна оставаться логичной (семантика).
- Тест 3: Нажмите на все ссылки — они должны вести в нужные секции.
Когда этот подход не подходит (контрпример)
- Если у вас сложная логика (формы, авторизация, база данных) — одной вёрстки недостаточно; нужна серверная часть или SPA.
- Для многостраничных сайтов с большим количеством страниц удобнее использовать шаблонизатор или фреймворк.
Короткая дорожная карта публикации
- Подготовить репозиторий на GitHub.
- Закоммитить файлы (index.html, style.css, папка img).
- Включить GitHub Pages в настройках (branch: main или gh-pages).
- Проверить сайт по предоставленному URL и поправить относительные пути.
Принять/откат: Runbook при ошибках после публикации
- Ошибка: изображения не отображаются — проверить относительные пути и регистр символов в именах файлов.
- Ошибка: шрифты не загружаются — убедиться в правильности ссылок на Google Fonts и отсутствии блокировок.
Маленький совет по локализации
Если вы делаете сайт для другой аудитории, локализуйте тексты, форматы дат и контактную информацию. Для России/Европы используйте формат телефона с кодом страны и явные часовые пояса для записи на услугу.
Пример решения дилеммы: держать CSS в одном файле или разделять?
- Один файл style.css — проще для небольших проектов и быстрой публикации.
- Модульные CSS-файлы (components.css, layout.css) — удобнее при росте проекта.
Итог
Вы получили полное пошаговое руководство по созданию простого сайта для питомца с примерами кода и практическими инструментами для приёмки и публикации. Начните с разметки, затем стилизуйте блоки и наконец опубликуйте через GitHub Pages.
Похожие материалы
Несколько аккаунтов Skype: Multi Skype Launcher
Журнал для работы: повысить продуктивность
Персональные звуки уведомлений на Android
Скачивание шоу Hulu для офлайн‑просмотра
Microsoft Start: персонализированная новостная лента
