Флексбокс, часть 2 / Карточка курса [24/28]
×

Карточка курса [24/28]

Теперь давайте соберём на флексбоксе интерфейс с карточками курсов.

Флексбокс нужен, чтобы сделать этот блок адаптивным. Вы увидите, как гибко он адаптируется в следующих заданиях.

Начнём работу с отдельной карточки. Сделаем карточку флекс-контейнером и направим её главную ось сверху вниз. Это необходимо, чтобы в дальшнейшем гибко управлять внутренними блоками карточки.

Напомним, что флекс-элементы могут одновременно быть и флекс-контейнерами. Мы превратим блок с мета-информацией в флекс-контейнер, чтобы расположить блоки с тегами и временем чтения.

В этой серии заданий мы будем добавлять временные обводки для элементов, чтобы вы лучше видели, что и как перестраивается в процессе работы. В конце задания можете удалять эти обводки, чтобы видеть промежуточный результат.

Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Карточка курса</title> <base href="/assets/course113/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="subtle"> <section class="cards"> <article class="card"> <h1 class="card-heading">2D-трансформации</h1> <div class="card-meta"> <div class="card-category"> <span class="card-icon icon-tag">Категория: </span> <span>HTML, CSS</span> </div> <div class="card-duration"> <span class="card-icon icon-time">Время прохождения: </span> <span>2 часа</span> </div> </div> <div class="card-content"> <figure class="card-figure"> <img src="img/course-2.png" alt="Кекс" class="card-img"> <figcaption> <p>Будем крутить, наклонять, перемещать, уменьшать и увеличивать объекты, а также взрывать их фаерболами, телепортироваться и использовать телекинез.</p> </figcaption> </figure> <button class="card-button">Пройти курс</button> </div> </article> </section> </body> </html>
.card { max-width: 70%; padding: 20px; box-sizing: border-box; } .card-img { width: 100%; } /* Декоративные обводки */ .card { outline: 2px solid rgba(255, 0, 0, 0.3); outline-offset: -2px; } .card > * { outline: 2px solid rgba(0, 128, 0, 0.3); outline-offset: 1px; } .card-meta > * { outline: 2px solid rgba(0, 0, 0, 0.5); outline-offset: -3px; }
HTML Academy
  1. Для .card задайте раскладку флексбокса,
  2. направление главной оси сверху вниз.
  3. Затем раскладку флексбокса задайте .card-meta,
  4. а для .card-category задайте коэффициент растягивания 1.
Теория Проверить Следующее задание
Идёт запись на курс Базовый JavaScript #10, который стартует 8 августа.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.