-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
491 lines (468 loc) · 31.1 KB
/
index.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
<!DOCTYPE html>
<html lang="eg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VSG Computers </title>
<link href="/css/main.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="/img/icon.jpg" type="icon">
</head>
<body >
<!-- Започва Navbar-->
<nav>
<div class="navbar border-bottom border-bottom-5 border-danger navbar-expand-custom navbar-dark bg-dark bg-gradient clearfix end_bx mb-5">
<!--Главното име на сайта в Navbar-->
<a class="navbar-brand justify-content-center" href="../../index.html">
<img src="/img/banner.png" class="mx-2"></img>
</a>
<!-- Search меню начало-->
<div class="container-lg" style="width: 500px; z-index:10;">
<div class="row justify-content-center">
<div class="col-12">
<div class="search">
<input type="text" placeholder="Какво ще желаете?" class="fw-bold" id="search">
<i class="bi bi-search"style="font-size: 20px" id="search_icon"></i>
<div class="search_bx2">
</div>
</div>
</div>
</div>
</div>
<!--Бутона който се показва при по-малките екари/телефони-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--Navbar Content-->
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav shadow-lg">
<div class="nav-item my-3 mx-4 " id="navbarNav">
<a href="/PC/PC.html" class="nav-link text-light ps-2 justify-content-center" id="navbarNav"><h4>Компютри</h4></a>
</div>
<!-- Dropdown за Компоненти начало-->
<li class="nav-item dropdown my-3 mx-2 "id="navbarNav" >
<button class="btn text-white dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<h4>Компоненти</h4>
</button>
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
<li><a class=" dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Components/Processors.html"><i class="bi bi-cpu"></i> Процесори</a></li>
<li><a class="dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Components/GPU.html"><i class="bi bi-gpu-card"></i> Видео карти</a></li>
<li><a class="dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Components/RAM.html"><i class="bi bi-memory"></i> RAM памети</a></li>
<li><a class="dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Components/MotherBoard.html"><i class="bi bi-motherboard"></i> Дънни платки</a></li>
<li><a class="dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Components/PSU.html"><i class="bi bi-stop-btn"></i> Захранвания</a></li>
<li><a class="dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Components/SSD.html"><i class="bi bi-device-ssd"></i> SSD дискове</a></li>
<li><a class="dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Components/HDD.html"><i class="bi bi-device-hdd"></i> HDD дискове</a></li>
</ul>
</li>
<!-- Dropdown за Периферия начало-->
<li class="nav-item dropdown my-3 mx-2 "id="navbarNav" >
<button class="btn text-white dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<h4>Периферия</h4>
</button>
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Peripherials/Keyboard.html"><i class="bi bi-keyboard"></i> Клавиатури</a></li>
<li><a class="dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Peripherials/Mouse.html"><i class="bi bi-mouse3"></i> Мишки</a></li>
<li><a class="dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Peripherials/Headset.html"><i class="bi bi-headset"></i> Слушалки</a></li>
<li><a class="dropdown-item h5 border-4 border-bottom border-primary text-light" href="/Peripherials/Monitors.html"><i class="bi bi-display"></i> Монитори</a></li>
</ul>
</li>
<!-- Dropdown за Аксесоари и Софтуери начало-->
<div class="nav-item my-3 mx-4 " id="navbarNav">
<a href="/Accessories/Accessories.html" class="nav-link text-light ps-2 justify-content-center" id="navbarNav"><h4>Аксесоари</h4></a>
</div>
<!-- Количка-->
<li class="navbar-nav active text-light my-3 mx-5 cart" id="navbarNav" >
<a href="../../cart.html">
<div class="cart">
<button class="btn text-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg></button>
<div id="cartAmount" class="cartAmount">0</div>
</div>
</a>
</li>
</div>
</div>
</div>
</nav>
<!-- Приключва Navbar -->
<!-- Започва снимката на компютъра/евентуален Carosel-->
<section>
<div class="container-md ">
<div class="col-lg-12 col-sm-12 d-flex justify-content-center">
<img src="/img/main_PC.png" class="img-fluid" alt="">
</div>
</div>
</section>
<!-- Прикючва снимката на компютъра/евентуален Carosel-->
<!-- Започва препоръчани продукти-->
<section id="Promo" class="bg-light mt-2">
<div>
<h1 class="display-3 d-flex justify-content-center fw-bold border-bottom border-danger pb-2"><b>Топ продукти</b></h1>
</div>
<div class="container-xll mx-md-2 mx-lg-5 my-3" >
<div class="row justify-content-center text-center mx-0" >
<!--G:RIGS > Libra White (Intel)-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto; height: 570px;">
<img src="/img/Top Products/First_PC.jpg" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate" style="min-width: 100px;"><a href="/PC/PC/Libra.html">G:RIGS > Libra White</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold text-truncate" style="min-width: 100px;">
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-cpu"></i> Intel Core i5-11400F</li>
<li class="list-group-item text-truncate"style="min-width: 100px;"><i class="bi bi-gpu-card"></i> GeForce GTX 1650</li>
<li class="list-group-item text-truncate"style="min-width: 100px;"><i class="bi bi-memory"></i> 16GB DDR4</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">1599лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">1696лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-6%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Втори Продукт Libra Black (AMD)-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto; height: 570px;">
<img src="/img/Top Products/Second_PC.jpg" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate"style="min-width: 100px;"><a href="/PC/PC/Twister.html">G:RIGS > Twister Black </a></h5>
</div>
<ul class="list-group list-group-flush fw-bold">
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-cpu"></i> AMD Ryzen 5 5600</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-gpu-card"></i>GeForce RTX 3060 Ti</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-memory"></i> 16GB DDR4</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">1879лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">1999лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-6%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Трети Продукт Продукт MSI RTX 4090-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto;height: 570px;">
<img src="/img/Top Products/MSI_RTX_4090_Trio.png" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate" style="min-width: 100px;"><a href="/Components/GPU/msi_rtx-4090.html">MSI GeForce RTX 4090</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold">
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 24GB GDDR6X</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 384-bit</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> DisplayPort</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">4489лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">5027лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-12%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Четвърти GainWard MSI RTX 4090-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto;height: 570px;">
<img src="/img/Top Products/MSI_RTX_4090.png" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate" style="min-width: 100px;"><a href="/Components/GPU/rtx-4090.html">GAINWARD RTX 4090</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold fw-bold">
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 24GB GDDR6X</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 384-bit</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> DisplayPort/HDMI</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">4039лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">4321лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-7%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Пети Продукт Samsung G5-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto;height: 570px;">
<img src="/img/Top Products/Samsung_32g5.png" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate" style="min-width: 100px;"><a href="/Peripherials/Monitor/G5.html">Samsung Odyssey G5</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold">
<li class="list-group-item text-truncate"style="min-width: 100px;"><i class="bi bi-check-lg"></i> 32" VA</li>
<li class="list-group-item text-truncate"style="min-width: 100px;"><i class="bi bi-check-lg"></i> 144hz</li>
<li class="list-group-item text-truncate"style="min-width: 100px;"><i class="bi bi-check-lg"></i> 2560x1440 WQHD</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">699лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">770лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-10%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Шести Продукт Samsung G3-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto;height: 570px;">
<img src="/img/Top Products/Samsung_32g3.png" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate"style="min-width: 100px;"><a href="/Peripherials/Monitor/G3.html">Samsung Odyssey G3</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold">
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 32" VA</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 165Hz</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 1920x1080 Full HD</li>
</ul>
<div class="card-body d-flex justify-content-center">
<span>
<h3 href="#" class="card-link text-danger fw-bold">669лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">789лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-18%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Седми Продукт Razer Black Widow V3-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card text-truncate" style="width: auto;height: 570px;">
<img src="/img/Top Products/Razer_BlackWidow_V3.png" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate"style="min-width: 100px;"><a href="/Peripherials/Keyboard/Razer_TK.html">Razer BlackWidow V3</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold">
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> Razer Green суичове</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> Razer Chroma RGB</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i>Tenkeyless</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">239лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">293лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-23%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Осми Продукт Logitech G Pro-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto;height: 570px;">
<img src="/img/Top Products/Logitech_GPro_Keyboard.jpg" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate"style="min-width: 100px;"><a href="/Peripherials/Keyboard/Logitech_Gpro.html">Logitech G Pro</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold">
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> GX Blue Clicky суичове</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 26-Key Rollover</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 16.8 млн. цвята</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">199лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">249лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-20%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Девети Продукт AMD Ryzen 9 5950X-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto;height: 570px;">
<img src="/img/Top Products/amd_ryzen_9_5950x.jpg" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate"style="min-width: 100px;"><a href="/Components/CPU/Ryzen-9-5950x.html">AMD Ryzen 9 5950X</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold">
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 16 ядра / 32 нишки</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 3.40 - 4.90GHz</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 64MB L3 кеш</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">1169лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">1369лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-14%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Десети Продукт Intel Core i9-12900KS-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto;height: 570px;">
<img src="/img/Top Products/intel_core_i912900ks.jpg" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate" style="min-width: 100px;"><a href="/Components/CPU/i9-12900ks.html">Intel Core i9-12900KS</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold">
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 16 ядра / 24 нишки</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 3.2 - 5.5 GHz</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 30 MB кеш</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">1499лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">1619лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-8%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Единайсти Продукт Logitech G Pro Wireless-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto;height: 570px;">
<img src="/img/Top Products/Logitech_GPro_Mouse.jpg" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate" style="min-width: 100px;"><a href="/Peripherials/Mouse/Gpro.html">Logitech G Pro Wireless</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold">
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 25 600 DPI</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 1ms</li>
<li class="list-group-item text-truncate" style="min-width: 100px;"><i class="bi bi-check-lg"></i> 80гр. тегло</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">199лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">259лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-23%)</span>
</div>
</span>
</div>
</div>
</div>
<!--Дванайсти Продукт Logitech PRO X WIRELESS-->
<div class="col-12 col-sm-7 col-md-5 col-lg-4 col-xl-3 col-xxl-2 pb-sm-3 px-0 pb-3" id="product">
<div class="card" style="width: auto;height: 570px;">
<img src="/img/Top Products/Logitech_GPro_Headset.jpg" class="card-img-top" alt="FirstPC">
<div class="card-body">
<h5 class="card-title text-truncate" style="min-width: 100px;"><a href="/Peripherials/Headset/Gpro.html">Logitech PRO X WIRELESS</a></h5>
</div>
<ul class="list-group list-group-flush fw-bold">
<li class="list-group-item text-truncate"style="min-width: 100px;"><i class="bi bi-check-lg"></i> PRO-G говорители</li>
<li class="list-group-item text-truncate"style="min-width: 100px;"><i class="bi bi-check-lg"></i> Wireless</li>
<li class="list-group-item text-truncate"style="min-width: 100px;"><i class="bi bi-check-lg"></i> 50 MM драйвери</li>
</ul>
<div class="card-body d-flex justify-content-center ">
<span>
<h3 href="#" class="card-link text-danger fw-bold">399лв.</h3>
<div class="d-flex">
<p href="#" class="card-link text-decoration-line-through" style="color: grey; text-decoration: line-through;">479лв.</p>
<span class="text-danger" style="text-decoration: none;"> (-20%)</span>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Приключва препоръчани продукти-->
<!--footer начало-->
<section>
<div class="container-fluid bg-white py-5 px-sm-3 px-md-5 fw-bold" style="margin-top: 90px;">
<div class="row pt-5">
<!--Информация footer-->
<div class="col-lg-3 col-md-6 mb-5">
<h4 class="text-uppercase mb-4">Местоположение</h4>
<p class="mb-2"><i class="bi bi-pin-map"></i> бул. „Джеймс Баучер“ 82 , София</p>
<p class="mb-2"><i class="bi bi-telephone-fill"></i> +359 989 8848</p>
<p><i class="bi bi-envelope"></i> [email protected]</p>
<h6 class="text-uppercase text-white py-2"></h6>
<div class="d-flex justify-content-start">
<button class="btn btn-lg btn-outline-dark btn-lg-square me-2" href="#"><i class="bi bi-twitter"></i></button>
<button class="btn btn-lg btn-outline-dark btn-lg-square me-2" href="#"><i class="bi bi-facebook"></i></button>
<button class="btn btn-lg btn-outline-dark btn-lg-square me-2" href="#"><i class="bi bi-linkedin"></i></button>
<button class="btn btn-lg btn-outline-dark btn-lg-square" href="#"><i class="bi bi-instagram"></i></button>
</div>
</div>
<!--Компоненти footer-->
<div class="col-lg-3 col-md-6 mb-5 ">
<h4 class="text-uppercase mb-4">Компоненти</h4>
<div class="d-flex flex-column justify-content-start">
<a class="text-body mb-2" href="/Components/Processors.html"><i class="fa fa-angle-right text-white ms-md-4 ms-xl-0"></i> Процесори</a>
<a class="text-body mb-2" href="/Components/GPU.html"><i class="fa fa-angle-right text-white ms-md-4 ms-xl-0"></i>Видео карти</a>
<a class="text-body mb-2" href="/Components/RAM.html"><i class="fa fa-angle-right text-white ms-md-4 ms-xl-0"></i>RAM памети</a>
<a class="text-body mb-2" href="/Components/MotherBoard.html"><i class="fa fa-angle-right text-white ms-md-4 ms-xl-0"></i>Дънни платки</a>
<a class="text-body mb-2" href="/Components/SSD.html"><i class="fa fa-angle-right text-white ms-md-4 ms-xl-0"></i>SSD дискове</a>
<a class="text-body mb-2" href="/Components/HDD.html"><i class="fa fa-angle-right text-white ms-md-4 ms-xl-0"></i>HDD дискове</a>
</div>
</div>
<!--Периферия footer-->
<div class="col-lg-3 col-md-6 mb-5">
<h4 class="text-uppercase mb-4">Периферия</h4>
<div class="d-flex flex-column justify-content-start">
<a class="text-body mb-2" href="/Peripherials/Keyboard.html"><i class="fa fa-angle-right text-white mr-2"></i>Клавиатури</a>
<a class="text-body mb-2" href="/Peripherials/Mouse.html"><i class="fa fa-angle-right text-white mr-2"></i>Мишки</a>
<a class="text-body mb-2" href="/Peripherials/Headset.html"><i class="fa fa-angle-right text-white mr-2"></i>Слушалки</a>
<a class="text-body mb-2" href="/Peripherials/Monitors.html"><i class="fa fa-angle-right text-white mr-2"></i>Монитори</a>
</div>
</div>
<!--Аксесоари footer-->
<div class="col-lg-3 col-md-6 mb-5">
<h4 class="text-uppercase mb-4">Аксесоари</h4>
<div class="d-flex flex-column justify-content-start">
<a class="text-body mb-2" href="/Accessories/Accessories.html"><i class="fa fa-angle-right text-white mr-2"></i>Аксесоари</a>
</div>
<h4 class="text-uppercase my-4">Компютри</h4>
<div class="d-flex flex-column justify-content-start">
<a class="text-body mb-2" href="/PC/PC.html"><i class="fa fa-angle-right text-white mr-2"></i>Компютри</a>
</div>
</div>
<!-- Промоции footer трябва да се добави бутона както Search-->
<div class="col-lg-3 col-md-6 mb-5">
<h4 class="text-uppercase mb-4">Абонирай се за промоции</h4>
<div class="mb-3" style="min-width: 400px;">
<div class="input-group">
<input type="text" class="form-control border-dark" placeholder="Твоят имейл">
<div class="input-group-append">
<button class="btn btn-primary text-uppercase px-3">Абонирай се</button>
</div>
</div>
</div>
<i></i>
</div>
</div>
</div>
</section>
<!--footer край-->
<!--Създател и Copyright-->
<div class="container-fluid text-center bg-dark ">
<h6 class="text-light">Създадено от Виктор Георгиев 12Е</h6>
<i class="fw-bold text-light">© 2022-2023</i>
</div>
<script type="module" src="/DataBase/searchData_Index_Pages.js" ></script>
<script defer src="search_index_page.js" type="module"></script>
<script src="index.js"></script>
<script src="../cart.js"></script>
<script src="../main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>