-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
234 lines (215 loc) · 11.7 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header>
<div class="container">
<nav class="header">
<a href="javascript:;" class="logo">
<h3 class="mb-0">Collers</h3>
</a>
<ul class="menuList">
<li><a href="javascript:;" class="active">Products</a></li>
<li><a href="javascript:;">Solutions</a></li>
<li><a href="javascript:;">Pricing</a></li>
<li><a href="javascript:;">Resources</a></li>
<li class="ms-4 d-none d-lg-inline-block"><a href="javascript:;" class="btn-style">Sign Up Now</a></li>
</ul>
<div class="d-flex d-lg-none align-items-center" id="menuBtn">
<a href="javascript:;" class="btn-fill ms-2 ms-md-4">Sign Up</a>
<div class="hamburger ms-5" id="hamburger-11">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</nav>
</div>
</header>
<div class="overlay"></div>
<div class="slider position-relative">
<img src="images/Rectangle31.png" alt="" class="slide-bg img-fluid">
<div class="container">
<div class="row align-items-center justify-content-center justify-content-lg-between">
<div class="col-md-10 col-lg-6 col-xxl-5 order-2 order-lg-1 mt-4 mt-lg-0">
<div class="slider-text">
<h2>Collectible Sneakers</h2>
<p class="my-3 my-md-4">Sit elit feugiat turpis sed integer integer accumsan turpis. Sed suspendisse nec
lorem mauris. Pharetra, eu imperdiet ipsum ultrices amet.</p>
<div class="pt-lg-4 btn-group d-flex align-items-center">
<a href="javascript:;" class="btn-fill me-2">Sign up now</a>
<a href="javascript:;" class="btn-style ms-4"><i class="fa fa-play"></i></a><span class="ms-3">Watch
Demo</span>
</div>
</div>
</div>
<div class="col-md-10 col-lg-6 col-xxl-5 order-1 order-lg-2 text-center">
<img src="images/banner-image.png" class="img-fluid" />
</div>
</div>
</div>
</div>
<section class="section-next">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 col-xxl-3">
<div class="three-box">
<img src="images/Icon1.png" />
<img src="images/bg1.png" alt="" class="img-bg">
<h5>Cursus amet</h5>
<p>Sit bibendum donec dolor fames neque vulputate non sit aliquam. Consequat turpis natoque leo, massa. </p>
</div>
</div>
<div class="col-md-4 col-xxl-3 my-3 my-md-0">
<div class="three-box active">
<img src="images/Icon2.png" />
<img src="images/bg2.png" alt="" class="img-bg">
<h5>Ipsum fermentum</h5>
<p>Sit bibendum donec dolor fames neque vulputate non sit aliquam. Consequat turpis natoque leo, massa. </p>
</div>
</div>
<div class="col-md-4 col-xxl-3">
<div class="three-box">
<img src="images/Icon3.png" />
<img src="images/bg3.png" alt="" class="img-bg">
<h5>24/7 Customer Support</h5>
<p>Get peace of mind with our 24/7 customer support, always ready to assist you anytime you need help.</p>
</div>
</div>
</div>
</div>
</section>
<section class="best-of-best-section">
<div class="bestsection-cover position-relative">
<img src="images/r3.png" alt="" class="img-fluid rect1 position-absolute">
<img src="images/r2.png" alt="" class="img-fluid rect2 position-absolute">
<img src="images/r5.png" alt="" class="img-fluid rect3 position-absolute">
<img src="images/r4.png" alt="" class="img-fluid rect4 position-absolute">
<img src="images/r1.png" alt="" class="img-fluid rect5 position-absolute">
<div class="container">
<div class="top-heading d-flex justify-content-between align-items-center py-3">
<h2>The best of the best</h2>
<a href="#!">Sign up now</a>
</div>
<div class="row mt-4">
<div class="col-md-4 col-xxl-3">
<div class="best-boxes-cover position-relative">
<img src="images/Picture(1).png" alt="" class="img-fluid w-100">
<div class="best-content">
<h2>Title</h2>
<p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse</p>
<a href="#!"><img src="images/shopping-cart.png" alt="" class="img-fluid me-2">Buy Now</a>
</div>
</div>
</div>
<div class="col-md-4 col-xxl-3">
<div class="best-boxes-cover position-relative">
<img src="images/Picture(2).png" alt="" class="img-fluid w-100">
<div class="best-content">
<h2>Title</h2>
<p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse</p>
<a href="#!"><img src="images/shopping-cart.png" alt="" class="img-fluid me-2">Buy Now</a>
</div>
</div>
</div>
<div class="col-md-4 col-xxl-3">
<div class="best-boxes-cover position-relative">
<img src="images/Picture(3).png" alt="" class="img-fluid w-100">
<div class="best-content">
<h2>Title</h2>
<p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse</p>
<a href="#!"><img src="images/shopping-cart.png" alt="" class="img-fluid me-2">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="why-join-section py-150">
<div class="container">
<div class="why-join-cover">
<div class="row align-items-center">
<div class="col-md-6">
<div class="join-content-cover">
<h2>Why join us</h2>
<ul class="mb-3">
<li>
<p><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.486 16.7299C10.3547 16.7302 10.2247 16.7045 10.1034 16.6544C9.98204 16.6043 9.87181 16.5307 9.77899 16.4379L5.53699 12.1949C5.44141 12.1027 5.36516 11.9924 5.31266 11.8705C5.26017 11.7485 5.23249 11.6173 5.23125 11.4845C5.23 11.3517 5.25521 11.22 5.3054 11.0971C5.3556 10.9742 5.42977 10.8625 5.52359 10.7685C5.61742 10.6746 5.72902 10.6002 5.85188 10.5499C5.97474 10.4995 6.1064 10.4741 6.23918 10.4752C6.37196 10.4762 6.50319 10.5037 6.62523 10.556C6.74727 10.6083 6.85767 10.6845 6.94999 10.7799L10.485 14.3149L16.85 7.95189C17.0375 7.76425 17.2919 7.65879 17.5571 7.65869C17.8224 7.6586 18.0768 7.76389 18.2645 7.95139C18.4521 8.1389 18.5576 8.39327 18.5577 8.65854C18.5578 8.92381 18.4525 9.17825 18.265 9.36589L11.193 16.4379C11.1002 16.5307 10.9899 16.6043 10.8686 16.6544C10.7473 16.7045 10.6173 16.7302 10.486 16.7299Z"
fill="#15803D" />
</svg>
Est et in pharetra magna adipiscing ornare aliquam.</p>
</li>
<li>
<p><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.486 16.7299C10.3547 16.7302 10.2247 16.7045 10.1034 16.6544C9.98204 16.6043 9.87181 16.5307 9.77899 16.4379L5.53699 12.1949C5.44141 12.1027 5.36516 11.9924 5.31266 11.8705C5.26017 11.7485 5.23249 11.6173 5.23125 11.4845C5.23 11.3517 5.25521 11.22 5.3054 11.0971C5.3556 10.9742 5.42977 10.8625 5.52359 10.7685C5.61742 10.6746 5.72902 10.6002 5.85188 10.5499C5.97474 10.4995 6.1064 10.4741 6.23918 10.4752C6.37196 10.4762 6.50319 10.5037 6.62523 10.556C6.74727 10.6083 6.85767 10.6845 6.94999 10.7799L10.485 14.3149L16.85 7.95189C17.0375 7.76425 17.2919 7.65879 17.5571 7.65869C17.8224 7.6586 18.0768 7.76389 18.2645 7.95139C18.4521 8.1389 18.5576 8.39327 18.5577 8.65854C18.5578 8.92381 18.4525 9.17825 18.265 9.36589L11.193 16.4379C11.1002 16.5307 10.9899 16.6043 10.8686 16.6544C10.7473 16.7045 10.6173 16.7302 10.486 16.7299Z"
fill="#15803D" />
</svg>
Tellus arcu sed consequat ac velit ut eu blandit.</p>
</li>
<li>
<p><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.486 16.7299C10.3547 16.7302 10.2247 16.7045 10.1034 16.6544C9.98204 16.6043 9.87181 16.5307 9.77899 16.4379L5.53699 12.1949C5.44141 12.1027 5.36516 11.9924 5.31266 11.8705C5.26017 11.7485 5.23249 11.6173 5.23125 11.4845C5.23 11.3517 5.25521 11.22 5.3054 11.0971C5.3556 10.9742 5.42977 10.8625 5.52359 10.7685C5.61742 10.6746 5.72902 10.6002 5.85188 10.5499C5.97474 10.4995 6.1064 10.4741 6.23918 10.4752C6.37196 10.4762 6.50319 10.5037 6.62523 10.556C6.74727 10.6083 6.85767 10.6845 6.94999 10.7799L10.485 14.3149L16.85 7.95189C17.0375 7.76425 17.2919 7.65879 17.5571 7.65869C17.8224 7.6586 18.0768 7.76389 18.2645 7.95139C18.4521 8.1389 18.5576 8.39327 18.5577 8.65854C18.5578 8.92381 18.4525 9.17825 18.265 9.36589L11.193 16.4379C11.1002 16.5307 10.9899 16.6043 10.8686 16.6544C10.7473 16.7045 10.6173 16.7302 10.486 16.7299Z"
fill="#15803D" />
</svg>
Ullamcorper ornare in et egestas dolor orci.</p>
</li>
</ul>
<a href="#!" class="btn-style">Sign up now</a>
</div>
</div>
<div class="col-md-6">
<div class="join-imge-cover position-relative">
<img src="images/Deco-video.png" alt="" class="join-cover-img img-fluid">
<img src="images/Video.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(window).scroll(function () {
var scroll = $(window).scrollTop();
var screenWidth = $(window).width();
var scrollThreshold = screenWidth < 576 ? 50 : 50;
if (scroll >= scrollThreshold) {
$("header").addClass("sticky");
} else {
$("header").removeClass("sticky");
}
});
$(document).ready(function () {
$(".hamburger").click(function () {
$(this).toggleClass("is-active");
$(".menuList").css("left", "0");
$(".hamburger .line").css("background", "#fff");
$("#menuBtn a").addClass("d-none")
$(".overlay").css({ "z-index": "9999", "opacity": "1" });
$("header").css({ "background-color": "transparent", "box-shadow": "none" });
});
$(".overlay").click(function () {
$(".hamburger").toggleClass("is-active");
$(".menuList").css("left", "-250px");
$("#menuBtn a").removeClass("d-none")
$(".hamburger .line").css("background", "#078a84");
$(".overlay").css({ "z-index": "-999", "opacity": "0" });
$("header").css({ "background-color": "#F5F7F2", "box-shadow": "6px 6px 12px #dbdbdb;" });
});
});
</script>
</body>
</html>