Кексби промежуточное испытание 2/8

Курсы Промежуточные испытания
1

Почему-то съезжает, хотя я копировал контент из .txt

screen3
screen3.jpg1366×768 41.4 KB

Вот код
http://jsbin.com/revopur/2

2

Алк. и %, Ккал и 35 - разные ячейки таблицы с выравниванием текста по левому краю.

Вообще, никогда не пытайтесь изменять/задавать расстояние между тестовыми элементами с помощью пробелов.

3

Почему-то не работает:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Кваст</title>
	<style type="text/css">
		table {
			text-align: left;
		}
	</style>
</head>
<body>
	<div class="page-header">
		<nav class="menu-header">
			<img src="img/logo.png" alt="Логотип Кваста" class="logo">
			<ul>
				<li>
					<a href="#">История</a>
				</li>
				<li>
					<a href="#">Производство</a>
				</li>
				<li>
					<a href="#">Ассортимент</a>
				</li>
				<li>
					<a href="#">Где купить</a>
				</li>
			</ul>
		</nav>
		<p>Крафтовый квас <br>всему голова!</p>
	</div>
	<div class="new-and-price">
		<h2>Новинки</h2>
		<div class="new-items">
			<div class="catalog-item">
				<h3>Вахтёр</h3>
				<table>
					<tr>
						<td>Алк. &lt;</td>
						<td> 1%</td>
					</tr>
					<tr>
						<td>Ккал:</td>
						<td> 35</td>
					</tr>
				</table>
				<p>Ржаной хлеб, Вода, Солод, Соль</p>
				<img src="img/bottle-left.jpg" alt="Вахтёр">
				<p>Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений!</p>
				<a href="#" class="btn">Подробнее</a>
				<a href="#" class="btn">Купить</a>
				<b>150 Р.</b>
			</div>
			<div class="catalog-item">
				<h3>Романтик</h3>
				<table>
					<tr>
						<td>Алк. &lt; 0,5%</td>
					</tr>
					<tr>
						<td>Ккал: 27</td>
					</tr>
				</table>
				<p>Ячменный хлеб, Вода, Солод, Апельсин</p>
				<img src="img/bottle-right.jpg" alt="Романтик">
				<p>Лёгкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
				<a href="#" class="btn">Подробнее</a>
				<a href="#" class="btn">Купить</a>
				<b>90 Р.</b>
			</div>
		</div>
	</div>
	<div class="features">
		<ul>
			<li class="feature-item">
				<h2>Варим сами</h2>
				<p>Вот этими самыми руками. Экспериментируем и творим, что хотим.</p>
			</li>
			<li class="feature-item">
				<h2>Своё, родное</h2>
				<p>Не заработка ради, а импортозамещения для. Поднимаем производство.</p>
			</li>
			<li class="feature-item">
				<h2>Не экономим</h2>
				<p>Человек это то, что он ест и пьет. У нас только качественные ингредиенты.</p>
			</li>
		</ul>
	</div>
	<div class="history-reference">
		<h2>Немного истории</h2>
		<dl>
			<dt>
				<h3>Происхождение кваса</h3>
				<i>Источник: </i><a href="#" target="_blank">ru.wikipedia.org</a>
			</dt>
			<dd>
				<img src="img/wiki-1.png" alt="Квас с хлебом и кухонными принадлежностями" width="200" height="101">
				<p>Квас на Руси появился в X-XI веке. Само слово «квас» тоже имеет древнерусское происхождение. Помимо России квас готовят в Белоруссии, Сербии, Македонии, Словакии и многих других странах, но называется он везде одинаково — квас.</p>
			</dd>
			<dt>
				<h3>Классификация кваса</h3>
				<i>Источник: </i><a href="#" target="_blank">ru.wikipedia.org</a>
			</dt>
			<dd>
				<img src="img/wiki-2.png" alt="Квас на столе с хлебом" width="200" height="101">
				<p>По российскому ГОСТу для промышленного изготовления — это напиток с объёмной долей этилового спирта не более 1,2%, изготовленный в результате незавершённого спиртового и молочнокислого брожения сусла.</p>
			</dd>
		</dl>
	</div>
	<!-- всего 8 divов (включая footer и header) внутри которых контент -->
	<div class="page-footer">
	</div>
</body>
</html>

screen5
screen5.jpg1366×768 41.5 KB

4

Разделение в первой строке не правильное - знак < не отрывают от числа, и пробел перед числом 35 не нужен.

<table>
    <tr>
        <td>Алк.</td>
        <td>&lt; 1%</td>
    </tr>
    <tr>
        <td>Ккал:</td>
        <td>35</td>
    </tr>
</table>
5

Спасибо, помогло :slight_smile:

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

		<div class="bottle-twoo">
			<h3>Романтик</h3>
			<table>
				<tr>
					<td>Алк.</td>
					<td>&lt; 0,5%</td>
				</tr>
				<tr>
					<td>Ккал:</td>
					<td>27</td>
				</tr>
			</table>
			<p>Ячменный хлеб, Вода, Солод, Апельсин</p>
			<img src="img/bottle-right.jpg" alt="Романтик"><br>
			<p>Легкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
		</div>
		<a class="btn-white" href="*">Подробнее</a>
		<a class="btn-grey" href="*">Купить</a>
		<b>90 Р.</b>
	</div>`Текст "как есть" (без применения форматирования)`