Страница-визитка — это компактный сайт с краткой информацией о человеке, контактами и ссылками для связи. В этом мини-проекте соберём такую страницу с нуля на HTML и CSS.
В этом разборе
Показать полный код страницы (можно скопировать целиком)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Николай Дубук - визитка</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;400;600;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--paper: #faf6f0;
--ink: #1c1a17;
--dim: #7a7468;
--accent: #e8590c;
--line: #e4ddd0;
--ok: #2fae5b;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;
display: flex;
justify-content: center;
padding: 46px 20px;
}
a { text-decoration: none; color: inherit; }
.card-page {
width: 100%;
max-width: 480px;
}
/* cascading appear-on-load animation */
.pop {
opacity: 0;
transform: translateY(14px);
animation: pop-in .6s ease forwards;
}
@keyframes pop-in {
to { opacity: 1; transform: translateY(0); }
}
/* HERO */
.card-hero { text-align: center; margin-bottom: 30px; }
.status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--dim);
animation-delay: .05s;
}
.status-badge .dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ok);
}
.status-badge .dot::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--ok);
animation: ring 1.8s ease-out infinite;
}
@keyframes ring {
0% { transform: scale(.6); opacity: 1; }
100% { transform: scale(1.8); opacity: 0; }
}
.avatar {
width: 108px; height: 108px;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 20px auto 18px;
border: 1px solid var(--line);
animation-delay: .12s;
}
.card-hero h1 {
margin: 0 0 4px;
font-size: clamp(26px, 6vw, 32px);
font-weight: 800;
animation-delay: .18s;
}
.role {
margin: 0 0 16px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--accent);
animation-delay: .24s;
}
.pitch {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--dim);
animation-delay: .3s;
}
/* CONTACT CARD */
.contact-card { margin-bottom: 26px; animation-delay: .38s; }
.contact-card-inner {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
}
.contact-card-inner:hover {
transform: scale(1.02);
box-shadow: 0 16px 34px rgba(28, 26, 23, .1);
}
address { font-style: normal; }
.contact-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--line);
border-left: 3px solid transparent;
transition: border-color .2s ease, background .2s ease;
}
.contact-row:last-child { border-bottom: none; }
.contact-row:hover { border-left-color: var(--accent); background: #fdf8f3; }
.c-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.c-value { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 500; }
/* STATS ROW (flexbox) */
.stats-row {
display: flex;
gap: 10px;
margin-bottom: 26px;
}
.stat-pill {
flex: 1;
text-align: center;
padding: 16px 8px;
background: var(--ink);
color: #f2ede4;
border-radius: 14px;
}
.stat-pill:nth-child(1) { animation-delay: .46s; }
.stat-pill:nth-child(2) { animation-delay: .52s; }
.stat-pill:nth-child(3) { animation-delay: .58s; }
.stat-pill .num { display: block; font-size: 24px; font-weight: 800; color: var(--accent); }
.stat-pill .lbl { display: block; font-size: 10.5px; line-height: 1.4; margin-top: 4px; color: #d8d0c3; }
/* CTA BUTTONS */
.cta-row {
display: flex;
flex-direction: column;
gap: 10px;
animation-delay: .64s;
}
.btn {
position: relative;
overflow: hidden;
display: block;
text-align: center;
padding: 15px 20px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
z-index: 1;
}
.btn::before {
content: "";
position: absolute;
inset: 0;
background: var(--ink);
transform: translateX(-101%);
transition: transform .3s ease;
z-index: -1;
}
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent::before { background: #c94a09; }
.btn-outline { border: 1px solid var(--ink); color: var(--ink); }
.btn:hover::before { transform: translateX(0); }
.btn-outline:hover { color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.pop { opacity: 1; transform: none; }
}
</style>
</head>
<body>
<main class="card-page">
<header class="card-hero">
<span class="status-badge pop"><span class="dot"></span>Открыт к сотрудничеству</span>
<img class="avatar pop" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ygCw8MfZ-AsLyuyAtW9hBXID12ad1pYFPt1h_MnXM-oa_1MsIdKrPUOFOm4uRUKuNFq219L-YZboPcr8jGkxqO2H2eZJNb8m3fc2e-o5-9ETqfrSsV2SSy8JXMkuLHKd_YqIVcqEdpjiV55i2NwXtDFAd7WKVSBzgY1duHPMtwDHB80q-AQ4Zqrhygg/s1600-rw/Nikolai_Dubuk_2.jpg" alt="Николай Дубук">
<h1 class="pop">Николай Дубук</h1>
<p class="role pop">Автор курса HTML & CSS</p>
<p class="pitch pop">Провёл 11 лет в блогах на Blogger - и всё это время верстал сам, без студий и фрилансеров. Нужен человек, который не только сделает сайт, но и объяснит каждую строчку кода, - вы его нашли.</p>
</header>
<section class="contact-card pop">
<div class="contact-card-inner">
<address>
<a class="contact-row" href="https://t.me/nikolaidubuk" target="_blank" rel="noopener">
<span class="c-label">Telegram</span>
<span class="c-value">@nikolaidubuk</span>
</a>
<a class="contact-row" href="mailto:bloggers.put@gmail.com">
<span class="c-label">Email</span>
<span class="c-value">bloggers.put@gmail.com</span>
</a>
<a class="contact-row" href="tel:+380966411250">
<span class="c-label">WhatsApp / Viber</span>
<span class="c-value">+38 (096) 641-12-50</span>
</a>
</address>
</div>
</section>
<section class="stats-row">
<div class="stat-pill pop">
<span class="num">132</span>
<span class="lbl">бесплатных урока HTML и CSS</span>
</div>
<div class="stat-pill pop">
<span class="num">5</span>
<span class="lbl">живых проектов на Blogger</span>
</div>
<div class="stat-pill pop">
<span class="num">11</span>
<span class="lbl">лет практики вёрстки</span>
</div>
</section>
<footer class="cta-row pop">
<a class="btn btn-accent" href="https://t.me/nikolaidubuk" target="_blank" rel="noopener">Написать в Telegram</a>
<a class="btn btn-outline" href="https://www.htmlicss.com/" target="_blank" rel="noopener">Все уроки HTML & CSS</a>
</footer>
</main>
</body>
</html>
Шапка: статус-бейдж и питч
Сверху - живой индикатор "открыт к сотрудничеству": зелёная точка и расходящееся от неё кольцо. Ниже - фото, имя, роль и короткий продающий текст в 2-3 предложения вместо длинной биографии, как в портфолио.
HTML: что выводит эта разметка
Бейдж - это <span> с текстом и вложенным <span class="dot"> для точки. Дальше обычный <header>: фото, <h1> с именем и два абзаца - роль и питч. Никакой новой разметки, вся анимация ниже - работа CSS.
<header class="card-hero">
<span class="status-badge">
<span class="dot"></span>Открыт к сотрудничеству
</span>
<img class="avatar" src="..." alt="Николай Дубук">
<h1>Николай Дубук</h1>
<p class="role">Автор курса HTML & CSS</p>
<p class="pitch">Провёл 11 лет в блогах на Blogger...</p>
</header>Подробнее: HTML-заголовки: структура и применение и Изображения: тег img и атрибут alt.
CSS: как это оформлено
Кольцо вокруг точки - это псевдоэлемент ::after, который не занимает место в разметке и просто накладывается поверх точки с помощью position: absolute. Именно ему назначена анимация расширения и исчезновения.
.status-badge .dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
background: #2fae5b;
}
.status-badge .dot::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid #2fae5b;
animation: ring 1.8s ease-out infinite;
}
@keyframes ring {
0% { transform: scale(.6); opacity: 1; }
100% { transform: scale(1.8); opacity: 0; }
}Подробнее: Псевдоэлементы ::before и ::after и Правило @keyframes: создаём анимацию с нуля.
Карточка контактов на теге address
Все способы связи собраны в одной карточке: Telegram, почта и WhatsApp/Viber. Для семантики контактной информации в HTML есть специальный тег - <address>, а не безликий <div>.
HTML: что выводит эта разметка
Внутри <address> лежат три ссылки. У каждой свой протокол в href: обычный адрес для Telegram, mailto: для почты и tel: для телефона - при клике на телефоне такая ссылка сразу открывает набор номера.
<address>
<a class="contact-row" href="https://t.me/nikolaidubuk">
<span class="c-label">Telegram</span>
<span class="c-value">@nikolaidubuk</span>
</a>
<a class="contact-row" href="mailto:bloggers.put@gmail.com">
...
</a>
<a class="contact-row" href="tel:+380966411250">
...
</a>
</address>Подробнее: Ещё 2 семантических тега HTML: address и search и Ссылки: тег a и его атрибуты.
CSS: как это оформлено
При наведении вся карточка чуть увеличивается свойством transform: scale(1.02), а строка под курсором получает цветную левую границу. Оба эффекта - это просто transition на состоянии :hover, без единой строчки JavaScript.
.contact-card-inner {
transition: transform .3s ease, box-shadow .3s ease;
}
.contact-card-inner:hover {
transform: scale(1.02);
box-shadow: 0 16px 34px rgba(28, 26, 23, .1);
}
.contact-row {
border-left: 3px solid transparent;
transition: border-color .2s ease, background .2s ease;
}
.contact-row:hover {
border-left-color: var(--accent);
}Подробнее: Масштабирование: scale, scaleX, scaleY и Что такое CSS-трансформации: свойство transform.
Строка статистики на Flexbox
Три плашки с цифрами - "132 урока", "5 проектов", "11 лет" - стоят в ряд и делят ширину карточки поровну. В отличие от сетки проектов в портфолио (там был CSS Grid), здесь ровно одна строка - для такой задачи проще и уместнее Flexbox.
HTML: что выводит эта разметка
Три одинаковых <div class="stat-pill"> лежат подряд внутри одной секции - число и подпись под ним в каждой. Разметка совсем плоская, всю раскладку по горизонтали делает CSS-контейнер вокруг них.
<section class="stats-row">
<div class="stat-pill">
<span class="num">132</span>
<span class="lbl">бесплатных урока HTML и CSS</span>
</div>
<div class="stat-pill">...</div>
<div class="stat-pill">...</div>
</section>Подробнее: Теги, атрибуты и вложенность.
CSS: как это оформлено
У родителя display: flex, а у каждой плашки flex: 1 - значит, все три получают одинаковую долю свободного места и всегда одной ширины, сколько бы текста ни было внутри. Появляются плашки не одновременно: у каждой свой animation-delay, поэтому они "впрыгивают" по очереди слева направо.
.stats-row {
display: flex;
gap: 10px;
}
.stat-pill { flex: 1; }
.stat-pill:nth-child(1) { animation-delay: .46s; }
.stat-pill:nth-child(2) { animation-delay: .52s; }
.stat-pill:nth-child(3) { animation-delay: .58s; }Подробнее: Что такое Flexbox и зачем он нужен и animation: сокращённая запись и несколько анимаций через запятую.
Кнопки с заливкой при наведении
При наведении на кнопку тёмный фон "заезжает" слева направо, будто заливка. Это не смена background-color - фон только выглядит так, будто заливается, а на самом деле под кнопкой всё время лежит отдельный слой, который просто выезжает из-за края.
HTML: что выводит эта разметка
Это те же ссылки-кнопки <a class="btn">, что и в карточке контактов выше - обычный тег a со своим href на Telegram и на главную courses-страницу.
<footer class="cta-row">
<a class="btn btn-accent" href="https://t.me/nikolaidubuk">
Написать в Telegram
</a>
<a class="btn btn-outline" href="https://www.htmlicss.com/">
Все уроки HTML & CSS
</a>
</footer>Подробнее: Ссылки: тег a и его атрибуты.
CSS: как это оформлено
Слой заливки - это псевдоэлемент ::before с position: absolute на всю кнопку, сдвинутый за левый край через translateX(-101%). При наведении сдвиг обнуляется, и transition плавно "вкатывает" его внутрь. Сама кнопка при этом - overflow: hidden, чтобы слой не вылезал за скруглённые углы.
.btn {
position: relative;
overflow: hidden;
z-index: 1;
}
.btn::before {
content: "";
position: absolute;
inset: 0;
background: #1c1a17;
transform: translateX(-101%);
transition: transform .3s ease;
z-index: -1;
}
.btn:hover::before {
transform: translateX(0);
}Подробнее: Псевдоэлементы ::before и ::after и Анимированные кнопки и ссылки: практика.
Появление блоков при загрузке страницы
В портфолио блоки появлялись при прокрутке через JavaScript. Здесь страница компактная и почти без скролла, поэтому проще: все блоки просто "впрыгивают" по очереди сразу при загрузке страницы - чистым CSS, без единой строчки JS.
HTML: что выводит эта разметка
К нужным элементам добавлен класс pop рядом с их обычным классом - сам по себе он ничего не показывает, просто помечает, что этот элемент должен появиться по очереди с остальными.
<span class="status-badge pop">...</span>
<img class="avatar pop" ...>
<h1 class="pop">...</h1>
<p class="role pop">...</p>
<p class="pitch pop">...</p>Подробнее: Теги, атрибуты и вложенность.
CSS: как это оформлено
Класс .pop задаёт начальное состояние (прозрачно и чуть ниже) и запускает @keyframes pop-in с ключевым словом forwards - оно оставляет элемент в конечном состоянии после окончания анимации, а не отбрасывает обратно к прозрачному. У каждого элемента свой animation-delay (см. блоки выше) - отсюда и эффект очереди. Правило prefers-reduced-motion на всякий случай отключает всё это для тех, кто попросил браузер не показывать анимации.
.pop {
opacity: 0;
transform: translateY(14px);
animation: pop-in .6s ease forwards;
}
@keyframes pop-in {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; }
.pop { opacity: 1; transform: none; }
}Подробнее: Анимация появления элементов при загрузке страницы и prefers-reduced-motion: уважение к выбору пользователя.
