Редактор кода W3Schools - Tryit

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Заголовок */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

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

/* Стиль ссылок верхней навигации */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

/* Создайте два неравных столбца, которые плавают рядом друг с другом */
/* Левый столбец */
.leftcolumn {
  float: left;
  width: 75%;
}

/* Правый столбец */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* Фейк-картинка */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Добавить эффект карты для статей */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Очистить float после столбцов */
.row:after {
  content: "";
  display: table;
  clear: both;
}

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

/* Адаптивный макет - при ширине экрана менее 800 пикселей расположите два столбца друг над другом, а не рядом друг с другом */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

/* Адаптивный макет - при ширине экрана менее 400 пикселей сделайте так, чтобы навигационные ссылки располагались друг над другом, а не рядом друг с другом */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Мой веб-сайт</h1>
  <p>Измените размер окна браузера, чтобы увидеть эффект.</p>
</div>

<div class="topnav">
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#" style="float:right">Ссылка</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>ЗАГОЛОВОК</h2>
      <h5>Описание заголовока, Dec 7, 2017</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 class="card">
      <h2>ЗАГОЛОВОК</h2>
      <h5>Описание заголовка, Sep 2, 2017</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="rightcolumn">
    <div class="card">
      <h2>Про меня</h2>
      <div class="fakeimg" style="height:100px;">Изображение</div>
      <p>Какой-то текст about me in culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Популярные посты</h3>
      <div class="fakeimg"><p>Изображение</p></div>
      <div class="fakeimg"><p>Изображение</p></div>
      <div class="fakeimg"><p>Изображение</p></div>
    </div>
    <div class="card">
      <h3>Подпишись на меня</h3>
      <p>Какой-то текст..</p>
    </div>
  </div>
</div>

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

</body>
</html>

​x
 
<!DOCTYPE html><html><head><style>* {  box-sizing: border-box;}​body {  font-family: Arial;  padding: 10px;  background: #f1f1f1;}​/* Header/Blog Заголовок */.header {  padding: 30px;  text-align: center;  background: white;}​.header h1 {  font-size: 50px;}​/* Стиль верхнего навбара */.topnav {  overflow: hidden;  background-color: #333;}​/* Стиль ссылок верхней навигации */.topnav a {  float: left;  display: block;  color: #f2f2f2;  text-align: center;  padding: 14px 16px;  text-decoration: none;}​/* Изменение цвета при наведении */.topnav a:hover {  background-color: #ddd;  color: black;}​/* Создайте два неравных столбца, которые плавают рядом друг с другом *//* Левый столбец */.leftcolumn {  float: left;  width: 75%;}​/* Правый столбец */.rightcolumn {  float: left;  width: 25%;  background-color: #f1f1f1;  padding-left: 20px;}​/* Фейк-картинка */.fakeimg {  background-color: #aaa;  width: 100%;  padding: 20px;}​/* Добавить эффект карты для статей */.card {  background-color: white;  padding: 20px;  margin-top: 20px;}​/* Очистить float после столбцов */.row:after {  content: "";  display: table;  clear: both;}​/* Footer */.footer {  padding: 20px;  text-align: center;  background: #ddd;  margin-top: 20px;}​/* Адаптивный макет - при ширине экрана менее 800 пикселей расположите два столбца друг над другом, а не рядом друг с другом */@media screen and (max-width: 800px) {  .leftcolumn, .rightcolumn {    width: 100%;    padding: 0;  }}​/* Адаптивный макет - при ширине экрана менее 400 пикселей сделайте так, чтобы навигационные ссылки располагались друг над другом, а не рядом друг с другом */@media screen and (max-width: 400px) {  .topnav a {    float: none;    width: 100%;  }}</style></head><body>​<div class="header">  <h1>Мой веб-сайт</h1>  <p>Измените размер окна браузера, чтобы увидеть эффект.</p></div>​<div class="topnav">  <a href="#">Ссылка</a>  <a href="#">Ссылка</a>  <a href="#">Ссылка</a>  <a href="#" style="float:right">Ссылка</a></div>​<div class="row">  <div class="leftcolumn">    <div class="card">      <h2>ЗАГОЛОВОК</h2>      <h5>Описание заголовока, Dec 7, 2017</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 class="card">      <h2>ЗАГОЛОВОК</h2>      <h5>Описание заголовка, Sep 2, 2017</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="rightcolumn">    <div class="card">      <h2>Про меня</h2>      <div class="fakeimg" style="height:100px;">Изображение</div>      <p>Какой-то текст about me in culpa qui officia deserunt mollit anim..</p>    </div>    <div class="card">      <h3>Популярные посты</h3>      <div class="fakeimg"><p>Изображение</p></div>      <div class="fakeimg"><p>Изображение</p></div>      <div class="fakeimg"><p>Изображение</p></div>    </div>    <div class="card">      <h3>Подпишись на меня</h3>      <p>Какой-то текст..</p>    </div>  </div></div>​<div class="footer">  <h2>Footer</h2></div>​</body></html>                