Кексби -суперфинал


#1

Ребята, чтобы усвоить и закрепить материал в курсе Кексби, решила сверстать страницу до конца. Кто-нибудь может указать на ошибки, размеры и пробелы, старалась соблюдать, но это не главное. Хочу понять в самой структуре были ли допущены ошибки, может некоторые блоки вообще стоило выполнить другим путем. У меня большие сомнения по блоку заказа, чувствую, что нужно было не так, но не могу придумать как))) Спасибо всем, кто откликнется)

      <!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;
}





#2

Воспользуйтесь хостингом Github Pages, это не сложно.
Будет гораздо больше тех, кто откликнется.


#3

спасибо, я даже не знала о таком, сейчас посмотрю