как расположить "блоки" как на данной картинке?
Пока мой выглядит вот так:
* {
margin: 0;
padding: 0;
}
body {
display: flex;
}
.menu {
background-color: #008B8B;
flex-direction: column;
}
.zagolovok {
background-color: #8B0000;
}
.text-1 {
background-color: #00008B;
}
.text-2 {
background-color: #006400;
}
.menu, .text-1, .text-2, .zagolovok {
text-align: center;
color: white;
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="menu">
<h1>Меню</h1>
</div>
<div class="zagolovok">
<h1>Заголовок</h1>
</div>
<div class="text-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni quaerat ad cum voluptas fugiat, repellendus doloribus ipsam modi eos unde praesentium accusamus beatae! Nobis tempore quidem magni ut accusamus molestiae.
</p>
</div>
<div class="text-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni quaerat ad cum voluptas fugiat, repellendus doloribus ipsam modi eos unde praesentium accusamus beatae! Nobis tempore quidem magni ut accusamus molestiae.
</p>
</div>
</body>
</html>
Источник: Stack Overflow на русском