-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (87 loc) · 6.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Khaled Mohamed">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="This is just a ecommerce application with native JavaScript & Tailwind CSS">
<meta name="keywords" content="HTML5, CSS3, Tailwind CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./assets/favicons/favicon.ico">
<title>Marketify E-Commerce Application</title>
<link rel="stylesheet" href="./dist/output.css">
</head>
<body class="relative bg-gradient-to-bl from-slate-800 via-slate-850 to-gray-900" id="body">
<div id="load"></div>
<div class="show-product w-[94%] md:w-[32rem] lg:w-[35rem] h-auto pt-10 pb-5 px-2 rounded-lg fixed top-[23rem] left-1/2
-translate-x-1/2 -translate-y-1/2 z-[99999999999] bg-slate-750 opacity-0 invisible transition-all duration-[0.6s]"
id="my-modal"></div>
<main id="main-content">
<nav
class="w-full h-20 fixed top-0 left-0 shadow-lg bg-gradient-to-bl from-slate-800 via-slate-850 to-gray-900 z-[99999999999] bg-slate-400">
<div class="w-full h-full container flex justify-between items-center">
<h1 class="text-2xl text-white">
<a href="#" class="px-4 py-2 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 md:w-8 h-5 md:h-8">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
</svg>
<span class="inline-block ml-2 text-base lg:text-lg">Marketify</span>
</a>
</h1>
<div id="show-cart-open" class="relative flex items-center p-2 text-white cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>
<span id="cart-number" class=""></span>
</div>
<div id="show-cart"
class="w-full md:w-[25rem] h-screen px-3 py-16 lg:py-24 border-0 md:border-l-[1px] md:border-slate-700 absolute top-0 -right-[50rem] bg-gradient-to-tl from-slate-800 via-slate-850 to-gray-900 text-center transition-all duration-[0.8s]">
<div class="w-full flex justify-between items-center">
<h2 class="inline-block text-white text-xl capitalize" id="total-price">No added items!</h2>
<div id="show-cart-close"
class="w-8 h-8 p-1 rounded-full flex justify-center items-center bg-slate-600 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="white" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
<div class="w-full grid grid-cols-1 gap-y-12 mt-12" id="cart-show-products">
<div class="absolute bottom-0 bg-white text-black text-center final-result"></div>
</div>
</div>
</div>
</nav>
<section class="section-padding">
<div class="w-full container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:gap-6"
id="parent-products"></div>
</section>
<footer
class="w-full h-20 py-6 px-3 shadow-lg bg-gradient-to-bl from-slate-800 via-slate-850 to-gray-900 z-[99999999999] bg-slate-400">
<div class="container">
<div class="w-full flex justify-between items-center">
<h3 class="text-2xl text-white">
<a href="#" class="px-4 py-2 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 md:w-8 h-5 md:h-8">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
</svg>
<span class="inline-block ml-2 text-base lg:text-lg">Marketify</span>
</a>
</h3>
<p class="text-sm text-[#aaa]">© All Rights Reserved 2023</p>
</div>
</div>
</footer>
</main>
<!-- <script type="module" src="./js/index.js"></script> -->
<script src="./dist/main.js"></script>
</body>
</html>