- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Каталог | Техномарт</title>
<link rel="stylesheet" href="technomart/setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="products">
<li class="product">
<h2 class="product__title">Пассатижи «Суперхват»</h2>
<img class="product__image" src="technomart/good-1.jpg" width="200" height="150" alt="Пассатижи «Суперхват»">
<p class="product__price">800 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Отвёртка «Буравочка»</h2>
<img class="product__image" src="technomart/good-2.jpg" width="200" height="150" alt="Отвёртка «Буравочка»">
<p class="product__price">550 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Плоскогубцы «Коперник»</h2>
<img class="product__image" src="technomart/good-3.jpg" width="200" height="150" alt="Плоскогубцы «Коперник»">
<p class="product__price">1 350 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Перфоратор «Привет, сосед!»</h2>
<img class="product__image" src="technomart/good-4.jpg" width="200" height="150" alt="Перфоратор «Привет, сосед!»">
<p class="product__price">7 500 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Молоток «Мьёльнир»</h2>
<img class="product__image" src="technomart/good-5.jpg" width="200" height="150" alt="Молоток «Мьёльнир»">
<p class="product__price">2 000 ₽</p>
</li>
</ul>
<script src="script.js"></script>
</body>
</html>
CSS
.product {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 220px;
margin-bottom: 20px;
text-align: center;
border: 1px solid #cccccc;
}
.product--available::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 15px;
height: 15px;
padding: 5px;
background-image: url("technomart/check.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 18px;
border: 1px solid #4eb543;
border-radius: 50%;
}
.product--unavailable {
filter: grayscale(1) opacity(0.7);
}
.product--unavailable::before {
content: "Нет в наличии";
position: absolute;
top: 0;
left: 0;
padding: 5px;
font-size: 14px;
}
.product--special {
flex-basis: 100%;
order: -1;
border-color: #ee3643;
}
.product--special::after {
content: "Товар дня";
position: absolute;
top: 0;
right: 0;
height: 30px;
padding-right: 10px;
padding-left: 10px;
line-height: 30px;
color: #ffffff;
background-color: #ee3643;
}
JavaScript
Вы перешли на другую страницу
Консоль
ЗадачиВыполнено
0
- Объявите переменную
specialProduct
и запишите в неё второй DOM-элемент из списка товаров. - Выведите
specialProduct
в консоль. - Ниже создайте переменную
unavailableProduct
и запишите в неё последний DOM-элемент из списка товаров. - Выведите переменную
unavailableProduct
в консоль.