-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
273 lines (233 loc) · 13 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
<!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>TW Lively | Free Tailwindcss theme by Fyrestrap</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'Montserrat': ['Montserrat'],
'Noto-Sans': ['"Noto Sans"']
}
}
}
}
</script>
</head>
<body class="font-Noto-Sans">
<!-- Navigation -->
<nav class="bg-slate-600 border-gray-400 py-7 w-full bg-transparent absolute top-0 duration-500" id="menu-nav">
<div class="container px-4 md:px-20 flex flex-wrap justify-between items-center mx-auto">
<a href="#" class="flex items-center text-2xl font-semibold text-white">
<!-- <img src="" class="mr-3 h-6 sm:h-9" alt="Logo"> -->
Fyrestrap.
</a>
<button type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-200 rounded lg:hidden hover:bg-gray-500 mobile-menu-button">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
<div class="hidden w-full lg:block lg:w-auto" id="mobile-menu">
<ul class="flex flex-col mt-4 lg:flex-row lg:space-x-8 lg:mt-0 text-base">
<li>
<a href="./" class="block py-2 pr-4 pl-3 text-gray-100 hover:bg-gray-50/70 hover:text-white md:px-3 md:py-2 rounded-full">Home</a>
</li>
<li>
<a href="#about" class="block py-2 pr-4 pl-3 text-gray-100 hover:bg-gray-50/70 hover:text-white md:px-3 md:py-2 rounded-full">About</a>
</li>
<li>
<a href="#services" class="block py-2 pr-4 pl-3 text-gray-100 hover:bg-gray-50/70 hover:text-white md:px-3 md:py-2 rounded-full">Services</a>
</li>
<li>
<a href="#products" class="block py-2 pr-4 pl-3 text-gray-100 hover:bg-gray-50/70 hover:text-white md:px-3 md:py-2 rounded-full">Products</a>
</li>
<li>
<a href="#contact" class="block py-2 pr-4 pl-3 text-gray-100 hover:bg-gray-50/70 hover:text-white md:px-3 md:py-2 rounded-full">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="w-full h-screen bg-[url('assets/img/purple-lg.jpg')] bg-cover bg-top">
<div class="container h-full px-4 md:px-20">
<div class="flex h-full my-auto">
<div class="w-0 md:w-5/12 lg:w-1/2"></div>
<div class="w-full md:w-7/12 lg:w-1/2 bg-rose-100/70 p-10 md:pl-0 my-auto">
<div class="w-full md:border-l-8 border-gray-200 md:pl-10 text-center md:text-right">
<h1 class="font-Montserrat font-bold uppercase text-4xl md:text-5xl lg:text-7xl mb-10 text-white">Fashion.</h1>
<p class="text-base mb-10 text-grey-900">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta reprehenderit delectus quasi eligendi maiores consectetur repellat necessitatibus libero deleniti quaerat debitis, odit earum modi? Magni porro iste dolores.</p>
<button type="button" class="py-3 px-10 border-2 border-white text-base font-semibold rounded-full bg-white text-black">Read more</button>
</div>
</div>
</div>
</div>
</header>
<!-- About section -->
<section class="w-full md:flex pt-20 pb-10 md:py-0" id="about">
<div class="container px-4 md:px-20 flex m-auto">
<div class="block lg:flex">
<div class="w-full md:w-3/4 lg:w-1/2">
<img src="assets/img/yellow-bg.jpg" alt="Fashion">
</div>
<div class="w-full lg:w-1/2 text-center md:text-left flex">
<div class="p-10 my-auto lg:border-l-8 border-gray-200">
<h1 class="font-Montserrat font-bold uppercase text-4xl md:text-5xl lg:text-7xl mb-5 text-amber-500">About<span class="text-black">.</span></h1>
<h2 class="font-Montserrat font-semibold italic text-slate-400 text-xl md:text-2xl mb-10">Know about us</h2>
<p class="text-base mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, rem ut, molestiae ad quos facilis voluptas ullam maxime pariatur debitis illum vitae reiciendis officia ipsum, voluptatem exercitationem et nihil rerum porro sit alias! Asperiores ab voluptate quam! Vero, nemo id.</p>
<p class="text-base mb-14">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, rem ut, molestiae ad quos facilis voluptas ullam maxime pariatur debitis illum vitae reiciendis.</p>
<button type="button" class="py-3 px-10 border-2 border-amber-500 text-base font-semibold bg-amber-500 rounded-full text-white">Our services</button>
</div>
</div>
</div>
</div>
</section>
<!-- Services section -->
<section class="w-full md:flex pt-20 pb-10 md:py-0 bg-gray-100" id="services">
<div class="container px-4 md:px-20 flex m-auto">
<div class="block lg:flex">
<div class="w-full md:w-3/4 lg:w-1/2 md:float-right lg:order-2">
<img src="assets/img/pink-lg.jpg" alt="Fashion">
</div>
<div class="w-full lg:w-1/2 text-center md:text-right flex md:order-1">
<div class="p-10 my-auto lg:border-r-8 border-gray-300">
<h1 class="font-Montserrat font-bold uppercase text-4xl md:text-5xl lg:text-7xl mb-5 text-red-500"><span class="text-black hidden md:inline">.</span>Services<span class="text-black inline md:hidden">.</span></h1>
<h2 class="font-Montserrat font-semibold italic text-slate-400 text-xl md:text-2xl mb-10">What we do</h2>
<p class="text-base mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, rem ut, molestiae ad quos facilis voluptas ullam maxime pariatur debitis illum vitae reiciendis officia ipsum, voluptatem exercitationem et nihil rerum porro sit alias! Asperiores ab voluptate quam! Vero, nemo id.</p>
<p class="text-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, rem ut, molestiae ad quos facilis voluptas ullam maxime pariatur debitis illum vitae reiciendis officia ipsum, voluptatem exercitationem et nihil rerum porro sit alias! Asperiores ab voluptate quam! Vero, nemo id.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Products section -->
<section class="w-full md:flex py-20" id="products">
<div class="container px-4 md:px-20 flex mx-auto">
<div class="w-full md:w-3/4 text-center mx-auto">
<h1 class="font-Montserrat font-bold uppercase text-4xl md:text-5xl lg:text-7xl mb-5 text-amber-500">Products<span class="text-black">.</span></h1>
<h2 class="font-Montserrat font-semibold italic text-slate-400 text-xl md:text-2xl mb-14">We've got everything you need</h2>
<div class="block md:flex place-content-around gap-10 mb-10">
<div class="text-center mb-10">
<span class="fa-stack fa-2x text-slate-300">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-shirt fa-stack-1x fa-inverse"></i>
</span>
<h3 class="mt-5 font-semibold text-xl font-Montserrat mb-3">Dress</h3>
<p class="text-base">Lorem ipsum dolor sit amet</p>
</div>
<div class="text-center mb-10">
<span class="fa-stack fa-2x text-slate-300">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-bag-shopping fa-stack-1x fa-inverse"></i>
</span>
<h3 class="mt-5 font-semibold text-xl font-Montserrat mb-3">Bags</h3>
<p class="text-base">Molestiae adipisci voluptatem nisi</p>
</div>
<div class="text-center mb-10">
<span class="fa-stack fa-2x text-slate-300">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-hat-cowboy-side fa-stack-1x fa-inverse"></i>
</span>
<h3 class="mt-5 font-semibold text-xl font-Montserrat mb-3">Hats</h3>
<p class="text-base">Harum architecto eos iste</p>
</div>
</div>
<button type="button" class="py-3 px-10 border-2 border-amber-500 text-base font-semibold bg-amber-500 rounded-full text-white">More products</button>
</div>
</div>
</section>
<!-- Contact section -->
<section class="w-full bg-[url('assets/img/gray-2.jpg')] bg-cover bg-center py-20" id="contact">
<div class="container h-full px-4 md:px-20">
<div class="flex h-full my-auto">
<div class="w-0 md:w-5/12 lg:w-1/2"></div>
<div class="w-full md:w-7/12 lg:w-1/2 bg-slate-300/70 p-10 md:pl-0 my-auto">
<div class="w-full md:border-l-8 border-gray-200 md:pl-10 text-center md:text-right">
<h1 class="font-Montserrat font-bold uppercase text-4xl md:text-5xl lg:text-7xl mb-5 text-white">Contact.</h1>
<h2 class="font-Montserrat font-semibold italic text-slate-400 text-xl md:text-2xl mb-10">Stay in touch</h2>
<div class="md:flex justify-end mb-10 md:mb-0">
<p class="text-base md:order-last md:ml-5 md:mb-7"><i class="fas fa-envelope text-white"></i></p>
<p class="text-base"><a href="mailto:">[email protected]</a></p>
</div>
<div class="md:flex justify-end mb-10 md:mb-0">
<p class="text-base md:order-last md:ml-5 md:mb-7"><i class="fas fa-phone text-white"></i></p>
<p class="text-base">+94 745899663, +94 745566985</p>
</div>
<div class="md:flex justify-end mb-10 md:mb-0">
<p class="text-base md:order-last md:ml-5 md:mb-7"><i class="fas fa-location-dot text-white"></i></p>
<p class="text-base">100, Lorem Avenue, Lipsum City 20300, Lipsum.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="w-full py-20 bg-slate-900">
<div class="container mx-auto text-center flex pb-10">
<ul class="flex content-center gap-5 mx-auto text-gray-50">
<li>
<a href="#" class="">
<span class="fa-stack fa-xl text-slate-800">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#" class="">
<span class="fa-stack fa-xl text-slate-800">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#" class="">
<span class="fa-stack fa-xl text-slate-800">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-youtube fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#" class="">
<span class="fa-stack fa-xl text-slate-800">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
<div class="container">
<div class="w-full md:w-4/5 mx-auto block md:flex justify-between border-t-2 border-slate-800">
<p class="text-sm text-gray-500 text-center mt-5">Copyright © 2022 <a href="#">Your Company</a>. All Rights Reserved.</p>
<div class="block md:flex md:justify-end text-center md:text-right text-sm text-gray-500 gap-5 mt-5">
<a href="#" class="px-3 md:px-0">Privacy Policy</a>
<a href="#" class="px-3 md:px-0">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script>
const btn = document.querySelector("button.mobile-menu-button");
const mobMenu = document.querySelector("#mobile-menu");
const menu = document.querySelector("#menu-nav");
btn.addEventListener("click", () => {
mobMenu.classList.toggle("hidden");
menu.classList.toggle("bg-transparent");
});
</script>
</body>
</html>