-
Notifications
You must be signed in to change notification settings - Fork 0
/
products.html
112 lines (112 loc) · 6.66 KB
/
products.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ДімКіно - Онлайн магазин</title>
<link rel="stylesheet" href="css/navmenu.css">
<link rel="stylesheet" href="css/products.css">
<link rel="icon" href="images/picon.png">
</head>
<body>
<header>
<nav>
<a href="index.html">
<img class="logo" src="images/logo.png" alt="ДімКіно - Домашній кінотеатр, HIFI та HIEND аудіосистеми">
</a>
<input class="menu-btn" type="checkbox" id="menu-btn">
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="index.html">Головна</a></li>
<li><a href="portfolio.html">Портфоліо</a></li>
<li><a href="services.html">Послуги</a></li>
<li><a class="active" href="products.html">Магазин</a></li>
<li><a href="contacts.html" id="contacts-btn">Контакти</a></li>
<li><a href="#cart"><i class="fas fa-shopping-cart"></i></a></li>
</ul>
</nav>
</header>
<main>
<section class="filters">
<h2>Онлайн Магазин</h2>
<div class="filter-buttons">
<input class="filter-btn" type="checkbox" id="filter-btn">
<label class="filter-icon" for="filter-btn"><i class="class fas fa-filter"></i></label>
<i class="fas fa-sort-amount-up sort-btn sort-price"></i>
<i class="fas fa-sort-alpha-up sort-btn sort-brand"></i>
<input type="text" name="search" class="filter-search" placeholder="Пошук...">
</div>
<div class="filters-menu">
<div class="filter-category">
<span>Категорія:</span>
<input class="filter-checkbox category-all" type="checkbox" data-filter="amps pre-amp network-player speakers projector tv" name="all-category" id="all-category" checked>
<label for="all-category">Усі</label>
<input class="filter-checkbox category" type="checkbox" data-filter="amps" name="amps" id="amps">
<label for="amps">Підсилювачі</label>
<input class="filter-checkbox category" type="checkbox" data-filter="pre-amp" name="pre-amp" id="pre-amp">
<label for="pre-amp">Попередній підсилювач</label>
<input class="filter-checkbox category" type="checkbox" data-filter="network-player" name="network-player" id="network-player">
<label for="network-player">Програвачі</label>
<input class="filter-checkbox category" type="checkbox" data-filter="speakers" name="speakers" id="speakers">
<label for="speakers">Акустика</label>
<input class="filter-checkbox category" type="checkbox" data-filter="projector" name="projector" id="projector">
<label for="projector">Проектори</label>
<input class="filter-checkbox category" type="checkbox" data-filter="tv" name="tv" id="tv">
<label for="tv">Телевізори</label>
</div>
<div class="filter-brand">
<span>Марка:</span>
<input class="filter-checkbox brand-all " type="checkbox" data-filter="dan-d-agostino loewe wilson-audio sonus-faber mcintosh dcs jvc" name="all-brand" id="all-brand" checked>
<label for="all-brand">Усі</label>
<input class="filter-checkbox brand " type="checkbox" data-filter="dan-d-agostino" name="dan-d-agostino" id="dan-d-agostino">
<label for="dan-d-agostino">Dan D'Agostino</label>
<input class="filter-checkbox brand " type="checkbox" data-filter="loewe" name="loewe" id="loewe">
<label for="loewe">Loewe</label>
<input class="filter-checkbox brand " type="checkbox" data-filter="wilson-audio" name="wilson-audio" id="wilson-audio">
<label for="wilson-audio">Wilson Audio</label>
<input class="filter-checkbox brand " type="checkbox" data-filter="sonus-faber" name="sonus-faber" id="sonus-faber">
<label for="sonus-faber">Sonus Faber</label>
<input class="filter-checkbox brand " type="checkbox" data-filter="mcintosh" name="mcintosh" id="mcintosh">
<label for="mcintosh">McIntosh</label>
<input class="filter-checkbox brand " type="checkbox" data-filter="dcs" name="dcs" id="dcs">
<label for="dcs">dCS</label>
<input class="filter-checkbox brand " type="checkbox" data-filter="jvc" name="jvc" id="jvc">
<label for="jvc">JVC</label>
</div>
</div>
</section>
<section class="products">
<h2>Товари</h2>
<div class="product-items"></div>
</section>
<section class="cart" id="cart">
<h2>Кошик</h2>
<div class="cart-items"></div>
<div class="cart-total">
<span class="cart-total-title">Сума замовлення:</span>
<span class="cart-total-price">$0</span>
</div>
<button class="btn cart-purchase-button" type="button">Зробити замовлення</button>
</section>
</main>
<footer>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-facebook-square"></i></a>
<ul>
<li><a href="index.html">Головна</a></li>
<li><a href="portfolio.html">Портфоліо</a></li>
<li><a href="services.html">Послуги</a></li>
<li><a href="products.html">Магазин</a></li>
<li><a href="shopping-cart.html">Корзина</a></li>
<li><a href="contacts.html" id="contacts-btn">Контакти</a></li>
</ul>
<p>© 2019 Markiyan</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/68324b0018.js" crossorigin="anonymous"></script>
<script src="js/products.js"></script>
<script src="js/contacts.js"></script>
</body>
</html>