Привет, форумчане! Сегодня я вам покажу эталонное решение финального испытания из курса на 8 из 8 баллов. Присаживайтесь поудобнее, а я начинаю. Начать стоит с оформления доктайпа и “головы” нашей страницы.
Ставим русский язык, а в “голове” кодировку, название сайта, подключение стилей:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title>Кваст</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
Далее продолжаем оформлять первую часть нашей вёрстки, где добавляем кучу дивов с классами, логотип и список:
<body>
<div class="page-header">
<div class="container">
<div class="header-top clearfix">
<div class="logo-header">
<img src="img/logo.png" alt="Кваст" width="140" height="76">
</div>
<ul class="main-nav header-nav">
<li><a href="#">История</a></li>
<li><a href="#">Производство</a></li>
<li><a href="#">Ассортимент</a></li>
<li><a href="#">Где купить</a></li>
</ul>
</div>
<div class="slide-desription">
Крафтовый квас<br>
всему голова!
</div>
</div>
</div>
Следом за ним, идёт разметка блока “Новинки”. Также добавляем кучу дивов, название нашего блока и бутылок, таблицы с информацией о нашей продукции, текст и картинки.
<div class="news">
<div class="container">
<h2 class="block-title">Новинки</h2>
<div class="news-list clearfix">
<div class="news-item clearfix">
<h3 class="news-item-title">Вахтёр</h3>
<div class="news-item-info">
<table class="news-item-stats">
<tr>
<td>Алк.</td>
<td>< 1%</td>
</tr>
<tr>
<td>Ккал</td>
<td>35</td>
</tr>
</table>
<p class="news-item-composition">
Ржаной хлеб, Вода, Солод, Соль
</p>
</div>
<img class="news-item-pic" src="img/bottle-left.jpg" alt="Бутылка кваса Вахтёр" width="319" height="459">
<p class="news-item-description">
Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений!
</p>
<div class="news-item-controls">
<a class="btn btn-transparent" href="#" title="Посмотреть полное описание">Подробнее</a>
<a class="btn btn-solid" href="#" title="Купить товар">Купить</a>
<b class="news-item-price">150 Р.</b>
</div>
</div>
<div class="news-item clearfix">
<h3 class="news-item-title">Романтик</h3>
<div class="news-item-info">
<table class="news-item-stats">
<tr>
<td>Алк.</td>
<td>< 0,5%</td>
</tr>
<tr>
<td>Ккал</td>
<td>27</td>
</tr>
</table>
<p class="news-item-composition">
Ячменный хлеб, Вода, Солод, Апельсин
</p>
</div>
<img class="news-item-pic" src="img/bottle-right.jpg" alt="Бутылка кваса Романтик" width="319" height="459">
<p class="news-item-description">
Лёгкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.
</p>
<div class="news-item-controls">
<a class="btn btn-transparent" href="#" title="Посмотреть полное описание">Подробнее</a>
<a class="btn btn-solid" href="#" title="Купить товар">Купить</a>
<b class="news-item-price">90 Р.</b>
</div>
</div>
</div>
</div>
</div>
Затем мы оформляем следующий раздел “Преимущества”. Здесь всё очень просто и в моих комментариях не нуждается.
<div class="warranty">
<div class="container container-wide">
<ul class="warranty-list clearfix">
<li class="handmade">
<h2 class="warranty-title">Варим сами</h2>
<p class="warranty-text">Вот этими самыми руками. Экспериментируем и творим, что хотим.</p>
</li>
<li class="own">
<h2 class="warranty-title">Своё, родное</h2>
<p class="warranty-text">Не заработка ради, а импортозамещения для. Поднимаем производство.</p>
</li>
<li class="quality">
<h2 class="warranty-title">Не экономим</h2>
<p class="warranty-text">Человек это то, что он ест и пьёт. У нас только качественные ингредиенты.</p>
</li>
</ul>
</div>
</div>
Позже берём с собой блок “Немного истории”, где присутствуют название блока, 2 списка описания с картинками, текстами и ссылкой на источник:
<div class="theory">
<div class="container clearfix">
<h2 class="theory-title">Немного истории</h2>
<dl class="theory-list clearfix">
<dt class="theory-item-heading clearfix">Происхождение кваса
<i class="source">Источник:
<a class="theory-link" href="#" title="Перейти к источнику"><cite>ru.wikipedia.org</cite></a>
</i>
</dt>
<dd class="theory-item-body clearfix">
<img src="img/wiki-1.png" alt="Квас в стакане" width="200" height="101">
<p>Квас на Руси появился в X-XI веке. Само слово «квас» тоже имеет древнерусское происхождение. Помимо России квас готовят в Белоруссии, Сербии, Македонии, Словакии и многих других странах, но называется он везде одинаково — квас. </p>
</dd>
<dt class="theory-item-heading clearfix">Классификация кваса
<i class="source">Источник:
<a class="theory-link" href="#" title="Перейти к источнику"><cite>ru.wikipedia.org</cite></a>
</i>
</dt>
<dd class="theory-item-body clearfix">
<img src="img/wiki-2.png" alt="Квас в стакане" width="200" height="101">
<p>По российскому ГОСТу для промышленного изготовления — это напиток с объёмной долей этилового спирта не более 1,2%, изготовленный в результате незавершённого спиртового и молочнокислого брожения сусла.</p>
</dd>
</dl>
</div>
</div>
Потом идёт очень легкий пункт “Пресса о нас”. Тут мы делаем цитату и кнопку “Читать далее”:
<div class="reviews">
<div class="container">
<h2 class="block-title">Пресса о нас</h2>
<blockquote class="review">
<p>Сегодня мы провели дегустацию чего-то действительно новенького — крафтового кваса. Да, да, вы не ослышались! Спасибо Арсену и Руслану за то, что предоставили целую бочку своего напитка!</p>
<cite>Газета столичный Стольник</cite>
<a class="btn btn-transparent-light" href="#" title="Посмотреть полное описание">Читать далее</a>
</blockquote>
</div>
</div>
Дальше идёт блок “Ассортимент”, где делаем таблицу с информацией нашего напитка. Куча классов нам потребуется для дальнейшей стилизации:
<div class="price">
<div class="container">
<h2 class="block-title">Ассортимент</h2>
<table class="price-table">
<tr>
<th class="price-item-name">Название</th>
<th class="price-item-alcohol">Алк.</th>
<th class="price-item-caloricity">Ккал</th>
<th class="price-item-volume">Объём</th>
<th class="price-item-cost">Стоимость</th>
</tr>
<tr>
<td class="price-item-name">Классика</td>
<td class="price-item-alcohol">< 1,2%</td>
<td class="price-item-caloricity">33</td>
<td class="price-item-volume">330 мл</td>
<td class="price-item-cost">120 Р.</td>
</tr>
<tr>
<td class="price-item-name">Шабаш</td>
<td class="price-item-alcohol">> 1,2%</td>
<td class="price-item-caloricity">45</td>
<td class="price-item-volume">330 мл</td>
<td class="price-item-cost">250 Р.</td>
</tr>
<tr>
<td class="price-item-name">Вахтёр <sup class="tip">Новинка</sup></td>
<td class="price-item-alcohol">< 1%</td>
<td class="price-item-caloricity">35</td>
<td class="price-item-volume">0,5 л</td>
<td class="price-item-cost">150 Р.</td>
</tr>
<tr>
<td class="price-item-name">Романтик <sup class="tip">Новинка</sup></td>
<td class="price-item-percent">< 0,5%</td>
<td class="price-item-caloricity">27</td>
<td class="price-item-volume">0,5 л</td>
<td class="price-item-cost">90 Р.</td>
</tr>
</table>
</div>
</div>
Вслед за этим, пишем довольно объёмный блок “Заказать”, также добавляем название и текст блока, а вдобавок делаем строчки, где можно оставить свой заказ на квас:
<div class="feedback">
<div class="container">
<h2 class="block-title">Заказать</h2>
<p class="feedback-annotation">
Не ждите пока нас отрекламируют, как Вятский квас, и мы поднимем цены! Закажите настоящий крафтовый квас сейчас. При заказе от 10 баррелей — скидка 10%.
</p>
<form class="order-form" action="index.html" method="post">
<div class="form-group">
<label for="name">Представьтесь:</label>
<input id="name" type="text">
</div>
<div class="form-group clearfix">
<div class="left-part">
<label for="phone">Номер телефона:</label>
<input id="phone" type="text">
</div>
<div class="right-part">
<label for="second-phone">Доп. номер:</label>
<input id="second-phone" type="text">
</div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input id="email" type="text">
</div>
<div class="form-group">
<label for="select">Объём заказа:</label>
<br>
<select id="select" name="volume">
<option value="0" selected>От 5 до 10 баррелей в неделю</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="message">Доп. комментарий:</label>
<textarea id="message"></textarea>
</div>
<div class="checkbox-area">
<label>
<input type="checkbox" name="subscription" checked="checked">
Я согласен получать квасную рассылку
</label>
</div>
<input class="btn btn-solid" type="submit" name="name" value="Отправить заказ">
</form>
</div>
</div>
Напоследок остался последний блок “Подвал”, где мы добавляем логотип нашего продукта, неупорядочный список, 3 ссылки на соцсети, маленький текст и наименования разработчика:
<div class="page-footer">
<div class="container container-wide">
<div class="footer-top clearfix">
<div class="logo-footer">
<img src="img/logo.png" alt="Кваст" width="140" height="76">
</div>
<ul class="main-nav footer-nav">
<li><a href="#">История</a></li>
<li><a href="#">Производство</a></li>
<li><a href="#">Ассортимент</a></li>
<li><a href="#">Где купить</a></li>
</ul>
</div>
<div class="footer-bottom clearfix">
<div class="footer-social clearfix">
<a class="footer-social-in" href="https://instagram.com/htmlacademy">Инстаграм</a>
<a class="footer-social-fb" href="https://www.facebook.com/htmlacademy">Фейсбук</a>
<a class="footer-social-vk" href="https://vk.com/htmlacademy">Вконтакте</a>
</div>
<div class="footer-annotation">
<p>При перепечатке материалов ссылка на сайт обязательна!</p>
</div>
<div class="footer-copyright clearfix">
<a class="logo-htmlacademy" href="https://htmlacademy.ru"><img src="img/htmlacademy.png" alt="HTML Academy" width="27" height="34"></a><span class="copyright-text"><b>Разработчик:</b> <a href="https://htmlacademy.ru">HTML Academy</a></span>
</div>
</div>
</div>
</div>
</body>
</html>
Также закрывающим тегом body и html, мы завершаем разметку нашей вёрстки. Теперь осталось самое “сладкое” - стилизация. Начнём её оформление конечно же с “тела” сайта, где задаем минимальную ширину, обнуляем отступы, насыщенность, семейство, стиль и размер шрифта, а также фон, текст и межстрочный интервал:
body {
min-width: 1040px;
margin: 0;
padding: 0;
font-weight: 400;
font-size: 16px;
line-height: 30px;
font-family: "Arial", sans-serif;
color: #404040;
font-style: normal;
background-color: white;
}
Дальше контейнер, который вы наверняка неоднократно его видели в разметке, даем ширину и отступ:
.container {
width: 800px;
margin: 0 auto;
}
.container-wide {
width: 1015px;
}
Также стилизуем вспомогательный псевдокласс:
.clearfix::after {
content: "";
display: table;
clear: both;
}
Теперь стилизуем кнопку, где задаём инлайн-блочный элемент, внутренние отступы, шрифт и его насыщенность, межстрочный интервал, заглавные буквы и удаление текстовых декораций:
.btn {
display: inline-block;
padding: 8px 20px;
font: inherit;
font-weight: bold;
line-height: inherit;
vertical-align: middle;
text-transform: uppercase;
text-decoration: none;
}
После этого - другие кнопки, при наведении и нажатии, здесь всё очень легко и не нуждается в моих комментариях:
.btn-solid {
color: #ffffff;
background-color: #834700;
border: 2px solid #834700;
}
.btn-solid:hover {
background-color: #6a3900;
border-color: #6a3900;
}
.btn-solid:active {
color: rgba(255, 255, 255, 0.3);
background-color: #5c3200;
border-color: #5c3200;
}
.btn-transparent {
color: #834700;
border: 2px solid #834700;
}
.btn-transparent:hover {
color: #6a3900;
border-color: #6a3900;
}
.btn-transparent:active {
color: rgba(92, 50, 0, 0.3);
border-color: #cec1b2;
}
.btn-transparent-light {
color: #bcb6ab;
border: 2px solid #a5a097;
}
.btn-transparent-light:hover {
color: #ffffff;
background-color: #a5a097;
border-color: #a5a097;
}
.btn-transparent-light:active {
color: rgba(255, 255, 255, 0.3);
background-color: #8f8a81;
border-color: #8f8a81;
}
Теперь стилизуем основной блок нашего первого блока, делаем фон, высоту и верхний отступ:
.page-header {
height: 490px;
padding-top: 60px;
background-color: #7a5118;
background-image: url("../img/wheat-back.jpg");
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
}
Далее задаем нижний внешний отступ для хэдера:
.header-top {
margin-bottom: 120px;
}
После этого идёт наш логотип, его тоже не оставляем без внимания:
.logo-header {
float: left;
width: 140px;
height: 76px;
}
Потом оформляем блок с основной навигацией блока, где задаем расположение справо, ширину, обнуление внутренних и внешних отступов, внешний верхний отступ и рамки:
.main-nav {
float: right;
width: 600px;
margin: 0;
margin-top: 10px;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
Далее идут его элементы, где задаём относительное позиционирование, инлайн-блочный элемент, правый внешний отступы и вертикальное расположение по середине (для последнего - обнуление правого внешнего отступа), для ссылок - также инлайн-блочный элемент, внутр. отступы сверху и снизу, насыщенность шрифта, вертикальное расположение по середине, цвет текста, заглавные буквы и текстовые декорации:
.main-nav li {
position: relative;
display: inline-block;
margin-right: 50px;
vertical-align: middle;
}
.main-nav li:last-child {
margin-right: 0;
}
.main-nav a {
display: inline-block;
padding-top: 14px;
padding-bottom: 13px;
font-weight: bold;
vertical-align: middle;
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
}
После этого стилизуем их при наведии и нажатии:
.main-nav a:hover {
color: #ffcb78;
}
.main-nav li:hover::after {
content: "";
position: absolute;
bottom: -1px;
display: block;
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 1);
}
.main-nav a:active {
color: rgba(255, 203, 120, 0.3);
}
Осталось только оформить последний текст, задаем насыщенность и размер шрифта, межстрочный интервал, текстовое выравнивание посередине и цвет текста:
.slide-desription {
font-weight: bold;
font-size: 70px;
line-height: 70px;
text-align: center;
color: #ffffff;
}
Далее переходим к стилизации 2 блока “Новинки”. Задаем ему отступы и цвет фона:
.news {
padding-top: 80px;
padding-bottom: 110px;
background-color: #ffffff;
}
Вслед за этим оформляем следующий див с классом “news-item”, ставим относительное позиционирование, расположение на левую сторону, ширину, внутр. стороны слево и справо и боковые рамки (а для каждого 2ого - отмена левой рамки):
.news-item {
position: relative;
float: left;
width: 334px;
padding-right: 30px;
padding-left: 34px;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
}
.news-item:nth-child(2n) {
border-left: none;
}
Следом стилизуем название блока, придаем ему относительное позиционирование, обнуление внешнего отступа, размер шрифта, межстрочный интервал, цвет текста и прописные буквы:
.news-item-title {
position: relative;
margin: 0;
font-size: 40px;
line-height: 60px;
color: #000000;
text-transform: uppercase;
}
Далее стилизуем картинку блок, задаем внешние отступы:
.news-item-pic {
margin-top: 30px;
margin-left: 10px;
}
Теперь берём с собой блок с информацией, ставим абсолюстное размещение, ширину и внутр. отступ справо, а для статистики - ширину, нижний внешний отступ, насыщенность шрифта, цвет, прописные буквы, отображение 1 линии между ячейками, для его элементов - рамка и внутр. отступ:
.news-item-info {
position: absolute;
top: 85px;
right: 0;
width: 150px;
padding-right: 25px;
}
.news-item-stats {
width: 150px;
margin-bottom: 10px;
font-weight: bold;
color: #000000;
text-transform: uppercase;
border-collapse: collapse;
}
.news-item-stats td {
border: 1px solid #e5e5e5;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 5px;
}
Дальше игредиенты нашего продукта, обнуление внешнего отступа, размер шрифта и межстрочный интервал:
.news-item-composition {
margin: 0;
font-size: 14px;
line-height: 24px;
}
После этого идет описание нашего товара, задаём ширину и верхний и нижний внешний отступ:
.news-item-description {
width: 330px;
margin-top: 0;
margin-bottom: 60px;
}
Потом оформляем див с кнопками и ценником:
.news-item-controls {
font-size: 0;
}
.news-item-controls a {
font-size: 16px;
}
.news-item-controls .btn-transparent {
margin-right: 7px;
}
.news-item-price {
display: inline-block;
margin-left: 25px;
font-size: 16px;
vertical-align: middle;
color: #000000;
}
Наконец-то разобрались с 2ым блоком, на очереди у нас теперь “Преимущества”. Сначала оформим весь блок, задаем ему внутренние отступы и цвет фона:
.warranty {
padding-top: 80px;
padding-bottom: 90px;
background-color: #ffcb78;
}
Далее идет у нас список, где обнуляем внутренние и внешние отступы и убираем лишние точки, а для элементов - расположение влево, ширину, внутренние отступы слево и справо и рамку справа (для первого и последнего - обнуление внутр. отступов и цвет правой рамки):
.warranty-list {
margin: 0;
padding: 0;
list-style: none;
}
.warranty-list li {
position: relative;
float: left;
width: 210px;
padding-right: 95px;
padding-left: 95px;
border-right: 1px solid #e5b66c;
}
.warranty-list li:first-child {
padding-left: 0;
}
.warranty-list li:last-child {
padding-right: 0;
border-right-color: transparent;
}
.warranty-list li::before {
content: "";
position: absolute;
}
После этого распологаем картинки нашего блока и даем ширину и высоту:
.handmade::before {
width: 50px;
height: 68px;
background-image: url("../img/icon-brew.png");
}
.own::before {
width: 46px;
height: 65px;
background-image: url("../img/icon-matreshka.png");
}
.quality::before {
width: 63px;
height: 58px;
background-image: url("../img/icon-thumbsup.png");
}
Напоследок задаем для текста - внешние отступы сверху и вниз, размер шрифта, цвет и заглавные буквы, для тектса - обнуление внешнего отступа:
.warranty-title {
margin-top: 100px;
margin-bottom: 20px;
font-size: 20px;
color: #000000;
text-transform: uppercase;
}
.warranty-text {
margin: 0;
}
Закончили с 3 блок, переходим к 4 блоку под названием “Немного истории”. Начнём с цвета фона и внутренних отступов:
.theory {
padding-top: 80px;
padding-bottom: 80px;
background-color: #ffffff;
}
Далее идет стилизация названия блока, где обнуляем внешний отступ, ставим нижний внешний отступ, насыщенность и размер шрифта, межстрочный интервал, цвет текста и прописные буквы:
.theory-title {
margin: 0;
margin-bottom: 10px;
font-weight: bold;
font-size: 40px;
line-height: 60px;
color: #000000;
text-transform: uppercase;
}
Потом следует див с списком нашего блока, его тоже не оставляем без внимания:
.theory-list {
margin: 0;
padding: 0;
list-style: none;
}
После этого оформляем названия наших подблоков, ставим внешний верхний и нижний отступ, насыщенность и размер шрифта, цвет и заглавные буквы:
.theory-item-heading {
margin-top: 60px;
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
color: #000000;
text-transform: uppercase;
}
Следом за этим идёт стилизация источника, ставим правое расположения текста, ширину, насыщенность и размер шрифта, цвет и отключение текстовые преобразования:
.source {
float: right;
width: 196px;
font-size: 16px;
font-weight: normal;
color: #000000;
text-transform: none;
}
Затем направляемся к оформлению последнего подблока - обнуляем внешний отступ, а для картинки - правое расположение, ширина, внешний отступ сверху, для текста - левое расположение, ширину и обнуление внешнего отступа:
.theory-item-body {
margin-left: 0;
}
.theory-item-body img {
float: right;
width: 200px;
margin-top: 10px;
}
.theory-item-body p {
float: left;
width: 490px;
margin: 0;
}
Осталость только стилизовать ссылку, задаем цвет и курсивный шрифт, а при наведении и нажатии - также цвет:
.theory-link {
color: #834700;
font-style: italic;
}
.theory-link:hover {
color: #6a3900;
}
.theory-link:active {
color: #cab7a2;
}
Всё. Устали? А мы только закончили первую половину стилизации нашего проекта. Следующий идёт довольно лёгкий блок «Пресса о нас». Начнём, как обычно, с внутренних отступов и цвета фона:
.reviews {
padding-top: 80px;
padding-bottom: 90px;
background-color: #ede5d8;
}
Далее оформляем цитату, убираем внешний отступ, задаем относительное позиционирование, ширину и высоту и фон, а для текста - ширина, обнуление внешнего отступа, нижний внешний отступ, для источника - правое расположение, ширину, верхний внешний отступ, насыщенность, размер и стиль шрифта, цвет, заглавные буквы:
.review {
position: relative;
margin: 0;
}
.review::before {
content: "";
position: absolute;
top: 5px;
left: -105px;
width: 41px;
height: 31px;
background-image: url("../img/quotes.png");
}
.review p {
width: 690px;
margin: 0;
margin-bottom: 35px;
}
.review cite {
float: right;
width: 330px;
margin-top: 10px;
font-weight: bold;
font-size: 20px;
color: #000000;
text-transform: uppercase;
font-style: normal;
}
Закончили с прессой, следующий по списку идёт блок «Ассортимент», начнем с внутр. отступов:
.price {
padding-top: 90px;
padding-bottom: 90px;
}
Далее оформляем таблицу, ставит ширину и отображение одной линий между ячеек, для самих ячеек - внутренние отступы, насыщенность и размер шрифта, текстовое расположение слево, цвет, заглавные буквы и нижняя рамка:
.price-table {
width: 100%;
border-collapse: collapse;
}
.price-table th {
padding-bottom: 30px;
font-weight: normal;
font-size: 11px;
text-align: left;
color: #999999;
text-transform: uppercase;
}
.price-table td {
padding: 17px 0;
}
.price-table th,
.price-table td {
border-bottom: 1px solid #e5e5e5;
}
После идет оформление ячеек таблицы - ширина, полужирное начертание, цвет и заглавные буквы, для последних - правое расположение текста:
.price-item-name {
width: 400px;
font-weight: bold;
color: #000000;
text-transform: uppercase;
}
.price-item-alcohol {
width: 90px;
}
.price-item-caloricity {
width: 60px;
}
.price-item-volume {
text-transform: uppercase;
}
th.price-item-cost,
td.price-item-cost {
text-align: right;
}
Напоследок берем с тобой новинки товаров - внешний и внутренние отступы, размер отступа, межстрочный интервал, цвет текста, заглавные буквы, фон и радиус рамки:
.tip {
margin-left: 20px;
padding: 2px 5px;
font-size: 8px;
line-height: 30px;
color: #ffffff;
text-transform: uppercase;
background-color: #000000;
border-radius: 2px;
}
Наконец-то завершили 6 блок, переходим к следующему! «Заказать». Начнём снова с внутренних отступов и фона:
.feedback {
padding-top: 80px;
padding-bottom: 110px;
background-color: #ffcb78;
}
После этого идет оформление названия нашего блока, где ставим нижний внешний отступ, полужирное начертание, размер шрифта, межстрочный, цвет текста и заглавные буквы, а для текста - ширина, обнуление внешнего отступа и нижний внешний отступ:
.block-title {
margin: 0;
margin-bottom: 75px;
font-weight: bold;
font-size: 40px;
line-height: 60px;
color: #000000;
text-transform: uppercase;
}
.feedback-annotation {
width: 660px;
margin: 0;
margin-bottom: 70px;
}
Потом следует стилизация формы блока, где ставим ширину, а для подблока - нижний внутренний отступ, полужирное начертание и размер шрифта, межстрочный интервал, вертикальное расположение, цвет и прописные буквы:
.order-form {
width: 630px;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
font-weight: bold;
font-size: 16px;
line-height: 20px;
vertical-align: top;
color: #000000;
text-transform: uppercase;
}
Далее идут текстовые области и интуп с “текстом”, где ставим ширину, внутренние отступы, размер, насыщенность и сам шрифт, межстрочный интервал, цвет текста и фона, заглавные буквы и отмена рамки:
.form-group input[type="text"],
.form-group textarea {
box-sizing: border-box;
width: 100%;
padding: 15px 10px;
padding-left: 20px;
font: inherit;
font-weight: bold;
font-size: 16px;
line-height: 20px;
color: #b69054;
text-transform: uppercase;
background-color: rgba(0, 0, 0, 0.1);
border: none;
}
Следом стилизуем текстую область, задаем высоту и размеры текстового поля не изменяются, а при наведении и нажатии - цвет текста и фона:
.form-group textarea {
height: 120px;
resize: none;
}
.form-group input[type="text"]:hover,
.form-group textarea:hover {
background-color: rgba(0, 0, 0, 0.15);
}
.form-group input[type="text"]:focus,
.form-group textarea:focus {
color: #000000;
background-color: #ffffff;
}
Позже следуют 2 части блока - правое и левое расположение текста и одинаковую ширину:
.left-part {
float: left;
width: 290px;
}
.right-part {
float: right;
width: 290px;
}
Осталось только чекбоксы - ставим внешние отступы, полужирное начертание, размер шрифта, межстрочный интервал, вертикальное выравнивание посередине, цвет текста и заглавные буквы:
.checkbox-area {
margin-bottom: 40px;
}
.checkbox-area input {
margin: 0;
margin-right: 10px;
}
.checkbox-area label {
margin-right: 15px;
font-weight: bold;
font-size: 16px;
line-height: 20px;
vertical-align: middle;
color: #000000;
text-transform: uppercase;
}
Закончили с 7 блоком, остался последний - “Подвал”. Начнём его оформленние, опять же, с внутренних отступов и цвета фона:
.page-footer {
padding-top: 60px;
padding-bottom: 70px;
background-color: #000000;
}
Далее идет лого футера - левое расположение текста и левый внешний отступ:
.logo-footer {
float: left;
width: 140px;
height: 76px;
margin-left: 37px;
}
После навигация и следующий подблок, тут всё очень просто, задаём внешние отступы:
.footer-nav {
margin-top: 7px;
margin-right: 107px;
}
.footer-bottom {
margin-top: 47px;
}
Потом стилизуем подблок с соцсетям, задаём левое расположение и ширину, а для ссылок - тоже левое расположение, ширину и высоту, левый внешний отступ, нулевой размер шрифта, фон и рамку, а при наведении - положение позиционированного элемента и цвет рамки, а при нажатии - непрозрачность:
.footer-social {
float: left;
width: 216px;
}
.footer-social a {
position: relative;
float: left;
width: 70px;
height: 66px;
margin-left: -1px;
font-size: 0;
background-color: #1b1b1b;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid rgba(255, 203, 120, 0.1);
}
.footer-social a:hover {
z-index: 1;
border-color: rgba(255, 203, 120, 0.3);
}
.footer-social a:active {
opacity: 0.5;
}
Дальше ставим картинки соцсетей:
.footer-social-vk {
background-image: url("../img/icon-vk.png");
}
.footer-social-fb {
background-image: url("../img/icon-fb.png");
}
.footer-social-in {
background-image: url("../img/icon-insta.png");
}
Потом идёт аннотация - левое расположение, ширина, внешние отступы, размер шрифта, межстрочный интервал и цвет текста, а для текста - обнуление отступа:
.footer-annotation {
float: left;
width: 200px;
margin-top: 12px;
margin-left: 91px;
font-size: 14px;
line-height: 20px;
color: #989898;
}
.footer-annotation p {
margin: 0;
}
Следом - копирайт, где ставим левое расположение, ширину, левый внешний отступ и обнуление размер шрифта, а для ссылок - цвет и декорации текста:
.footer-copyright {
float: left;
width: 300px;
margin-left: 200px;
font-size: 0;
}
.footer-copyright a {
color: #989898;
text-decoration: none;
}
Потом логотип, где пишем относительное позиционирование, инлайн-блочный элемент, ширину и высоту, вертикальное расположение, цвет фона, рамку, а при наведении - цвет рамки, а при нажатии - непрозрачность:
.logo-htmlacademy {
position: relative;
display: inline-block;
width: 70px;
height: 66px;
vertical-align: top;
background-color: #1b1b1b;
border: 1px solid rgba(255, 203, 120, 0.1);
}
.logo-htmlacademy:hover {
border-color: rgba(255, 203, 120, 0.3);
}
.logo-htmlacademy:active {
opacity: 0.5;
}
После картинка логотипа - абсолютное позиционирование и автоматическое внешние расположение:
.logo-htmlacademy img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Осталось только оформить название разработчика, где идёт инлайн-блочный элемент, размер шрифта, межстрочный интервал, вертикальное расположение посередине,цвет текста и верхний и левый внешний отступ:
.footer-copyright span {
display: inline-block;
font-size: 14px;
line-height: 20px;
vertical-align: middle;
color: #989898;
}
.copyright-text {
margin-top: 25px;
margin-left: 30px;
}
На этом всё, огромное благодарность всем тем, кто дочитал до конца. Для самых ленивых ссылка на архив с полным решением: kvast.zip - Google Drive
Отдельную благодарностью хочу выразить @rusproweb и Ирине из техподдержки за помощь! 