Как сверстать такую шапку?

Question

Николай Котов @DKFIRE

16 лет, учусь :)

Как сверстать такую шапку?

Как сверстать такой блок?
Я новенький в верстке, ответ на свой вопрос так и не нашел, прошу помощи!

Вопрос задан более двух лет назад
249 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

Антон Литвиненко @AntonLitvinenko

А пробы твои где? что именно не выходит?

Написано более двух лет назад

Николай Котов @DKFIRE Автор вопроса

Антон Литвиненко, не могу понять, как расположить фотографию справа, а весь текст слева. На флотах? Враппер сделал

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Study</title>
	<link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="header">
		<div class="wrapper">
			<h1 class="header-title">Product name</h1>
			<div class="header-description">
				<p class="header-first">Put on this page information about your product</p>
			    <p class="header-second">A detailed description of your product</p>
			    <p class="header-third">A detailed description of your product</p>
			    <p class="header-fourth">Associate the page with the payment system</p>
			</div>
			<img class="header-img" src="http://placehold.it/470x215" alt="">
		</div>
	</div>
	<div class="description">
		<div class="wrapper">
			<h2>About your product</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis facilis fuga, illo at. Natus eos, eligendi illum rerum omnis porro ex, magni, explicabo veniam incidunt in quam sapiente ut ipsum.</p>
			<p>Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.</p>
			<img src="http://placehold.it/430x245" alt="">
		</div>
	</div>
	<div class="content">
		<div class="wrapper">
			<h2>Dignity and pluses product</h2>
			<p>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</p>
			<p>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</p>
			<p>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</p>
			<p>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</p>
			<p>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</p>
			<p>Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</p>
		</div>
	</div>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  font-family: 'Roboto', sans-serif;
}

/* HEADER */

.wrapper {
  max-width: 1180px;
  margin: 0 auto;
}

.header {
  background-color: #445162;
  height: 323px;
}

.header-title {
  font-size: 60px;
}

.header-description {
  font-size: 20px;
}

.header-img {
  display: block;
}

Написано более двух лет назад

Ankhena @Ankhena Куратор тега Вёрстка

Николай Котов, флексы или гриды.

Строки с галочками, по всей видимости, список, а не p

Написано более двух лет назад

Пригласить эксперта

Ответы на вопрос 2

4 комментария

Николай Котов @DKFIRE Автор вопроса

Есть догадка поделить весь текст и фото на два блока, потом кинуть их в противоположенные части враппера, в правильном направлении думаю?

Написано более двух лет назад

Denis Melnikov @Mi11er

Николай Котов, ну типа да

<div style="display: flex">
<div style="display:flex;justify-content: flex-start"> Тут фотки </div>
<div style="display:flex;justify-content: flex-end"> Тут текст </div>

Написано более двух лет назад

Николай Котов @DKFIRE Автор вопроса

Denis Melnikov, понял, спасибо огромное!

Написано более двух лет назад
Denis Melnikov @Mi11er

Николай Котов, ну вы попробуйте сначала =) Потом уже отметите решение.

Написано более двух лет назад