/
dashytka
/
website
Обзор
Документация
Войти
/
dashytka
/
website
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
html
74 строки
3 KB
dashytka
create html
18 окт 2025, 21:18
18 окт 2025, 21:18
f5f1129
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>4 правила вёрстки</title> <link rel="stylesheet" href="https://code.s3.yandex.net/web-code/fonts/fonts.css" /> <link rel="stylesheet" href="styles/style.css" /> </head> <body> <header class="header"> <div class="overlay"> <h1 class="header-title">Четыре правила вёрстки</h1> </div> </header> <section class="content"> <div class="card"> <img class="card-image" src="https://code.s3.yandex.net/web-code/images/freetrack/04/card-1.jpg" alt="Неоновые лампочки в виде символов светятся красным" /> <h3 class="card-title">Пустота</h3> <p class="card-text"> Простое правило, которое часто нарушают: ставить рядом элементы с похожим смыслом и окружать их пустым пространством. Пустота — мощное средство воздействия. </p> </div> <div class="card no-right-margin"> <img class="card-image" src="https://code.s3.yandex.net/web-code/images/freetrack/04/card-2.jpg" alt="Разметка теннисного корта крупным планом" /> <h3 class="card-title">Сетка</h3> <p class="card-text"> Размеры элементов и расстояния между ними укладываются в гармоничную схему — её называют сеткой. Если элемент выпадает, зритель может это заметить. </p> </div> <div class="card"> <img class="card-image" src="https://code.s3.yandex.net/web-code/images/freetrack/04/card-3.jpg" /> <h3 class="card-title">Шрифты</h3> <p class="card-text"> Не больше трёх шрифтов на сайт. Один для заголовков, второй — для всех остальных текстов, третий — для выделения важных слов. Должно хватить. </p> </div> <div class="card no-right-margin"> <img class="card-image" src="https://code.s3.yandex.net/web-code/images/freetrack/04/card-4.jpg" /> <h3 class="card-title">Цвета</h3> <p class="card-text"> Обычно на сайте два цвета: ведущий и акцентный. Подобрать удачную цветовую пару можно за счёт насмотренности или специальных инструментов. </p> </div> </section> <footer class="footer"> <h4 class="footer-author">Я х Практикум</h4> </footer> </body> </html>