Промежуточное испытание: Великий Кексби

kirill10 · 04.Ноябрь.2018 10:56:08

 <!DOCTYPE HTML>
> <html lang="ru">
>   <head>
>     <meta charset="utf-8">
>     <title>Кваст</title>
> 	<link rel="stylesheet" href="style/style.css">
>   </head>
>   <body>
>     <!-- Block №1-->

<div class="page-header">
	<div class="header-top">
		<div class="header-logo">
			<img src="img\logo.png" width="140" height="76" alt="Кваст">
		</div>
		<div class="top-menu">
			<ul>
				<li><a href="#">История</a></li>
				<li><a href="#">Производство</a></li>
				<li><a href="#">Ассортимент</a></li>
				<li><a href="#">Где купить</a></li>
			</ul>
			<p>Крафтовый квас<br />всему голова!
		</div>
	</div>
</div>

		<!-- Block №2a -->

<div class="novelties">
	<div class="novelties_block_A">
		<h2>Новинки</h2>
	<div class="h3-left"><h3>Вахтёр</h3></div>
		<div class="table">
					<table>
						<tr>
							<td>Алк.</td>
							<td>&lt; 1%</td>
						</tr>
						<tr>
							<td>Ккал:</td>
							<td>35</td>
						</tr>
					</table>
		</div>
			<p>Ржаной хлеб, Вода, Солод, Соль</p>
			<img src="img\bottleleft.jpg" alt="Вахтер">
				<p>Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений!</p>
			<div class="btn_lft">
					<a href="#">Подробнее</a>
					<a href="#">Купить</a>
					<b>150 Р.</b>
			</div>
	</div>

		<!-- Block №2b -->

	<div class="h3-right"><h3>Романтик</h3></div>
		<div class="table">
					<table>
						<tr>
							<td>Алк.</td>
							<td>&lt;&nbsp;0,5%</td>
						</tr>
						<tr>
							<td>Ккал:</td>
							<td>27</td>
						</tr>
					</table>
		</div>
			<p>Ячменный хлеб, Вода, Солод, Апельсин</p>
			<img src="img\bottleright.jpg" alt="Романтик">
				<p>Лёгкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
			<div class="btn_rght">
					<a href="#">Подробнее</a>
					<a href="#">Купить</a>
					<b>90 Р.</b>
			</div>
</div>

		<!-- Block №3 -->

		<div class="advantages">
			<ul>
				<li><h2>Варим сами</h2></li>
				<p>Вот этими самыми руками. Экспериментируем и творим, что хотим.</p>
				<li><h2>Своё, родное</h2></li>
				<p>Не заработка ради, а импортозамещения для. Поднимаем производство.</p>
				<li><h2>Не экономим</h2></li>
				<p>Человек это то, что он ест и пьет. У нас только качественные ингредиенты.</p>
			</ul>
		</div>

		<!-- Block №4 -->

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

		<!-- Block №5 -->

<div class="press_our">
	<div><h2>Пресса о нас</h2></div>
		<div>
			<blockquote>Сегодня мы провели дегустацию чего-то действительно новенького — крафтового кваса. Да, да, вы не ослышались! Спасибо Арсену и Руслану за то, что предоставили целую бочку своего напитка!</blockquote>
		<blockquote><em>Газета столичный Стольник</em><a href="#">&nbsp;Читать далее</a></blockquote>

		</div>
</div>

		<!-- Block №6 -->

<div class="table_price">
	<h2>Ассортимент</h2>
		<div class="table">
			<table>
				<tr>
					<th>Название</hd>
					<th>Алк.</th>
					<th>Ккал</th>
					<th>Объём</th>
					<th>Стоимость</th>
				</tr>
				<tr>
					<td>Классика</td>
					<td>&lt; 1,2%</td>
					<td>33</td>
					<td>330 мл</td>
					<td>120 Р.</td>
				</tr>
				<tr>
					<td>Шабаш</td>
					<td>&gt; 1,2%</td>
					<td>45</td>
					<td>330 мл</td>
					<td>250 Р.</td>
				</tr>
				<tr>
					<td>Вахтёр <sup>Новинка</sup></td>
					<td>&lt; 1%</td>
					<td>35</td>
					<td>0,5 л</td>
					<td>150 Р.</td>
				</tr>
				<tr>
					<td>Романтик <sup>Новинка</sup></td>
					<td>&lt; 0,5%</td>
					<td>27</td>
					<td>0,5 л</td>
					<td>90 Р.</td>
				</tr>
			</table>
		</div>
</div>

		<!-- Block №7 -->

<div class="feedback">
	<h2>Заказать</h2>
	<p>Не ждите пока нас отрекламируют, как Вятский квас, и мы поднимем цены! Закажите настоящий крафтовый квас сейчас. При заказе от 10 баррелей — скидка 10%.</p>
		<div class="feedback_form">
			<form>
				<div class="data-form">
					<label for="us-name" class="user-name">Представьтесь:</label>
					<input type="text" name="us-name" id="us-name" value="Как мы можем к вам обращаться?">
				</div>
				<div class="data-form">
					<label for="us-phone" class="user-phone">Номер телефона:</label>
					<input type="text" name="us-phone" id="us-phone">
				</div>
				<div class="data-form">
					<label for="second_us-phone" class="second_user-phone">Доп. номер:</label>
					<input type="text" name="us-phone" id="us-phone">
				</div>
				<div class="data-form">
					<label for="us-email" class="user-email">Email:</label>
					<input type="text" name="us-email" id="us-email">
				</div>
				<div class="data-form">
						<label for="data-form" class="data_select">Объём заказа:</label>
					<select class="data-form">
						<option name="1" id="data-form">От 5 до 10 баррелей в неделю</option>
					</select>
				</div>
				<div class="data-form">
					<label for="txt_ar">Доп. комментарий:</label>
					<textarea class="data-form" name="txt_area_mess" id="txt_ar" rows="10" cols="96"></textarea>
				</div>
				<div class="data-form">
					<input checked type="checkbox" name="check" id="checkbox">
					<label for="checkbox">Я согласен получать квасную рассылку</label>
				</div>
				<div>
					<input type="submit" name="btn_submit" id="btn_submit" value="Отправить заказ">
				</div>
			</form>
		</div>
</div>

<!-- Block №8 -->

<div class="page-footer">
		<div class="header-logo">
			<img src="img\logo.png" width="140" height="76" alt="Кваст">
		</div>
		<div class="footer-menu">
			<ul>
				<li><a href="#">История</a></li>
				<li><a href="#">Производство</a></li>
				<li><a href="#">Ассортимент</a></li>
				<li><a href="#">Где купить</a></li>
			</ul>
		</div>
		<div class="social">
			<a class="social-btn" href="#">Инстаграм</a>
			<a class="social-btn" href="#">Фейсбук</a>
			<a class="social-btn" href="#">Вконтакте</a>
			<p>При перепечатке материалов ссылка на сайт обязательна!</p>
		</div>
		<div class="logo_footer">
			<img src="img\htmlacademy.png"><b> Разработчик: </b><a href="#">HTML Academy</a>
		</div>
</div>

Valery_S · 04.Ноябрь.2018 15:00:06

insert

RitaStar · 16.Январь.2019 16:24:26

Добрый вечер!
Прошу помочь.
Сделала 3 первых блока, решила проверить.
Первый блок пропускает. Два следующих нет. Визуально получилось же весьма годно. Почему не пропускает? Получится ли с моим кодом (см. ниже) пройти далее?

Кваст * { margin: 0; padding: 0; }

body {
  width: 100%;
}

/*.header style*/

.header {
  background-image: url(site/img/header-pic.jpg);
  height: 550px;
}


.img-list {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
}

.main-nav {
  margin-left: 40px;
}

.main-nav,
.header-img {
  display: inline-block;
}

li,
p {
  color: white;
  font-family: Arial, sans-serif;
}

.header p {
  font-size: 54px;
  text-align: center;
  padding-top: 150px;
  font-weight: 600;
}

