Как сверстать карточку пользователя
Эта статья основана на одном из практических заданий verstaem.online.
Вы можете читать материал как обычное руководство или сначала попробовать выполнить задание самостоятельно, а затем сравнить свое решение с подробным разбором.
Перейти к заданиюВ этой статье мы создадим карточку пользователя, используя Flexbox. На ее примере разберем, как расположить элементы.
Создаем HTML-разметку
Сначала создадим базовую HTML-разметку с помощью Emmet. Для этого достаточно ввести ! и нажать Tab. Обратите внимание на атрибут lang. Поскольку основной контент страницы написан на русском языке, здесь используем значение ru.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Карточка пользователя</title>
</head>
<body>
</body>
</html>Переходим к карточке. Сразу возникает вопрос, а каким же тегом сверстать саму карточку? Я предлагаю тег <article>. Этим тегом делают законченный и независимый контент, такой как карточки товара, виджеты погоды и т. д. И в данном случае нам он тоже подойдет. А вот внутри все просто — одно изображение и парочка дивов. Почему дивов? Потому что специальных тегов ни для имени, ни для позиции пользователя нет. И здесь небольшой нюанс — это конечно обертки. Весь текст вместе с кнопкой дополнительно обернут в <div>, что дает нам возможность отдельно представить текст от картинки.
<article class="user-card">
<img src="img/avatar.png" alt="Антон Смирнов" class="user-card__avatar">
<div class="user-card__text">
<div class="user-card__name">Антон Смирнов</div>
<div class="user-card__position">UX/UI дизайнер</div>
<a href="#" target="_blank" class="user-card__link">Написать</a>
</div>
</article>Здесь важный момент — это атрибут alt. Практически всегда в работах верстальщиках его либо не пишут вообще, либо пишут, но не заполняют. И это большая ошибка. alt нужен как для поисковых роботов, так и для скринридеров — программ, которые читают сайт. Незрячий пользователь не видит сайт, но может услышать это описание, поэтому оно важно. Не забывайте его указывать.
Добавляем стили
Подключим файл стилей через <link> и зададим несколько базовых правил. Для этого задания достаточно переопределить box-sizing, сбросить отступ у <body> и подключить шрифт Inter, который используется в макете.
* {
box-sizing: border-box;
}
@font-face {
font-family: "Inter";
src: url("../fonts/InterRegular.woff2");
font-display: swap;
font-weight: 400;
}
body {
margin: 0;
padding: 20px;
font-family: "Inter", sans-serif;
}Теперь пишем стили непосредственно для карточки. Карточка состоит из изображения и текстового блока, поэтому именно здесь используем Flexbox. Также задаем внутренние отступы, скругление, рамку и цвет фона из макета. Обратите внимание, здесь нам лучше использовать display: inline-flex, а не flex, потому что нам не нужна карточка на всю ширину. Она будет иметь ширину контента.
.user-card {
display: inline-flex;
align-items: center;
gap: 16px;
border: 1px solid #2a2f37;
border-radius: 20px;
padding: 16px 24px 16px 16px;
background: #1a1d22;
}Далее — стили для изображения. Здесь нам стоит задать размеры, скругления (даже если исходное изображение уже скруглено, а также object-fit: cover. Такой набор стилей позволит сделать универсальное изображение, и если мы вставим туда любое другое — оно будет отображаться адекватно.
.user-card__avatar {
display: block;
border-radius: 100%;
width: 72px;
height: 72px;
object-fit: cover;
}Остались текстовые стили, здесь все очень просто останавливаться не будем. А вот ссылка — важнее. Здесь также стоит использовать flexbox, чтобы представить текст по центру. Также, стоит сбросить text-decoration, а также добавить transition для плавности, чтобы сделать hover. Это необязательно, но лучше сделать.
.user-card__link {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 12px;
border-radius: 10px;
padding: 8px 12px;
font-weight: 400;
font-size: 14px;
color: #f3f4f6;
text-decoration: none;
background: #00447c;
transition: background 0.3s;
}
.user-card__link:hover {
background: #035496;
}Теперь вы умеете создавать простую карточку пользователя с помощью Flexbox, выбирать подходящие HTML-теги и оформлять элементы по макету. Попробуйте изменить размеры карточки, добавить новую информацию или сверстать собственный вариант без подсказок.