Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Четыре правила вёрстки</title>
- <link rel="stylesheet" href="style.css">
- <link rel="icon" type="image" href="https://code.s3.yandex.net/web-code/rules-favicon.ico">
- </head>
- <body>
- <!--<header>
- <div class="overlay">
- <h1>Четыре правила вёрстки</h1>
- </div>
- </header>-->
- <section class="content">
- <footer class="footer"> </footer>
- <div class="card">
- <img class="card-image"
- src="https://pictures.s3.yandex.net/frontend-developer/free-course/card-1.jpg">
- <h3 class="card-title"> Пустота</h3>
- <p class="card-text">Простое правило, которое часто нарушают: ставьте рядом элементы с похожим смыслом и окружайте их пустым пространством. Пустота — мощное средство воздействия.</p>
- </div>
- <div class="card no-right-margin">
- <img class="card-image"
- src="https://pictures.s3.yandex.net/frontend-developer/free-course/card-2.jpg">
- <h3 class="card-title">Сетка</h3>
- <p class="card-text">Размеры элементов и расстояния между ними укладываются в гармоничную схему — её называют сеткой. Если элемент выпадает из сетки, что-то не так.</p>
- </div>
- <div class="card">
- <img class="card-image" src="https://pictures.s3.yandex.net/frontend-developer/free-course/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://pictures.s3.yandex.net/frontend-developer/free-course/card-4.jpg">
- <h3 class="card-title">Цвета</h3>
- <p class="card-text">Обычно на сайте два цвета: ведущий и акцентный. Подобрать удачную цветовую пару можно специальными инструментами.</p>
- </div>
- </section>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement