Ребята, чтобы усвоить и закрепить материал в курсе Кексби, решила сверстать страницу до конца. Кто-нибудь может указать на ошибки, размеры и пробелы, старалась соблюдать, но это не главное. Хочу понять в самой структуре были ли допущены ошибки, может некоторые блоки вообще стоило выполнить другим путем. У меня большие сомнения по блоку заказа, чувствую, что нужно было не так, но не могу придумать как))) Спасибо всем, кто откликнется)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Квас</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page-header">
<div class="container">
<div class="header-top clearfix">
<div class="header-logo">
<img src="img/logo.png" alt="Кваст" width="140" height="76">
</div>
<ul class="main-nav clearfix">
<li><a href="#">История</a></li>
<li><a href="#">Производство</a></li>
<li><a href="#">Ассортимент</a></li>
<li><a href="#">Где купить</a></li>
</ul>
</div>
<div class="promo">
<a href="#">Крафтовый квас<br> всему голова!</a>
</div>
</div>
</div>
<div class="popular-and-price">
<div class="container">
<h2 class="section-title">Новинки</h2>
<div class="popular-items clearfix ">
<div class="catalog-item">
<div class="table">
<table>
<tr>
<td>Алк.</td>
<td> < 1% </td>
</tr>
<tr>
<td>Ккал:</td>
<td>35</td>
</tr>
</table>
<p>Ржаной хлеб, Вода, Солод, Соль</p>
</div>
<img src="img/bottle-left.jpg" width="319" height="459">
<h3>Вахтёр</h3>
<p class="table-p">Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений!</p>
<div class="btn-item">
<a class="btn" href="#">Подробнее</a>
<a class="btn" href="#">Купить</a>
<b>150 Р.</b>
</div>
</div>
<div class="catalog-item">
<div class="table">
<table>
<tr>
<td>Алк.</td>
<td> < 0,5% </td>
</tr>
<tr>
<td>Ккал:</td>
<td>27</td>
</tr>
</table>
<p>Ячменный хлеб, Вода, Солод, Апельсин</p>
</div>
<img src="img/bottle-right.jpg" width="319" height="459">
<h3>Романтик</h3>
<p class="table-p">Лёгкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
<div class="btn-item">
<a class="btn" href="#">Подробнее</a>
<a class="btn" href="#">Купить</a>
<b>90 Р.</b>
</div>
</div>
</div>
</div>
</div>
<div class="features">
<div class="container">
<ul class="clearfix">
<li class="feature-item feature-choice">
<h2 class="feature-title">Варим сами</h2>
<p>Вот этими самыми руками. Экспериментируем и творим, что хотим.</p>
</li>
<li class="feature-item feature-quality">
<h2 class="feature-title">Своё, родное</h2>
<p>Не заработка ради, а импортозамещения для. Поднимаем производство.</p>
</li>
<li class="feature-item feature-safety">
<h2 class="feature-title">Не экономим</h2>
<p>Человек это то, что он ест и пьет. У нас только качественные ингредиенты.</p>
</li>
</ul>
</div>
</div>
<div class="reference">
<div class="container">
<h2 class="section-title">Немного истории</h2>
<dl>
<dt>
<h3 class="reference-title">Происхождение кваса</h3>
<i class="reference-source">источник: <a target="_blank" href="https://ru.wikipedia.org">ru.wikipedia.org</a></i>
</dt>
<dd>
<img src="img/wiki-1.png" alt="Окрас кошек и котов" width="200" height="101">
<p>Квас на Руси появился в X-XI веке. Само слово «квас» тоже имеет древнерусское происхождение. Помимо России квас готовят в Белоруссии, Сербии, Македонии, Словакии и многих других странах, но называется он везде одинаково — квас.</p>
</dd>
<dt>
<h3 class="reference-title">Классификация кваса</h3>
<i class="reference-source">источник: <a target="_blank" href="http://kotmur.spb.ru">ru.wikipedia.org</a></i>
</dt>
<dd>
<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="section-title">Пресса о нас</h2>
<div class="reviews-list clearfix">
<div class="reviews-form">
<img src="css/form.png" width="30" height="30">
</div>
<blockquote class="reviews-item">
<p>Сегодня мы провели дегустацию чего-то действительно новенького — крафтового кваса.</br>Да, да, вы не ослышались! Спасибо Арсену и Руслану за то, что предоставили целую бочку своего напитка!</p>
<a class="btn" href="#" title="Читать далее">Читать далее</a>
<p class="reviews-author">Газета столичный Стольник</p>
</blockquote>
</div>
</div>
</div>
<div class="price">
<div class="container">
<h2 class="section-title">Ассортимент</h2>
<table class="price-list">
<tr>
<th>Название</th>
<th>Алк.</th>
<th>Ккал</th>
<th>Объём</th>
<th>Стоимость</th>
</tr>
<tr>
<td class="price-name">Классика</td>
<td> < 1,2%</td>
<td>33</td>
<td>330 мл</td>
<td>120 Р.</td>
</tr>
<tr>
<td class="price-name">Шабаш</td>
<td> > 1,2%</td>
<td>45</td>
<td>330 мл</td>
<td>250 Р.</td>
</tr>
<tr>
<td class="price-name">Вахтёр <sup>Новинка</sup></td>
<td>< 1%</td>
<td>35</td>
<td>0,5 л</td>
<td>150 Р.</td>
</tr>
<tr>
<td class="price-name">Романтик <sup>Новинка</sup></td>
<td>< 0.5%</td>
<td>27</td>
<td>0,5 л</td>
<td>90 Р.</td>
</tr>
</table>
</div>
</div>
<div class="feedback">
<div class="container">
<h2 class="section-title">Заказать</h2>
<p class="feedback-tip">Не ждите пока нас отрекламируют, как Вятский квас, и мы поднимем цены! Закажите настоящий крафтовый квас сейчас. При заказе от 10 баррелей — скидка 10%.</p>
<form class="feedback-form" action="/keksby-mail" method="post">
<div class="feedback-form-group ">
<label for="fullname">Представьтесь:</label>
<input class="column" type="text" name="fullname" id="fullname" value="Как мы можем к Вам обращаться?">
</div>
<div class="feedback-form-group column-min">
<label for="phone">Номер телефона:</label>
<input type="text" name="phone" id="phone" value="+7(ХХХ) ХХХ-ХХ-ХХ">
</div>
<div class="feedback-form-group column-min1">
<label for="phone-dop">Доп. номер:</label>
<input type="text" name="phone-dop" id="phone-dop" value="+7(ХХХ) ХХХ-ХХ-ХХ">
</div>
<div class="feedback-form-group">
<label for="email">Email:</label>
<input class="column" type="text" name="email" id="email" value="Ваша электронная почта">
</div>
<div class="feedback-form-group column1">
<label for="topic">Объем заказа:</label>
<select name="topic" id="topic">
<option value="1">От 5 до 10 баррелей в неделю</option>
<option value="2">От 15 до 20 баррелей в неделю</option>
<option value="3">От 15 до 30 баррелей в неделю</option>
</select>
</div>
<div class="feedback-form-group">
<label for="message">Доп. комментарий:</label>
<textarea class="column" name="message" id="message" rows="10" cols="100">Сообщите нам всё, что считаете нужным</textarea>
</div>
<div class="checkbox-area ">
<input type="checkbox" name="subscription" checked>
<label> Я согласен получать квасную рассылку </label>
</div>
<input type="submit" class="btn" value="Отправить заказ">
</form>
</div>
</div>
<div class="page-footer">
<div class="container">
<div class="footer-top clearfix">
<div class="footer-logo">
<img src="img/logo.png" alt="Кваст" width="140" height="76">
</div>
<ul class="main-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-sotc clearfix">
<div class="footer-social footer-menu">
<a class="social-btn btn-in" href="https://instagram.com/htmlacademy">Инстаграм</a>
<a class="social-btn btn-fb" href="https://facebook.com/htmlacademy">Фейсбук</a>
<a class="social-btn btn-vk" href="https://vk.com/htmlacademy">Вконтакте</a>
</div>
<b class="footer-menu middle">При перепечатке материалов</br> ссылка на сайт обязательна!</b>
<div class="footer-menu footer-copyright ">
<div class="fon">
<img src="img/htmlacademy.png" alt="Кваст" width="27" height="34">
</div>
<div class="academy">
<b>Разработчик:</b><a href="https://htmlacademy.ru">HTML Academy</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
код:
body{
min-width: 1220px;
padding:0;
margin:0;
font-size: 18px;
line-height: 24px;
font-family: “Arial”, sans-serif;
color: #404040;
background-color: white;
}
.container{
width: 1200px;
margin:0 auto;
}
.clearfix::after {
content: “”;
display: table;
clear: both;
}
.page-header {
padding-top: 60px;
padding-bottom: 160px;
background-image: url(“fon.jpg”);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.page-header,
.page-footer {
background-color: #000000;
color: #8d8d8d;
}
.header-top,
.footer-top{
margin-left:200px;
width: 800px;
margin-bottom: 130px;
}
.header-logo,
.footer-logo{
float:left;
width:140px;
height: 76px;
margin-top: -10px;
}
.main-nav {
margin-top: 20px;
width: 600px;
padding: 0;
height: 60px;
margin-left:200px;
border-top: 1px solid #7E5C2E ;
border-bottom: 1px solid #7E5C2E;
}
.main-nav li{
font-size: 16px;
float: left;
margin-top: 20px;
margin-right: 55px;
text-transform:uppercase;
list-style: none;
}
.main-nav li:last-child{margin-right:0;}
.main-nav a {text-decoration: none; color: white;}
.main-nav a:hover { text-decoration: underline;}
.main-nav a:active {color: rgba(255, 255, 255, 0.3);}
.promo {
font-weight: bold;
font-size: 74px;
line-height: 74px;
font-family: “Enigmatic Unicode”, serif;
text-align: center;
padding-bottom: 20px;
}
.promo a {
color: #fffffd;
text-decoration: none;
}
.btn {
display: inline-block;
padding: 10px 20px;
vertical-align: middle;
color: #854603;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #a38b70;
}
.btn:hover{color:#8d745a; border-color: #8d745a;}
.btn:active{color: rgba(141, 116, 90, 0.3); border-color: #8d745a;}
.section-title {
margin: 0;
margin-left: 200px;
margin-bottom: 90px;
font-weight: bold;
font-size: 45px;
line-height: 55px;
font-family: “Arial”, serif;
color: #000000;
text-transform:uppercase;
}
.popular-and-price {
padding-bottom: 110px;
padding-top: 100px;
background-color: #ffffff;
}
.popular-items{
margin-left:200px;
width: 800px;
}
.catalog-item{
position: relative;
float:left;
min-height: 750px;
width: 398px;
border-right:1px solid #e5e5e5;
border-left:1px solid #e5e5e5;
font-size: 14px;
}
.catalog-item img {
position:absolute;
top:0;
left:20px;
max-width: 100%
height:auto;
z-index: 1
}
.table{
position: absolute;
top:0;
right:0;
z-index: 10;
width: 180px;
height: 55px;
padding: 15px 0;
line-height: 26px;
font-weight: bold;
text-transform: uppercase;
border-bottom:1px solid #e5e5e5;
}
.table p{
margin: 0;
padding: 20px 0;
padding-right: 20px;
position: absolute;
top:85px;
right:-2px;
width: 160px;
text-transform:none;
font-size: 12px;
line-height: 20px;
}
.catalog-item h3 {
position: absolute;
left:0;
top:460px;
padding:0 40px;
text-transform: uppercase;
font-size: 36px;
color: #000000;
}
.table-p{
position: absolute;
left: 0;
top:550px;
color:#767676;
padding:5px 40px;
font-size: 16px;
margin-bottom: 90px;
}
.btn-item{
position:absolute;
top:700px;
left:45px;
}
.btn-item b{
margin-left:30px;
}
.btn-item a:nth-of-type(2){
border: 2px solid #854600;
background-color: #854600;
color: #ffffff;
}
.features{
padding-top: 70px;
padding-bottom: 70px;
background-color: #ffcb78;
color:#746550;
width: 100%;
}
.features ul {
padding: 0;
margin: 0;
list-style: none;
}
.feature-item {
float: left;
width: 398px;
padding-top: 90px;
text-align: left;
border-left: 1px solid #746550;
}
.feature-item:first-child {border-left:transparent;}
.feature-choice {
background: url(“sami.png”) no-repeat;
background-position: 90px 20px;
}
.feature-quality {
background: url(“svoe.png”) no-repeat;
background-position: 90px 20px;
}
.feature-safety {
background: url(“klass.png”) no-repeat;
background-position: 90px 20px;
}
.feature-item p {
font-size: 16px;
color: #746550;
text-align: left;
padding-left: 90px;
padding-right: 90px;
}
.feature-title {
font-family: “Arial”, serif;
font-size: 28px;
line-height: 30px;
font-weight: bold;
color: #000000;
text-transform:uppercase;
padding-left: 90px;
padding-right: 90px;
}
.reference {
padding-top: 90px;
padding-bottom: 90px;
background-color: #ffffff;
}
.reference-title {
font-size: 24px;
display:inline;
}
.reference-source {
margin-left: 330px;
font-size: 16px;
color: #666666;
font-style: italic;
}
.reference-source a {color: #a38b70;}
.reference-source a:hover {color: #8d745a;}
.reference-source a:active {color: rgba(141, 116, 90, 0.3);}
.reference dl {
width: 800px;
margin: 0;
margin-left: 200px;
margin-top: 100px;
padding: 0;
}
.reference dt {
margin: 0;
margin-bottom: 10px;
}
.reference dd {
position: relative;
min-height: 110px;
width: 475px;
top:0;
left:0;
margin: 0;
font-size: 16px;
}
.reference dd img {
position: absolute;
margin-left: 600px;
border-radius: 5px;
}
.reference dd p{line-height:34px;}
.reference dd+dt{
margin-top: 80px;
}
.reviews{
background-color:#ede5d8 ;
padding-bottom:40px;
padding-top:90px;
}
.reviews-form {
float: left;
margin-left:90px;
margin-top: 20px;
width: 30px;
height: 30px;
}
.reviews-item{
width: 800px;
margin: 0;
padding: 0;
margin-left: 200px;
font-size: 16px;
}
.reviews-item p{margin-bottom: 90px;}
.reviews-author {
padding: 0;
margin: 0;
color:#000000;
float: right;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
}
.reviews .btn{ color:#a69f97; border-color:#a69f97; }
.price{
padding-top: 100px;
padding-bottom: 90px;
}
.price-list {
width: 800px;
margin-left:200px;
border-collapse: collapse;
line-height:54px;
font-size: 16px;
text-transform: uppercase;
}
.price-list th {
font-weight: normal;
font-size: 12px;
text-align: left ;
}
.price-list td { border-bottom: 1px solid #d8d8d8;}
.price-list td:last-child {
width: 200px;
text-align: right;
}
.price-list sup {background-color: #000000;
font-size: 8px;
color:#ffffff;
margin-left: 20px;
padding: 5px;
}
.price-list .price-name {
font-weight: bold;
color: #000000;
width: 400px;
}
.feedback {
background-color: #ffcb78;
padding-top: 90px;
padding-bottom: 115px;
}
.feedback-form{
width: 800px;
min-height: 650px;
margin-left: 200px;
position: relative;
}
.feedback-tip {
font-size: 16px;
width: 650px;
margin-left: 200px;
margin-bottom: 80px;
}
.feedback .section-title{
margin-left: 200px;
margin-bottom: 100px;
}
.feedback-form-group {padding: 10px 0;}
.feedback-form-group label {
font-weight:bold;
min-width: 200px;
font-size: 14px;
line-height:46px;
text-transform: uppercase;
}
.feedback-form input[type=“text”],
.feedback-form select,
.feedback-form textarea{
background-color: #e6b66c;
border: none;
min-height:50px;
padding-left: 20px;
}
.column{
width: 600px;
text-transform: uppercase;
float:right;
}
.column1{ margin-top:60px;}
.column1 select{width: 620px; float: right;}
.column-min{float:left;}
.column-min input{width: 200px; margin-left: 35px;}
.column-min1{float:right;}
.column-min1 input{width: 200px; margin-left: 35px;}
.checkbox-area{
float:right;
margin-top:50px;
margin-right:270px;
font-size: 14px;
text-transform: uppercase;
}
.checkbox-area input{ width:25px; height: 25px; }
.feedback .btn{
float:right;
margin-top:40px;
margin-right: 450px;
background-color: #834700;
color: #ffffff;
border-color:#834700;
}
.page-footer {
padding-top: 50px;
padding-bottom: 55px;
}
.footer-top {margin-bottom: 40px;}
.footer-top .main-nav{border: none;}
.footer-sotc {
width: 1000px;
margin-left: 100px;
}
.footer-menu{float:left;}
.footer-social{
width: 245px;
margin-left: 30px;
margin-right: 80px;
background-color:#efc176;
border-radius: 10px;
border-color: #834700;
}
.footer-social .social-btn {font-size: 0;}
.social-btn {
display: inline-block;
width: 75px;
height: 70px;
padding-left: 5px;
margin-right: -5px;
}
.social-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.social-btn:active {
border-color: #ffffff;
opacity: 0.1;
}
.btn-vk { background: url(“vk.png”) no-repeat;
background-color:#efc176;
}
.btn-fb { background: url(“fb.png”) no-repeat;
background-color:#efc176;
}
.btn-in { background: url(“insta.png”) no-repeat;
background-color:#efc176;
margin-left:5px;
}
.middle{
font-size: 12px;
line-height:20px;
width: 200px;
margin-right: 200px;
margin-top: 20px;
}
.footer-copyright {
float:right;
position:relative;
font-size: 12px;
width: 250px;
color: #979797;
}
.academy{position: absolute;
top:-30px;
right:0;}
.footer-copyright a {
color: #ffffff;
text-decoration: none;
}
.footer-copyright a:hover {text-decoration: underline;}
.footer-copyright a:active {color: rgba(255, 255, 255, 0.3);}
.footer-copyright .fon {
width: 70px;
height: 70px;
background-color: #1b1b1b;
margin-top: -60px;
margin-left: -20px;
}
.footer-copyright img {
position: absolute;
top:-40px;
left: 0;
}
