Кексби. Промежуточное испытание. Застрял на 2-м блоке

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

Проверил разметку, 7 из 8 блоков прошло проверку, второй никак не могу допилить. Кто уже сделал, можете взглянуть на мой код и подсказать где я делаю ошибку?
Не могу понять через <p> делать перенос или <br>. По-разному перепробовал, никак не сходится у меня.

	<div class="products">
		<!--НОВИНКИ -->
		<h2>Новинки</h2>

		<div class="product-item">
			<h3>Вахтёр</h3>
			<div class="sctructure">
				<p>Алк. &lt; 1%<br>
				Ккал: 35</p>
				<p>Ржаной хлеб, Вода, Солод, Соль</p>
			<img src="img/bottle-left.jpg" alt="">
			</div>
			
			<div class="decription">
				<p>Терпкий и мощный вкус этого кваса взбодрит после тяжелого дня и придаст сил для вечерних приключений!</p>
				<a href="#" class="btn">Подробнее</a>
				<a href="#" class="btn">Купить</a>
				<strong>150 Р.</strong>
			</div>
		</div>

		<div class="product-item">
			<h3>Романтик</h3>
			<div class="sctructure">
				Алк. &lt; 0,5%<br>
				Ккал: 27<br>
				<br>
				Ячменный хлеб, Вода, Солод, Апельсин
			</div>
			<br>
			<img src="img/bottle-left.jpg" alt="">
			<div class="decription">
				<p>Легкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
				<a href="#" class="btn">Подробнее</a>
				<a href="#" class="btn">Купить</a>
				<strong>90 Р.</strong>
			</div>
		</div>
	</div>
1 лайк
2

Приветствую!

Попробуйте блок, где Алк и Ккал сделать таблицей (да, это таблица из четырёх ячеек).

5 лайков
3

Получилось, спасибо большое! :smiley:

4

А подскажите еще в чем здесь проблема (это последняя неточность :))
показывает лишний пробел, но в коде пробела нету:

1.jpg1113×623 55.3 KB

5

все, решил проблему как только убрал value 2 & 3, а оставил только первую строку option

6

Привет, а не можешь показать, как ты решил блок с цитатами? Немного истории.

7

history.jpg1139×593 109 KB

8

скиньте пожалуйста правильный скрин 2 блока промежуточного испытания кексби.

9 
<!--НОВИНКИ -->
		<h2>Новинки</h2>

		<div class="product-item">
			<h3>Вахтёр</h3>
			<div class="sctructure">
			<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="">
			</div>
			<div class="decription">
				<p>Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений!</p>
				<a href="#" class="btn">Подробнее</a>
				<a href="#" class="btn">Купить</a>
				<strong>150 Р.</strong>
			</div>
		</div>

		<div class="product-item">
			<h3>Романтик</h3>
		<div class="sctructure">
			<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="">
		</div>
			<div class="decription">
				<p>Легкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
				<a href="#" class="btn">Подробнее</a>
				<a href="#" class="btn">Купить</a>
				<strong>90 Р.</strong>
			</div>
		</div>
	</div>

	<div class="advantages">
1 лайк
10

Здравствуйте!
Зачем, на данном этапе классифицировать ДИВы?

11

Как зачем? В этом и есть цель составления разметки сайта - выделить и разграничить смысловые блоки, озаглавить их. Где можно, пользуетесь семантическими элементами (говорят сами за себя - header, footer например), а сам по себе div не означает ничего. Для того и нужны классы - дать значение (смысл).
Далее с помощью CSS вы будете стилизовать эти блоки, обращаясь к ним по классу.

12

В общем понятно.
А в частности, ни HTML5, ни CSS мы ещё не изучали

13

Вы не изучали. А есть те, кто приступает к выполнению задания Кексби уже после изучения CSS и тегов HTML5. Если вам сложно осваивать курсы параллельно с Кексби, то их можно временно оставить. Чтобы вернувшись чуть позже, лучше понимать, что и для чего делается.

14

Да нет, не сложно! Просто коды получаются много длиннее.
Запаковывать в таблицу параметры, тоже семантический подход?

15

А почему нет? Текст в ячейках гораздо проще выравнивать, если параметров больше чем два и названия этих параметров не одинаковой длины.<br> нехорошо использовать часто, если можно обойтись - лучше обойтись без него.

16

Благодарю Вас!
Такие нюансы, и хотелось бы знать.

1 лайк
17

И от меня также огромное спасибо за решение данного вопроса!

18

Спасибо и не подумал что как вариант можно в таблицу заключить…

19

Огромное спасибо за решение, долго не могла понять в чём проблема.

1 лайк
20

ужас ужасный, вот как надо было заморачиваться, чтоб это сделать ИМЕННО таблицей?! Спасибо, милчеловек

2 лайка