Как сверстать панель пользователя
Эта статья основана на одном из практических заданий verstaem.online.
Вы можете читать материал как обычное руководство или сначала попробовать выполнить задание самостоятельно, а затем сравнить свое решение с подробным разбором.
Перейти к заданиюВ этой статье мы создадим панель пользователя с аватаром, именем, профессией, индикатором онлайн-статуса и кнопкой действия. На ее примере разберем, как распределять элементы внутри карточки, выравнивать контент по вертикали, оформлять статус пользователя и создавать адаптивные интерфейсные компоненты.
Создаем 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>Давайте сверстаем сам блок. Разметим сам блок как <div> и разделим его на три части. Первая — это левая часть, где у нас аватар и данные пользователя. Вторая — статус «в сети», и третья — ссылка. Здесь можно было пойти и другим путем — сделать две части — левую и правую, но я хочу показать этот способ.
Итак, получается, внутри панели будет два дива и ссылка. А внутри первого дива добавим изображение, а также имя и должность пользователя.
<div class="user-panel">
<div class="user-panel__info">
<img src="img/avatar.png" alt="Илья Морозов" class="user-panel__avatar">
<div class="user-panel__text">
<div class="user-panel__name">
Илья Морозов
</div>
<div class="user-panel__position">
Motion Designer
</div>
</div>
</div>
<div class="user-panel__status">
В сети
</div>
<a href="#" class="user-panel__link">
Открыть профиль
</a>
</div>Не забывайте заполнять 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;
}
@font-face {
font-family: "Inter";
src: url("../fonts/InterMedium.woff2");
font-display: swap;
font-weight: 500;
}
@font-face {
font-family: "Inter";
src: url("../fonts/InterSemiBold.woff2");
font-display: swap;
font-weight: 600;
}
@font-face {
font-family: "Inter";
src: url("../fonts/InterBold.woff2");
font-display: swap;
font-weight: 700;
}
body {
margin: 0;
padding: 20px;
font-family: "Inter", sans-serif;
background: #111;
}Обращаю ваше внимание на подключение шрифтов. В font-family мы указываем одно значение — Inter, а в font-weight — разные. Так браузеру будет понятно, какое именно начертание использовать, а нам не придется задавать каждому элементу свое семейство шрифтов.
Идем дальше, а дальше мы сделаем стили для самой панели. тут все забираем из макета, а также добавляем flexbox вместе с `align-items: center, делая весь контент по центру по вертикали.
.user-panel {
display: flex;
align-items: center;
border: 1px solid #2a2a2a;
border-radius: 32px;
padding: 16px;
gap: 16px;
margin: 0 auto;
max-width: 920px;
background: #1a1a1a;
}Далее, сделаем левую часть. Для нее также пригодится flexbox и align-items: center. Для изображения обязательно зададим размеры, display, object-fit и border-radius, это позволит добавлять сюда любые изображения, и они встанут адекватно. Помимо этого, конечно, добавим стили для текста.
.user-panel__info {
display: inline-flex;
align-items: center;
gap: 16px;
}
.user-panel__avatar {
display: block;
border-radius: 16px;
width: 72px;
height: 72px;
object-fit: cover;
}
.user-panel__name {
margin-bottom: 8px;
font-weight: 700;
font-size: 20px;
color: #fff;
}
.user-panel__position {
font-weight: 400;
font-size: 14px;
color: #a1a1aa;
}Теперь — статус. Сам элемент статуса сделать несложно, но как сделать кружок? Тут я всегда руководствуюсь один правилом: если декоративный элемент можно сделать без изменения разметки — надо так и делать. Поэтому, мы можем на весь блок добавить display: inline-flex, а кружок сделать с помощью псевдоэлемента ::before. Зададим ему стили из макета, а фон сделаем currentColor, таким образом кружок всегда будет равен цвету текста. Например, если статус будет «Не в сети», красным цветом, то и кружок сам станет красным.
И самое важное, что здесь нужно — это отступ. Мы не делили разметку на две части, о чем описано выше. А значит, использовать justify-content: space-between мы не можем, иначе статус будет ближе к центру панели. Поэтому пойдем другим путем и зададим статусу margin-left: auto. Значение auto у флекс-элемента позволяет задать отступ, равный всему доступному пространству в блоке. То есть, мы по сути просто сдвигаем статус, а вместе с ним и ссылку вправо.
.user-panel__status {
display: inline-flex;
align-items: center;
margin-left: auto;
font-weight: 600;
font-size: 14px;
color: #a2f916;
gap: 8px;
}
.user-panel__status::before {
content: "";
display: block;
border-radius: 100%;
width: 10px;
height: 10px;
background: currentColor;
}Остается ссылка. Добавляем стили и сверху пишем :hover, чтобы было красивее и удобнее.
.user-panel__link {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
padding: 16px;
font-weight: 500;
font-size: 16px;
text-decoration: none;
color: #fff;
background: #27272a;
transition: background 0.3s;
}
.user-panel__link:hover {
background: #343438;
}Обратите внимание на внутренние элементы панели. Им всем я задал не просто display: flex, а именно display: inline-flex, то есть сделал их строчными для соседей, поэтому каждый из элементов займет лишь размер своего контента.
Теперь вы умеете создавать панель пользователя с несколькими логическими зонами: информацией о профиле, статусом и кнопкой действия. Подобные компоненты часто используются в личных кабинетах, мессенджерах, CRM-системах и административных панелях.