-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (138 loc) · 6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/style.css" />
<!-- -----icons---------- -->
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css" rel="stylesheet" />
</head>
<body>
<div class="wapper">
<header>
<nav class="nav_bar">
<!-- ------logo---- -->
<div class="logo">
<span>echo</span>
</div>
<!-- -----menu list---- -->
<div class="nav_menu">
<ul>
<li>
<a href="#" href="#" data-drawer-trigger aria-controls="my_cart" aria-expanded="false"><i class="bx bx-cart-alt"></i></a>
</li>
<li>
<a href="#" href="#" data-drawer-trigger aria-controls="login" aria-expanded="false"><i class="bx bx-user"></i></a>
</li>
</ul>
</div>
</nav>
<div class="hero"></div>
</header>
<div class="main-container">
<aside>
<div class="categories_menu">
<div class="heading">
<span>Categories </span>
</div>
<ul id="categories_menu"></ul>
</div>
</aside>
<section>
<div class="heading">
<span>All Products </span>
<br />
<span>Best collection in 2022 for you! </span>
</div>
<div class="product_list" id="produt_list"></div>
</section>
</div>
<footer></footer>
</div>
<!-- ------------------SIDE-BAR----------------------- -->
<section class="drawer" id="show_product_detalis" data-drawer-target>
<div class="drawer__overlay" data-drawer-close tabindex="-1"></div>
<div class="drawer__wrapper products_detils_60">
<div class="drawer__header">
<div class="drawer__title">Product Details</div>
<button class="drawer__close" data-drawer-close aria-label="Close Drawer"><i class="bx bxs-chevron-right"></i></button>
</div>
<div class="drawer__content">
<div id="products_detail">
<div class="products_detail">
<div class="product_detail_img_side">
<div class="product_detail_img">
<img src="https://rukminim2.flixcart.com/image/416/416/ko0d6kw0/mobile/6/h/y/iphone-12-mjnm3hn-a-apple-original-imag2k2v6ehvnzfd.jpeg?q=70" alt="" />
</div>
<div class="product_detail_btns">
<button>Add To Cart</button>
<button>BUy Now</button>
</div>
</div>
<div class="product_detail_dec">
<div class="product_detail_heading">
<h2>APPLE iPhone 12 (Purple, 64 GB)</h2>
</div>
<div class="product_detail_reviews">
<span>199 Ratings & 34 Reviews</span>
</div>
<div class="product_detail_rate">
<span>Rs. 59.999</span>
<span><s>Rs. 1200</s></span>
</div>
<div class="product_detail_decs">
<div class="product_detail_desc_heading">Description</div>
<div class="product_detail_decs_p">
<p>Protection case made of PC back + soft TPU frame + metal plate for magnetic car mount + rotatable metal ring,making it multifunctional,more touch-sensitive,scratch-resistant and anti-fingerprints than other materials,stops any dust from entering and scratching the body of phone.Screen and Camera Protection.Phone case is 1mm higher than the screen and build-in full coverage camera protection,which protect the screen and the camera from scratches and dust.Anti drop and anti slip design:The four corners are reinforced, which can effectively alleviate the collision force</p>
</div>
</div>
</div>
</div>
</div>
<div class="product_list" id="product_details_inside">
<h1>ss</h1>
</div>
</div>
</div>
</section>
<!-- ----my--cart--- -->
<section class="drawer" id="my_cart" data-drawer-target>
<div class="drawer__overlay" data-drawer-close tabindex="-1"></div>
<div class="drawer__wrapper my_cart_60">
<div class="drawer__header">
<div class="drawer__title"><span id="my_cart_items_count_a"></span> My Cart</div>
<button class="drawer__close" data-drawer-close aria-label="Close Drawer"><i class="bx bxs-chevron-right"></i></button>
</div>
<div class="drawer__content">
<div class="my_cart" id="my_cart_items">
<div class="my_cart_btns">
<a href="#"><i class="bx bx-minus-circle"></i></a>
<input type="text" disabled value="89" />
<a href="#"><i class="bx bx-plus-circle"></i></a>
<a href="#"><i class="bx bx-message-square-x"></i></a>
</div>
<div class="products my_cart_item">
<div class="img">
<img src="https://rukminim2.flixcart.com/image/416/416/kvba7bk0/computer/b/g/m/ga401ihr-hz070ts-gaming-laptop-asus-original-imag88s2xhgmuuzk.jpeg?q=70" alt="" />
</div>
<div class="pro_details">
<div class="pro_heading">Apple</div>
<div class="pro_decs"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, quo.</p></div>
<div class="pro_rates">
<span>Rs. !33</span>
<span><s>Rs.1200</s></span>
<!-- <span>60% OFF</span> -->
</div>
</div>
</div>
`
</div>
</div>
</div>
</section>
<script src="./server/database.js"></script>
<script src="./js/main.js"></script>
</body>
</html>