Влад Мержевич
Створіть сторінку, як показано на малюнку 1. Розміри всіх частин задані в пікселях і не змінюються при масштабуванні вікна. Для кожної батарейки намагайтесь обійтися одним елементом.
Мал. 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Батарейка</title>
<style>
.b {
width: 150px; /* Ширина */
height: 50px; /* Висота */
border: 4px solid #000; /* Параметри рамки */
margin-bottom: 10px; /* Відступ знизу */
position: relative; /* Відносине позиціонування */
}
.b::before, .b::after {
content: '';
position: absolute;
}
.b::after { /* Додаємо контакт справа */
width: 10px;
height: 20px;
background: #000;
right: -10px; top: 15px;
}
.b::before { height: 100%; }
.low::before { /* Червона батарейка */
width: 33%;
background: #ED1C24;
}
.medium::before { /* Жовта батарейка */
width: 66%;
background: #FFC60B;
}
.high::before { /* Зелена батарейка */
width: 100%;
background: #00A055;
}
</style>
</head>
<body>
<div class="b low"></div>
<div class="b medium"></div>
<div class="b high"></div>
</body>
</html>