Верстаем сайт по макету для большого экрана и учимся держать код в порядке: методология BEM и препроцессор Sass.
Сверстай свой сайт-портфолио по макету для экрана 1920px. Называй классы по BEM, стили пиши на Sass. Как выгрузить картинки из макета — в инструкции.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Сверстай карточку проекта, называя классы по BEM:
cardcard__image, card__title, card__text, card__buttoncard__button--active другой цвет фона<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<style>
.card { width: 260px; padding: 16px; border-radius: 16px; background-color: #f6f4ff; font-family: sans-serif; }
.card__image { width: 100%; border-radius: 12px; }
.card__title { margin: 12px 0 4px; }
.card__text { color: #555; }
.card__button { border: 0; padding: 10px 16px; border-radius: 8px; background-color: #ddd; }
.card__button--active { background-color: #6d4aff; color: white; }
</style>
</head>
<body>
<div class="card">
<img class="card__image" src="img/lesson_6.jpg" alt="Проект">
<h3 class="card__title">Мой первый сайт</h3>
<p class="card__text">Сайт о космосе на HTML и CSS.</p>
<button class="card__button">Подробнее</button>
<button class="card__button card__button--active">Открыть</button>
</div>
</body>
</html>