Создание страницы «О нас»
Создайте файл about.html. Скопируйте в него код из index.html, оставив только секции <header> и <footer>. Удалите остальные секции.
В файле index.html, в секции <header>, добавьте ссылки для навигации:
<a href="index.html">Home</a>
<a href="about.html">About Us</a>CSS будет содержать логику для выделения активной ссылки в зависимости от текущего файла.
Дизайн страницы «О нас»
Страница «О нас» будет состоять из секции презентации и секции с отзывами (или описанием работы).
Секция презентации
HTML-разметка:
<div class="hero-about container">
<div class="info">
<h1>Заголовок</h1>
<p>Текст абзаца</p>
<button class="button">Кнопка</button>
</div>
<img src="img/about-banner.jpg" alt="Banner">
</div>CSS-стили:
.hero-about .info {
width: 500px;
padding: 50px;
}
.hero-about h1 {
font-size: 30px;
margin-bottom: 15px;
}
.hero-about .button {
margin-top: 20px;
}Изображение позиционируется абсолютно (position: absolute) относительно родительского блока .hero-about (у которого position: relative). Положение корректируется с помощью top и left или right. overflow-x: hidden предотвращает вывод изображения за пределы экрана.
Секция с отзывами
HTML-разметка:
<div class="work container">
<h2>Заголовок секции</h2>
<div class="blocks">
<div class="block">
<span class="badge purple">Badge</span>
<h3>Заголовок отзыва</h3>
<p>Текст отзыва</p>
</div>
<!-- ... еще два блока ... -->
</div>
</div>В CSS для блока .work заданы внутренние отступы. Для h2 задан размер шрифта (25px). Для .blocks используется Flexbox для горизонтального расположения блоков. Ширина каждого блока — 25%, задан радиус скругления углов (10px) и внутренние отступы. Задний фон задается через CSS классы purple, brown, green. Для h3 и p установлены стили (размер шрифта, отступы).
В статье описано создание дополнительной страницы сайта с помощью HTML и CSS. Процесс включает создание HTML-файла, добавление разметки и стилей.