Помогите с финальным испытание

PENGUIN · 23.Сентябрь.2021 07:18:00

HTML

Кваст

      <ul class="clearfix">
        <li><a href="#">История</a></li>
        <li><a href="#">Производство</a></li>
        <li><a href="#">Ассортимент</a></li>
        <li><a href="#">Где купить</a></li>
      </ul>

      <p>Крафтовый квас <br> всему голова!</p>
    </div>
  </div>


  <div class="bottles clearfix">
    <div class="little-container">
      <h2 class="title">Новинки</h2>

      <div class="left-bottle">
        <h3 class="title">Вахтёр</h3>
        <div class="description-1">
        <table class="table-1"> 
            <tr>   
                <td>Алк.</td> 
                <td>&lt; 1%</td>
            </tr>   
            <tr>
                <td>Ккал</td>
                <td>35</td>
            </tr>
        </table>

        <p class="text-1">Ржаной хлеб, Вода, Солод, Соль</p>
        </div>
        <img src="img\bottle-left.jpg">

        <p class="text">Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений!</p>
        
        <p class="d"><a class="btn btn-1" href="#">Подробнее</a> <a class="btn btn-2" href="#">Купить</a><b>150 Р.</b></p>
      </div>

      <div class="right-bottle">
        <h3 class="title">Романтик</h3>
        <div class="description-2">
        <table class="table-2"> 
            <tr>   
                <td>Алк.</td> 
                <td>&lt; 0,5%</td>
            </tr>   
            <tr>
                <td>Ккал</td>
                <td>27</td>
            </tr>
        </table>
        <p class="text-2">Ячменный хлеб, Вода, Солод, Апельсин</p>
        </div>
        <img src="img\bottle-right.jpg">

        <p class="text">Лёгкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
        
        <p class="d"><a class="btn btn-1" href="#">Подробнее</a> <a class="btn btn-2" href="#">Купить</a><b>90 Р.</b></p>
      </div>
    </div>
  </div>


  <div class="benefits clearfix">
    <div class="big-container">
      <ul>
        <div class="benefits-1">
          <div class="icon-1"></div>
          <li><h2>Варим сами</h2></li>
          <p>Вот этими самыми руками. Экспериментируем и творим, что хотим.</p>
        </div>

        <div class="benefits-2">
          <div class="icon-2"></div>
          <li><h2>Своё, родное</h2></li>
        <p>Не заработка ради, а импортозамещения для. Поднимаем производство.</p>
          </div>

        <div class="benefits-3">
          <div class="icon-3"></div>
          <li><h2>Не экономим</h2></li>
          <p>Человек это то, что он ест и пьёт. У нас только качественные ингредиенты.</p>
        </div>
      </ul>
    </div>
  </div>


  <div class="history clearfix">
    <div class="little-container">
      <h2 class="title">Немного истории</h2>
      <dl>
        <div class="his-item">
          <dt>
              Происхождение кваса <i>Источник:<a href="#"> ru.wikipedia.org</a></i>
          </dt>  
          <dd>
              <img src="img/wiki-1.png">
              <p>Квас на Руси появился в X-XI веке. Само слово «квас» тоже имеет древнерусское происхождение. Помимо России квас готовят в Белоруссии, Сербии, Македонии, Словакии и многих других странах, но называется он везде одинаково — квас.</p>
          </dd>
        </div>
        <div class="his-item">
          <dt>
              Классификация кваса <i>Источник:<a href="#"> ru.wikipedia.org</a></i>    
          </dt>
          <dd>
              <img src="img/wiki-2.png">
              <p>По российскому ГОСТу для промышленного изготовления — это напиток с объёмной долей этилового спирта не более 1,2%, изготовленный в результате незавершённого спиртового и молочнокислого брожения сусла.</p>
          </dd>
        </div>
      </dl>
    </div>
  </div>


  <div class="press clearfix">
    <div class="little-container">
      <dl>
        <dt>
          <h2 class="title">Пресса о нас</h2>
        </dt>
        <dd>
          <div class="press-icon"></div>
          <p>Сегодня мы провели дегустацию чего-то действительно новенького — крафтового кваса. Да, да, вы не ослышались! Спасибо Арсену и Руслану за то, что предоставили целую бочку своего напитка!</p>  
          <a class="btn his-btn" href="#">Читать далее</a> <i>Газета столичный Стольник</i> 
        </dd>
      </dl>
    </div>
  </div>


  <div class="assortment clearfix">
    <div class="little-container">
      <h2 class="title">Ассортимент</h2>
      <table class="assortment-table">
        <tr>
          <th class="name">Название</th>
          <th>Алк.</th>
          <th>Ккал</th>
          <th>Объём</th>
          <th class="coast">Стоимость</th>
        </tr>

        <tr>
          <td class="name">Классика</td>
          <td>&lt; 1,2%</td>
          <td>33</td>
          <td>330 мл</td>
          <td class="coast">120 Р.</td>
        </tr>

        <tr>
          <td class="name">Шабаш</td>
          <td>&gt; 1,2%</td>
          <td>45</td>
          <td>330 мл</td>
          <td class="coast">250 Р.</td>
        </tr>

        <tr>
          <td class="name">Вахтёр <sup class="new">Новинка</sup></td>
          <td>&lt; 1%</td>
          <td>35</td>
          <td>0,5 л</td>
          <td class="coast">150 Р.</td>
        </tr>

        <tr>
          <td class="name">Романтик <sup class="new">Новинка</sup></td>
          <td>&lt; 0,5%</td>
          <td>27</td>
          <td>0,5 л</td>
          <td class="coast">90 Р.</td>
        </tr>
      </table>
    </div>
  </div>


  <div class="buy clearfix">
    <div class="little-container">
      <h2 class="title">Заказать</h2>

      <p>Не ждите пока нас отрекламируют, как Вятский квас, и мы поднимем цены! Закажите настоящий крафтовый квас сейчас. При заказе от 10 баррелей — скидка 10%.</p>
      
      <form>
        <label for="name">Представьтесь:</label>
        <div class="form-item">
          <input type="text" id="name" name="name">
          <br>
      </div>

        <label for="tel">Номер телефона:</label>
        <div class="form-item-2">
          <input type="text" id="tel" name="tel">
          <br>  
        </div>

        <label for="2tel">Доп. номер:</label>
        <div class="form-item-3">
          <input type="text" id="2tel" name="2tel">
          <br> 
        </div>

        <label for="email">Email:</label>
        <div class="form-item-4">
          <input type="text" id="email" name="email">
          <br>
        </div>
        Объём заказа:<br>
        <select>
          <option>От 5 до 10 баррелей в неделю</option>
        </select>
        <br>
        <label for="com">Доп. комментарий:</label>
        <textarea id="com"></textarea>
        <br>
        <label>
        <input type="checkbox" name="spam" checked> Я согласен получать квасную рассылку
        </label>
        <br>
        <input type="submit" name="sent" value="Отправить заказ">
      </form>
    </div>
  </div>

  <div class="page-footer">
    <div class="big-container">
      <img class="logo" src="img\logo.png">

      <ul>
        <li><a href="#">История</a></li>
        <li><a href="#">Производство</a></li>
        <li><a href="#">Ассортимент</a></li>
        <li><a href="#">Где купить</a></li>
      </ul>

      <p><a href="#">Инстаграм</a> <a href="#">Фейсбук</a> <a href="#">Вконтакте</a></p>
      <p>При перепечатке материалов ссылка на сайт обязательна!</p>
      
      <img src="img\htmlacademy.png"> <b>Разработчик:</b> <a href="#">HTML Academy</a>
    </div>
  </div>

