Remarks

[PblCbGomel]

<h1> и так является блочным тегом, не обязательно оборачивать его в <div>

front/index.html

Lines 16 to 18 in 55bf15d

	<div class="name">
	<h1>bread</h1>
	</div>

Семантически неправильно: <img> оборачивается в тег <figure>

front/index.html

Lines 12 to 14 in 55bf15d

	<div class="pic">
	<img src="berad.jpg" alt="bread" width="300" height="220">
	</div>

Скорее, стоило сделать 1 тег с описанием, просто задать ему такие свойства, чтобы текст переносился при надобности.

front/index.html

Lines 20 to 24 in 55bf15d

	<div class="description">
	<p> Bread? Bread! Bread, bread, breaddity bread, bread; bread, bread, bread, bread.</p>
	<p> Bread bread bread: bread, bread bread bread; bread bread bread...</p>
	<p> Bread bread — bread! Bead bread? Bread!!!</p>
	</div>

Тег strong семантический тег, который используется для выделения важного текста. А для жирного текста нужно задать свойство font-weight: bold;

front/index.html

Lines 26 to 28 in 55bf15d

	<div class="price">
	<strong>Цена: 17¥</strong>
	</div>

Из-за того, что ты выставила высоту "явно", у тебя текст прижат немного вниз. Попробуй убрать height: 40px и посмотри, как будет вести себя кнопка) Свойство line-height: 40px; задает само по себе высоту кнопки.

front/22.07.css

Lines 69 to 82 in 55bf15d

	.button1{
	position: absolute;
	width: 130px;
	height: 40px;
	background-color: #222D93;
	border-radius: 20px;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	cursor: pointer;
	line-height: 40px;
	font-size: 26px;
	color: #ffffff;
	}

С этого момента и далее: position: absolute --- НЕ панацея! Неправильно таким образом задавать позиции всех элементов. Поменяешь ширину или высоту карточки --- полетит вся верстка :) Блоки идут одни за одним, если нужно вместить 2 и более блока в ряд, то можно воспользоваться display: inline-block (а в ближайшем будущем вообще флекс-верстку юзать). Ну и margin на глаз считать --- не завидую)))

front/22.07.css

Line 26 in 55bf15d

position: absolute;

Также не всегда явно нужно указывать строгие размеры (или размеры в общем). У тегов их размер изначально зависит от контента, и если задать его явно, то контент может "вылазить" за него. Тут (и в других местах) пока ничего страшного, это на будущее.

front/22.07.css

Lines 27 to 28 in 55bf15d

	width: 300px;
	height: 220px;

Аналогично поинту выше: line-height уже задает высоту, height будто лишний тут. Вот если бы у <h1> был бы фон на условные 150px, а высота текста должна быть 72px, то тут да, стоит указать height явно.

front/22.07.css

Lines 32 to 37 in 55bf15d

	.name{
	line-height: 72px;
	text-align: center;
	position: absolute;
	width: 294px;
	height: 72px;

Все отсутпы у внутренних элементов сделаны с помощью margin. Это не совсем верно. Лучше в этом классе (который прикреплен к внешнему блоку) указывать padding, что будет означать, что внутренний контент сдвинут на какое-то кол-во пикселей внутри контейнера. Ну и если ты изменишь размеры, то margin могут поплыть (а могут и нет).

front/22.07.css

Lines 10 to 23 in 55bf15d

	.block{
	margin:auto;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 600px;
	background: #D9D9D9;
	border: 2px solid black;
	box-shadow: 0px 4px 4px #00000040;
	border-radius: 10px;
	}

Этот и многие другие шрифты не лежат на ПК пользователей изначально. Стоит его подключать через тег link, условно найдя этот шрифт в гугле.

front/22.07.css

Line 3 in 55bf15d

font-family: 'Jost';