W3Schools 代码 - Tryit

<!DOCTYPE html>
<html>
<head><meta http-equiv="content-security-policy" content="script-src 'none'">
<title>Название страницы</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Стиль body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Стиль верхнего навбара */
.navbar {
  display: flex;
  background-color: #333;
}

/* Стиль ссылок на панели навигации */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Изменить цвет при наведении */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Контейнер столбца */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Создайте два неравных столбца, которые расположены рядом друг с другом. */
/* Сайдбар/Левый столбец */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Главный столбец */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Поддельное изображение, только для этого примера */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Адаптивный макет - при ширине экрана менее 700 пикселей расположите два столбца друг над другом, а не рядом друг с другом */
@media screen and (max-width: 700px) {
  .row, .navbar {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">Измените размер окна браузера, чтобы увидеть эффект адаптивности.</h4>
</div>

<div class="header">
  <h1>Мой веб-сайт</h1>
  <p>С <b>гибким</b> макетом.</p>
</div>

<div class="navbar">
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
</div>

<div class="row">
  <div class="side">
    <h2>Обо мне</h2>
    <h5>Мое фото:</h5>
    <div class="fakeimg" style="height:200px;">Изображение</div>
    <p>Какой-то текст in culpa qui officia deserunt mollit anim..</p>
    <h3>Ещё текст</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Изображение</div><br>
    <div class="fakeimg" style="height:60px;">Изображение</div><br>
    <div class="fakeimg" style="height:60px;">Изображение</div>
  </div>
  <div class="main">
    <h2>ЗАГОЛОВОК</h2>
    <h5>Описание, Dec 7, 2021</h5>
    <div class="fakeimg" style="height:200px;">Изображение</div>
    <p>Какой-то текст..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>ЗАГОЛОВОК</h2>
    <h5>Описание, Sep 2, 2021</h5>
    <div class="fakeimg" style="height:200px;">Изображение</div>
    <p>Какой-то текст..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>