body {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 30px;
font-family: sans-serif;
color: #404040;
background-color: white;
min-width: 1015px;

}

.little-container{
width: 800px;
margin: 0 auto;
}

.big-container{
width: 1015px;
margin: 0 auto;
}

p{
font: 16px Arial;
color: #404040;
font-weight: normal;
line-height: 30px;
}

.title{
font: 40px Arial;
color: black;
font-weight: 700;
text-transform: uppercase;
line-height: 61px;
}

.btn{
text-decoration: none;
font: 16px Arial;
font-weight: 700;
text-transform: uppercase;
}

.page-header {
color: white;
background: url(img/wheat-back.jpg) no-repeat;
background-position: bottom;
background-size: cover;
padding:0;
height: 550px;
padding-top: 60px;
}

.clearfix::after {
content: “”;
display: table;
clear: both;
}

.logo{
float: left;
}

.page-header ul{
list-style: none;

}

.page-header ul a{
float: right;
padding-right: 56px;
margin-top: 10px;

border-bottom: 1px solid rgba(255,255,255, 0.2);
border-top: 1px solid rgba(255,255,255, 0.2);

padding-top: 23px;
padding-bottom: 23px;

font: 16px Arial;
font-weight: 700;
text-decoration: none;
color: white;

}
.page-header ul:last-child a{
padding-right: 0px;
}
.page-header p{
margin-top: 116px;

text-align: center;

font: 70px Arial;
font-weight: bold;
color: white;

}

.bottles{
margin-top: -30px;
margin-bottom: 111px;
}

.left-bottle {
float: left;
width: 399px;
margin-right: 1px;
}

.right-bottle {
float: left;
width: 399px;
}

.left-bottle h3,
.right-bottle h3 {
margin-left: 34px;
font-size: 40px;
color: black;
font-weight: bold;
text-transform: uppercase;
}

.left-bottle h3 {
position: relative;
}

.left-bottle table,
.right-bottle table {
border-collapse: collapse;
}

.left-bottle td,
.right-bottle td {
border: 1px solid #e5e5e5;
padding: 12px auto 15px 10px;
padding-left: 10px;
text-align: left;
color: black;
font-size: 16px;
font-weight: bold;
height: 40px;
width: 78px;
}

.left-bottle table,
.right-bottle table {
box-sizing: border-box;
width: 150px;
height: 80px;
}

.description-1 {
position: absolute;
left: 450px;
}

.description-1 p{
width: 150px;
color: #404040;
font-size: 14px;
}

.description-2 {
position: absolute;
left: 885px;
}

.description-2 p{
width: 150px;
color: #404040;
font-size: 14px;
}

