<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Кваст</title>
</head>
<body>
<div class="header">
<div class="logo">
<image src="img/logo.png">
</div>
<div class="header-top">
<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="header-title">
<p>Крафтовый квас<br> всему голова!</p>
</div>
</div>
<div class="features-new">
<h1>Новинки</h1>
<div class="item1">
<h2>Вахтёр</h2>
Алк. <1%<br>
Ккал: 35<br><br>
Ржаной хлеб, Вода, Солод, Соль<br><br>
<div class="logo">
<image src="img/bottle-left.jpg">
</div>
<p>Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого
дня и придаст сил для вечерних приключений!</p>
<a href="#">Подробнее</a>
<a href="#">Купить</a><strong> 150 Р.</strong>
</div>
<div class="item2">
<h2>Романтик</h2>
Алк. <0,5%<br>
Ккал: 27<br><br>
Ячменный хлеб, Вода, Солод, Апельсин<br><br>
<div class="logo">
<image src="img/bottle-right.jpg">
</div>
<p>Лёгкий и освежающий напиток поможет сохранять
отличное настроение в течение всего дня.</p>
<a href="#">Подробнее</a>
<a href="#">Купить</a><strong> 90 Р.</strong>
</div>
</div>Не закрываете тег <a> в первом блоке.
Спасибо за помощь…
Осталась одна ошибка во втором блоке, все перепробовал. Все остальные блоки сошлись.
<div class="features-new">
<h2>Новинки</h2>
<div class="item1">
<h3>Вахтёр</h3>
Алк. <1%
Ккал: 35<br><br>
Ржаной хлеб, Вода, Солод, Соль<br><br>
<div class="logo">
<image src="img/bottle-left.jpg"></div>
<p>Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого
дня и придаст сил для вечерних приключений!</p>
<a href="#">Подробнее</a>
<a href="#">Купить</a><strong> 150 Р.</strong>
</div>
<div class="item2">
<h3>Романтик</h3>
Алк. <0,5%<br>
Ккал: 27<br><br>
Ячменный хлеб, Вода, Солод, Апельсин<br><br>
<div class="logo">
<image src="img/bottle-right.jpg">
</div>
<p>Лёгкий и освежающий напиток поможет сохранять
отличное настроение в течение всего дня.</p>
<a href="#">Подробнее</a>
<a href="#">Купить</a><strong> 90 Р.</strong>
</div>
</div>Это должна быть таблица.
А это - параграф. Не увлекайтесь <br>, это плохая практика.
1 лайк
Спасибо большое за помощь!!
Ineska, скажите, а почему данные поля должны быть именно в виде таблицы? Как это определять по макету или образцу? У меня была такая же ошибка, как у Serg163, но для меня не было это очевидно (потому что эти поля я бы при реальной вёрстке просто позиционировал в CSS в итеме кваса)
Разработчики подсказали, что это должна быть таблица. Иначе отступы не такие получаются.
Определить это можно разве что по содержимому - перечень компонентов с указанием количества.
Понятно, спасибо! А какого количества перечень достаточен для того, чтобы применять туда таблицу?
Я, кстати, думал, что вёрстка таких итемов как здесь как раз не должна быть табличной. Много ненужных сложностей и танцев с бубном с селекторами, чтобы все отступы правильно сделать для всех ячеек, и много всяких rowspan и colspan, на дивах это проще написать.
1 лайк
Бывает таблица, состоящая из одной строки (но это редкость).
Что касается использования таблиц в верстке (в частности в промежуточном испытании), то я думаю, что был сделан акцент на семантике кода.
В других частях задания кроме таблиц вы будете использовать blockquote, dl, например. Хотя на первый взгляд там тоже могли обойтись просто div-ами.
1 лайк
может быть, вы знаете, почему у таблицы автоматически нет рамок? Вроде бы, стили не подключены…
Покажите код.
<table class="latest-item-ingrid">
<tr>
<td> Алк. </td>
<td> < 1% </td>
</tr>
<tr>
<td> Ккал: </td>
<td> 35 </td>
</tr>
</table>
Аналогично для второго товара.