- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Абсолютное позиционирование на практике</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="achievement">
<div class="badge"></div>
<div class="title">Первое задание</div>
<div class="description">Выполнить первое задание в курсе</div>
</div>
<div class="achievement">
<div class="badge"></div>
<div class="title">Первое испытание</div>
<div class="description">Пройти первое испытание</div>
</div>
</body>
</html>
CSS
body {
font-family: "Helvetica", "Arial", sans-serif;
}
.achievement {
position: relative;
width: 200px;
min-height: 50px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
.badge {
width: 44px;
height: 44px;
background-color: #7fc3e5;
background-image: url("medal.png");
border: 3px solid #e5e5e5;
border-radius: 4px;
}
.title {
margin-bottom: 3px;
font-weight: bold;
font-size: 15px;
}
.description {
font-size: 12px;
color: #666666;
}
ЗадачиВыполнено
- Задайте элементу с классом
achievementвнутренний отступ слева80px. - Задайте элементу с классом
badgeабсолютное позиционирование - и координату слева
20px.