Используя утилиты из документации Bootstrap обновите внешний вид компонента Card. Базовая вёрстка этого компонента:
<!-- Шапка -->
<h2>Фронтенд-разработчик</h2>
<p>Разработка фронтенд-компонентов для веб-приложений</p>
<!-- Футер -->
Вы можете свободно менять вёрстку, вложенности тегов. Задача — с помощью утилит добиться совпадения с макетом. Макет доступен в Figma. Внимательно изучите размеры элементов, отступы и воспроизвидите вёрстку.
Полезные утилиты
Flex
Typography
Spacing
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>Компонент Карточка</title> | |
| </head> | |
| <body class="p-5"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-4"> | |
| <div class="bg-body-tertiary border-opacity-10 border-secondary card p-xl-1 rounded-4 shadow-sm"> | |
| <div class="card-body"> | |
| <!-- BEGIN (write your solution here) --> | |
| <!-- END --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |