Skip to content

Instantly share code, notes, and snippets.

@kianurivzzz
Created August 30, 2024 11:56
Show Gist options
  • Save kianurivzzz/6be3becc9dcc23517e668c5f8d62eb5c to your computer and use it in GitHub Desktop.
Save kianurivzzz/6be3becc9dcc23517e668c5f8d62eb5c to your computer and use it in GitHub Desktop.
<!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="stylesheet" href="css/style.css">
</head>
<body>
<div class="profile-card">
<h2>Иван Иванов</h2>
<p>Ведущий разработчик с более чем 10-летним опытом работы в веб-разработке.</p>
</div>
<div class="profile-card">
<h2>Мария Смирнова</h2>
<p>Дизайнер с креативным подходом и многолетним опытом в UX/UI.</p>
</div>
<div class="profile-card">
<h2>Алексей Петров</h2>
<p>Менеджер проектов с успешным опытом управления командами и продуктами.</p>
</div>
</body>
</html>
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font: 18px/1.5 sans-serif;
}
.profile-card {
border: 1px solid #ccc;
padding: 20px;
margin: 10px;
width: 300px;
box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}
/* Ниже можно писать решение */

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

style.css

Используйте псевдоэлементы для стилизации карточек профилей.

Перед именем пользователя должна отображаться иконка "👤" с отступом справа 5px.

После имени пользователя должна отображаться горизонтальная линия цвета #ccc, высотой 2px и с отступом сверху 5px.

Первая буква описания профиля должна быть цвета #6936f4, увеличена в 1.5 раза и жирная.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment