-
Notifications
You must be signed in to change notification settings - Fork 0
/
shop.html
194 lines (186 loc) · 10.2 KB
/
shop.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Odor E-commerce Store</title>
<!-- font awesome -->
<link href="assets/v6.5.2/css/all.min.css" rel="stylesheet">
<!-- bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- css -->
<link href="assets/css/style.min.css" rel="stylesheet">
<!-- animate css -->
<link href="assets/css/animate.min.css" rel="stylesheet">
</head>
<body>
<!-- navbar start -->
<nav class="navbar navbar-expand-md" id="nav">
<div class="container mt-2">
<a class="navbar-brand fs-3" href="index.html"><img src="assets/images/logo/logo.svg" alt="logo"></a>
<button id="navbar-toggler" class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false"
aria-label="Toggle navigation">
<span><i class="fa-solid fa-bars fs-1"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<div class="container" id="search-input">
<form class="d-flex mt-lg-0 mt-3" role="search">
<i class="fa-solid fa-magnifying-glass"></i>
<input class="form-control me-2" type="search" placeholder="Search...." aria-label="Search">
</form>
</div>
<div class="ml-md-auto mt-lg-0 mb-lg-0 mt-3 mb-2">
<a href="signup.html" id="sign-login" class="d-flex align-items-center justify-content-center">
<i class="fas fa-user"></i>Login/Sign
</a>
</div>
</div>
</div>
</nav>
<nav class="container mt-3 mb-3">
<ul class="navbar-nav d-flex align-items-center justify-content-center flex-row gap-4">
<li class="nav-item">
<a class="nav-link py-1 px-2 rounded-2" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 px-2 rounded-2" href="product-list.html">Product List</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 px-2 rounded-2" href="contact-us.html">Contact Us</a>
</li>
</ul>
</nav>
<!-- navbar end -->
<!-- shop cart start here -->
<div class="container mt-5 mb-5">
<div class="row d-flex justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="row">
<div class="col-md-6">
<div class="images p-3">
<div class="text-center p-4"> <img id="main-image" src="https://i.imgur.com/Dhebu4F.jpg"
width="250" /> </div>
<div class="thumbnail text-center"> <img onclick="change_image(this)"
src="https://i.imgur.com/Rx7uKd0.jpg" width="70"> <img
onclick="change_image(this)" src="https://i.imgur.com/Dhebu4F.jpg" width="70">
</div>
</div>
</div>
<div class="col-md-6">
<div class="product p-4">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center"> <i class="fa fa-long-arrow-left"></i> <span
class="ml-1">Back</span> </div> <i
class="fa fa-shopping-cart text-muted"></i>
</div>
<div class="mt-4 mb-3"> <span class="text-uppercase text-muted brand">Orianz</span>
<h5 class="text-uppercase">Men's slim fit t-shirt</h5>
<div class="price d-flex flex-row align-items-center"> <span
class="act-price">$20</span>
<div class="ml-2"> <small class="dis-price">$59</small> <span>40% OFF</span>
</div>
</div>
</div>
<p class="about">Shop from a wide range of t-shirt from orianz. Pefect for your everyday
use, you could pair it with a stylish pair of jeans or trousers complete the look.
</p>
<div class="sizes mt-5">
<h6 class="text-uppercase">Size</h6> <label class="radio"> <input type="radio"
name="size" value="S" checked> <span>S</span> </label> <label class="radio">
<input type="radio" name="size" value="M"> <span>M</span> </label> <label
class="radio"> <input type="radio" name="size" value="L"> <span>L</span>
</label> <label class="radio"> <input type="radio" name="size" value="XL">
<span>XL</span> </label> <label class="radio"> <input type="radio" name="size"
value="XXL"> <span>XXL</span> </label>
</div>
<div class="cart mt-4 align-items-center"> <button
class="btn btn-danger text-uppercase mr-2 px-4">Add to cart</button> <i
class="fa fa-heart text-muted"></i> <i class="fa fa-share-alt text-muted"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- shop cart end here -->
<!-- footer section start -->
<div class="container-fluid bg-black">
<div class="container mt-5">
<div class="row" id="footer-1-row">
<div class="col-lg-3 col-md-6 mt-lg-5 mt-3 mb-2 mb-lg-5">
<div class="text-white">
<h5>Customer Services</h5>
</div>
<div class="footer-elements text-white mt-4">
<ul>
<li><a href="contact-us.html"><i class="fa-regular fa-circle me-2"></i>Contact Us</a></li>
<li><a href="signup.html"><i class="fa-regular fa-circle me-2"></i>Registration</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-lg-5 mt-3 mb-2 mb-lg-5">
<div class="text-white">
<h5>Get To Know Us</h5>
</div>
<div class="footer-elements text-white mt-4">
<ul>
<li><a href="contact-us.html"><i class="fa-regular fa-circle me-2"></i>Contact Us</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-lg-5 mt-3 mb-lg-5">
<div class="text-white">
<h5>Vapes New Collections</h5>
</div>
<div class="footer-elements text-white mt-4">
<ul>
<li><a href="#"><i class="fa-regular fa-circle me-2"></i>T-Shirts</a></li>
<li><a href="#"><i class="fa-regular fa-circle me-2"></i>Pants</a></li>
<li><a href="#"><i class="fa-regular fa-circle me-2"></i>Jackets</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-lg-5 mt-3 mb-lg-5 mb-3">
<div class="text-white">
<h5>Get Newsletter</h5>
</div>
<div class="subscribe mt-3">
<input type="email" placeholder="Your Email">
<button><i class="fa-solid fa-paper-plane"></i></button>
</div>
<div class="social-icons mt-4">
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
</div>
<div class="row mt-5 mb-lg-5 mb-2">
<div class="col-lg-4 d-flex align-items-center justify-content-center">
<a href="index.html">
<img src="assets/images/logo/logo.svg" alt="logo">
</a>
</div>
<div class="col-lg-4 d-flex align-items-center justify-content-center" id="footer-para">
<p>© Copyright 2024<a href="index.html"> Odor </a>All Rights Reserved</p>
</div>
<div class="col-lg-4 d-flex align-items-center justify-content-center gap-3" id="payment-icons">
<a href="#"><img src="assets/icons/paypal.svg" width="30px" height="auto" alt="paypal"></a>
<a href="#"><img src="assets/icons/mastercard.svg" width="30px" height="auto" alt="mastercard"></a>
<a href="#"><img src="assets/icons/discover.svg" width="70px" height="auto" alt="discover"></a>
<a href="#"><img src="assets/icons/visa (1).svg" width="50px" height="auto" alt="visa"></a>
</div>
</div>
</div>
</div>
<!-- footer section end -->
<!-- bootstrap js -->
<script src="assets/js/javascript.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>