.left-bottle img,
.right-bottle img{
padding-left: 44px;
}

.bottles .text{
width: 332px;
margin-top: 0;
line-height: 30px;
}

.btn-1{
border: 2px solid #834700;
padding: 14px 20px;
color: #834700;
margin-right: 7px;
}
.btn-2{
background: #834700;
padding: 16px 22px;
color: white;
margin-right: 25px;
}
.d{
margin-top: 64px;
}

.benefits{
position: relative;
background: #ffcb78;
width: 100%;
height: 410px;
display: inline-block;
}
.benefits p{
line-height: 30px;
width: 210px;
}
.benefits p:nth-of-type(3){
line-height: 30px;
width: 210px;
}
.benefits ul{
list-style: none;
margin: 0;
}
.benefits h2{
color: black;
text-transform: uppercase;
}

.benefits-1{
width: 193px;
float: left;

margin-right: 186px;
margin-top: 165px;

}
.icon-1{
position: absolute;
background: url(img/icon-brew.png) no-repeat;
height: 70px;
width: 50px;
top: 80px;
}

.benefits-2{
float: left;
width: 207px;

margin-right: 170px;
margin-top: 165px;

}
.icon-2{
position: absolute;
background: url(img/icon-matreshka.png) no-repeat;
height: 65px;
width: 50px;
top: 80px;

}

.benefits-3{
margin-top: 165px;
width: 210px;
float: right;
}
.icon-3{
position: absolute;
background: url(img/icon-thumbsup.png) no-repeat;

height: 60px;
width: 65px;
top: 80px;

}

.history .tittle{
margin-bottom: 67px;
}
.history dl, dl dd{
margin: 0;
padding: 0;
}

.history .his-item{
margin-bottom: 72px;
}

.history dt {
font: 20px Arial;
font-weight: 700;
line-height: 30px;
color: black;
text-transform: uppercase;
}

.history dt i {
float: right;
font: 16px Arial;
font-weight: normal;
font-style: italic;
line-height: 30px;
color: #444444;
text-transform: none;

}
.history dt i a {
font: 16px Arial;
font-weight: normal;
font-style: italic;
line-height: 30px;
color: #834700;
text-transform: none;
text-decoration: underline;

}

.history img{
float: right;
}

.history p{
width: 490px;
margin: 0;
}

.press dl, dl dd{
margin: 0;
padding: 0;
}

.press{
position: relative;
height: 480px;
background: #ede5d8;
}

.press .title{
padding-top: 30px;
margin-bottom: 72px;
}

.press p{
width: 693px;
margin: 0px;
margin-bottom: 40px;
}

.press-icon{
position: absolute;
left: 94px;
top: 171px;
width: 41px;
height: 31px;
background: url(img/quotes.png);
}

.his-btn{
border: 2px solid #a6a197;
padding: 14px 20px;
color: #a6a197;
margin-right: 7px;
}

.press i{
float: right;
font: 20px Arial;
font-weight: 700;
text-transform: uppercase;
color: black;
}

.assortment .title{
padding-top: 103px;
padding-bottom: 90px;
margin: 0;
}

.assortment-table{
width: 100%;
margin: 0;
padding: 0;

border-collapse: collapse;
margin-bottom: 90px;

}

.assortment-table th{
font: 11px Arial;
color: #999999;
text-align: left;
vertical-align: center;
height: 64px;
text-align: left;
}
.assortment-table tr{
border-bottom: 1px solid #e5e5e5;
}

.assortment-table td{
height: 64px;
font: 16px Arial;
font-weight: 700;
}

.assortment-table .name{
width: 400px;
}

.assortment-table .coast{
text-align: right;
}

.assortment-table .new{
margin-left: 24px;
font: 8px Arial;
font-weight: 700;
line-height: 30px;
background: black;
color: white;
border-radius: 2px;
width: 50px;
height: 13px;
}

.buy{
height: 1185px;
background: #ffcb78;
}

.buy .title{
padding-top: 93px;
}

.buy p{
width: 642px;
}

.buy label{

font: 16px Arial;
font-weight: 700;
line-height: 20px;
color: black;

text-transform: uppercase;

}

.buy input[type=“text”]{
height: 50px;
width: 630px;
background-color: #e5b66c;
border: 0;
}
.form-item-2,
.form-item-3{
display: inline-block;
}
.form-item-2 input[type=“text”]{
width: 290px;
float: left;
}
.form-item-3 input[type=“text”]{
width: 290px;
}

.page-footer{
height: 294px;
background: black;
color: white;
padding:0;
height: 550px;
padding-top: 68px;
}
.logo{
float: left;
}

.page-footer ul{
list-style: none;
}

.page-footer ul a{
float: right;
padding-right: 56px;

border-bottom: 1px solid rgba(255,255,255, 0.2);
border-top: 1px solid rgba(255,255,255, 0.2);

padding-top: 23px;
padding-bottom: 23px;

font: 16px Arial;
font-weight: 700;
text-decoration: none;
color: white;

}
.page-footer ul:last-child a{
padding-right: 0px;
}

.page-footer p{
display: inline-block;
}