.main-nav li {
  font-size: 14px;
  text-transform: uppercase;
  list-style-type: none;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

ul {
  border-top: 0.5px solid white;
  border-bottom: 1px solid white;
}

.m-right {
  margin-right: 40px;
}

/*.new style*/

.new {
  width: 60%;
  margin: auto;
}

.topic {
  color: black;
  text-transform: uppercase;
  font-size: 35px;
  padding-top: 60px;
}

.new-price {
  margin-top: 60px;
}

.new-list {
  display: flex;
}

.new-list p {
  color: black;

}
.cons-1{
  background-image: url(site/img/bottle-left.jpg);
  background-repeat: no-repeat;
  background-position: 40% 20%;
  min-height: 450px;
  display:flex;
  align-items: right;
  justify-content: flex-end;  
  flex-wrap:wrap;
     
}

.cons-2 {
  background-image: url(site/img/bottle-right.jpg);
  background-repeat: no-repeat;
  background-position: 60% 20%;
  min-height: 450px;
  display:flex;
  align-items: right;
  justify-content: flex-end;  
  flex-wrap:wrap;
}
.new-item1 {
  border-right: 1px solid rgb(183, 194, 206);
  border-left: 1px solid rgb(183, 194, 206);
}

.new-item2 {
  max-width: 50%;
  border-right: 1px solid rgb(183, 194, 206);
}

.consist td {
  padding: 10px 25px 5px 0px;
}

.consist {
  border-bottom: 1px solid rgb(183, 194, 206);
  padding-bottom:15px;
  text-transform: uppercase;      
}

.more {
  border:2px solid brown;
  padding:10px 15px 10px 15px;
  text-transform: uppercase;
  color: brown;
  background-color: white;
  font-weight: 600;
}

.buy {
  padding:10px 15px 10px 15px;
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  background-color: brown;
  border:2px solid brown;
}

.new-1,
.new-2 {
  padding:0px 50px 0 50px;
}

.cons-p {
  font-weight: 100;
  font-size: 12px;
  padding-top:15px;
}

.new-list h2 {
  text-transform: uppercase;
  font-family: Arial, sans-serif;
}

.new-1 p, 
.new-2 p {
  font-family: Arial, sans-serif;
  font-weight: 100;
  font-size: 14px;
  padding-top: 20px;
  line-height: 2;
}

/*.plus style*/
.plus {
  width:100%;
  background-color: lightgoldenrodyellow;
  margin-top:80px;
  display:flex;
  align-items: center;
  justify-content: space-around;  
  flex-wrap:wrap;    
}

.plus-1,
.plus-2,
.plus-3 {
  padding-left:10%;
}
.plus-1 h3,
.plus-2 h3,
.plus-3 h3 {
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  padding-bottom: 20px;
}
.plus-1 p,
.plus-2 p,
.plus-3 p {
  font-family: Arial, sans-serif;
  font-weight: 100;
  font-size: 14px;
  line-height: 2;
  color: black;
  
}

.plus-border {
  margin-top:80px;
  margin-bottom:50px;
  padding: 0 0 0px 30px;
  border-right: 1px solid rgb(183, 194, 206); 
}

.plus-border3 {
  margin-top:80px;
  margin-bottom:50px;
  padding: 0 0 0px 30px;
}

.plus > div {
  width: 23.33%;
}

История
Производство
Ассортимент
Где купить

Крафтовый квас
всему голова!

Новинки

Алк.	< 1%
Ккал:	35

Ржаной хлеб, Вода,
Солод, Соль

Вахтёр

Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений приключений приключений!

150 Р.

Алк.	< 0,5%
Ккал:	27

Ячменный хлеб, Вода,
Солод, Апельсин

Романтик

Лёгкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.

90 Р.

</div>

<div class="plus-1">
  <div class="plus-border">
    <h3>Варим сами</h3>
    <p>Вот этими самыми руками.<br> Экспериментируем и<br> творим, что хотим.</p>
  </div>
</div>

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

<div class="plus-3">
  <div class="plus-border3">
    <h3>Не экономим</h3>
    <p>Человек это то, что он ест и<br> пьет. У нас только<br> качественные ингредиенты.</p>
  </div>
</div>

Tala · 16.Январь.2019 16:52:29

у вас не вставился HTML-код, но зачем-то появился CSS

RitaStar · 17.Январь.2019 09:12:05

html-код ниже

Кваст

История
Производство
Ассортимент
Где купить