-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
351 lines (347 loc) · 22.9 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
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
<!DOCTYPE HTML>
<html>
<head>
<title> Pet Style </title>
<link href="assets/css/style.css" rel="stylesheet">
<meta charset="utf-8">
<!-- SEO -->
<meta name="description" content="Pet Style Fashion">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="authors" content="Diether Marcelo">
<meta name="robots" content="follow">
<link rel="icon" type="image/x-icon" href="./assets/img/favicon.png">
</head>
<body>
<div class="none" id="work-in-progress-root">
<div class="work-in-progress-container fixed flex">
<div class="background absolute"></div>
<div class="work-in-progress-modal p-3 relative overflow-hidden">
<p>
Currently work in progress...
</p>
<button class="px-3 mt-2 mx-auto py-1"> Close </button>
<img src="./assets/img/Big-paw-05.png" alt="" class="absolute paw paw-1">
<img src="./assets/img/Small-Paw-05.png" alt="" class="absolute paw paw-2">
</div>
</div>
</div>
<header>
<div class="burger-container inline-block md-none">
<div class="burger-nav">
<button class="burger-icon"> <img src="./assets/img/Burger-menu.png" alt=""> </button>
<div class="nav-items-container mobile-nav absolute none">
<div class="absolute close p-2">
<img src="./assets/img/Close.png" alt="">
</div>
<nav class="flex-column flex pt-5">
<a href="#landing" class="nav-items py-2 text-center"> Home</a>
<a href="#about" class="nav-items py-2 text-center"> About</a>
<a href="#trendings" class="nav-items py-2 text-center"> Shop</a>
<a href="#newsletter" class="nav-items py-2 text-center"> Contact Us</a>
</nav>
</div>
</div>
</div>
<div id="nav-icon-down" class="absolute">
<img src="./assets/img/Dropdown.png" alt="">
</div>
<div class="none md-block desktop-nav">
<div class="container flex flex-between">
<nav>
<a href="#landing" class="nav-items"> Home</a>
<a href="#about" class="nav-items"> About</a>
<a href="#trendings" class="nav-items"> Shop</a>
<a href="#newsletter" class="nav-items"> Contact Us</a>
</nav>
<div class="none md-inline-block">
<div id="search-bar" class="flex gap-1 flex-align-center ">
<input type="text" id="search-input"/>
<img src="./assets/img/Search.png" id="search-icon">
</div>
</div>
</div>
</div>
</header>
<section id="landing" class="main-sections">
<div class="container">
<div class="row gap-3 flex-center" id="landing-container">
<div id="landing-title" class="col-lg mb-auto">
<h1 class="font-xxl"> Pet Style </h1>
<p class="bold"> For your cats & dogs </p>
<div id="landing-title-images" class="flex">
<img src="./assets/img/Brown-Cloth-Landing.png" alt="Brown Cloth Fashion" class="img-responsive brown-cloth">
<img src="./assets/img/Blue-Cloth-Landing.png" alt="Blue Cloth Fashion" class="img-responsive blue-cloth">
</div>
</div>
<div id="landing-image" class="col-lg">
<img src="./assets/img/Landing-Dog.jpg" alt="Landing Dog Fashion" class="img-responsive"/>
</div>
<div id="landing-content" class="col-lg">
<div class="paws flex flex-end pb-3 gap-1">
<img src="./assets/img/Small-Paw-1.png" alt="Paws" class="mb-auto">
<img src="./assets/img/Big-Paw-01.png" alt="Paws">
</div>
<h2> The trends <span> #01 </span></h2>
<p> A growing collection of on trend clothes and accessories for your pets as they step on the spotlight for every special occasion or even just on the daily! </p>
<button class="work-in-progress"> Shop here </button>
</div>
</div>
</div>
</section>
<section id="about" class="main-sections relative">
<div class="container relative">
<hr class="ml-0 small-hr">
<div id="company" class="flex flex-between flex-wrap">
<h1 class="font-xl sm-font-rg text-uppercase"> About <br/> the company </h1>
<img src="./assets/img/Dropdown.png" class="mt-auto pt-3"/>
</div>
<p class="text-justify pt-2 pb-10"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="paws flex gap-2 absolute">
<img src="./assets/img/Small-paw.png" alt="Paws" class="mt-auto">
<img src="./assets/img/Big-paw.png" alt="Paws">
</div>
</section>
<section id="trendings" class="main-sections relative">
<div class="paws">
<img src="./assets/img/Big-paw-05.png" alt="" class="absolute big-paw">
<img src="./assets/img/Small-paw-05.png" alt="" class="absolute small-paw">
</div>
<div class="container">
<div class="title text-center py-5">
<div class="inline-block">
<hr class="small-hr">
<h1 class="text-uppercase font-xl sm-font-rg text-center"> Our Trending Styles </h1>
</div>
</div>
<div class="content flex flex-wrap">
<div class="row">
<div class="col-12 col-sm-6 py-2 sm-py-5 trend-dog-container sm-px-2 md-px-5">
<div class="trend-dog">
<div class="relative image-container">
<!-- <img src="./assets/img/Half-Frame.png" alt="" class="half-frame absolute"> -->
<img src="./assets/img/Dog-01.png" alt="Trending Dog Fashion 1" class="img-main img-responsive">
</div>
<h2> Casual Style </h2>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt </p>
</div>
</div>
<div class="col-12 col-sm-6 py-2 sm-py-5 trend-dog-container sm-px-2 md-px-5">
<div class="trend-dog">
<div class="relative image-container">
<!-- <img src="./assets/img/Half-Frame.png" alt="" class="half-frame absolute"> -->
<img src="./assets/img/Dog-02.png" alt="Trending Dog Fashion 2" class="img-main img-responsive">
</div>
<h2> Street Style </h2>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt </p>
</div>
</div>
<div class="col-12 col-sm-6 py-2 sm-py-5 trend-dog-container sm-px-2 md-px-5">
<div class="trend-dog">
<div class="relative image-container">
<!-- <img src="./assets/img/Half-Frame.png" alt="" class="half-frame absolute"> -->
<img src="./assets/img/Dog-03.png" alt="Trending Dog Fashion 3" class="img-main img-responsive">
</div>
<h2> Classic Style </h2>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt </p>
</div>
</div>
<div class="col-12 col-sm-6 py-2 sm-py-5 trend-dog-container sm-px-2 md-px-5">
<div class="trend-dog">
<div class="relative image-container">
<!-- <img src="./assets/img/Half-Frame.png" alt="" class="half-frame absolute"> -->
<img src="./assets/img/Dog-04.png" alt="Trending Dog Fashion 4" class="img-main img-responsive">
</div>
<h2> Summer Style </h2>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt </p>
</div>
</div>
</div>
</div>
<div class="learn-more text-center py-5">
<img src="./assets/img/Down-icon.png" alt="" class="relative down-icon">
<p class="my-0 relative work-in-progress">
Learn more about our products
</p>
</div>
</div>
</section>
<section id="good" class="main-sections relative">
<div class="container">
<div class="row flex-align-center">
<div class="col-12 col-md-6">
<div id="content">
<h1 class="text-justify font-xl sm-font-rg text-uppercase"> Look Good, <br/> Feel Good! </h1>
<p class="text-justify pt-3"> A growing collection of on trend clothes and accessories for your pets as they step on the spotlight for every special occasion or even just on the daily! </p>
</div>
</div>
<div class="col-12 col-md-6 relative">
<div class="main-img px-3">
<img src="./assets/img/Dog-Good.jpg" alt="Good Dog" class="img-responsive">
<div class="clothes absolute flex">
<img src="./assets//img/Brown-Cloth-Good.png" alt="Brown Cloth" class="white-cloth">
<img src="./assets/img/Blue-Cloth-Good.png" alt="White Cloth" class="blue-cloth">
</div>
</div>
</div>
</div>
</div>
</section>
<section id="faqs" class="main-sections relative">
<div class="quotations absolute" id="open-quotation">
<img src="./assets/img/Quote-01.png" alt="" class="md-big-quotations small-quotations">
</div>
<div class="paws">
<img id="first-paw" src="./assets/img/Paw-Combo-01.png" class="block absolute" alt="">
</div>
<div class="container" id="main-content">
<div class="heading">
<hr class="small-hr ml-0">
<h1 class="font-xl sm-font-rg text-uppercase"> Frequently Asked Questions </h1>
</div>
<div class="faqs">
<div class="row flex-wrap">
<div class="faq-container col-md-4 px-2 py-3">
<div class="question bold">Lorem ipsum dolor sit amet, </div>
<div class="answer text-justify font-light-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </div>
</div>
<div class="faq-container col-md-4 px-2 py-3">
<div class="question bold">Lorem ipsum dolor sit amet, </div>
<div class="answer text-justify font-light-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </div>
</div>
<div class="faq-container col-md-4 px-2 py-3">
<div class="question bold">Lorem ipsum dolor sit amet, </div>
<div class="answer text-justify font-light-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </div>
</div>
<div class="faq-container col-md-4 px-2 py-3">
<div class="question bold">Lorem ipsum dolor sit amet, </div>
<div class="answer text-justify font-light-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </div>
</div>
<div class="faq-container col-md-4 px-2 py-3">
<div class="question bold">Lorem ipsum dolor sit amet, </div>
<div class="answer text-justify font-light-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </div>
</div>
<div class="faq-container col-md-4 px-2 py-3">
<div class="question bold">Lorem ipsum dolor sit amet, </div>
<div class="answer text-justify font-light-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </div>
</div>
</div>
</div>
</div>
<div class="paws">
<img id="second-paw" src="./assets/img/Paw-Combo-02.png" class="block absolute" alt="">
</div>
</section>
<section id="testimonials" class="main-sections">
<div class="container">
<div class="heading pb-3">
<hr class="small-hr mr-0">
<h1 class="font-xl sm-font-rg text-right text-uppercase"> Testimonials </h1>
</div>
<div class="row flex-wrap flex-center">
<div class="col-md-4 testimonial px-3 pt-2">
<p class="testimony text-justify">
Lorem ipsum dolor sit amet, conse cte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>
<span class="author bold block text-right"> -DEC CENA </span>
</div>
<div class="col-md-4 testimonial px-3 pt-2">
<p class="testimony text-justify">
Lorem ipsum dolor sit amet, conse cte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>
<span class="author bold block text-right"> -PEARL HARBO </span>
</div>
<div class="col-md-4 testimonial px-3 pt-2">
<p class="testimony text-justify">
Lorem ipsum dolor sit amet, conse cte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>
<span class="author bold block text-right"> -RICA NYPPS </span>
</div>
<div class="col-md-4 testimonial px-3 pt-2">
<p class="testimony text-justify">
Lorem ipsum dolor sit amet, conse cte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>
<span class="author bold block text-right"> -LUCA RETTE </span>
</div>
<div class="col-md-4 testimonial px-3 pt-2">
<p class="testimony text-justify">
Lorem ipsum dolor sit amet, conse cte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>
<span class="author bold block text-right"> -BARD AGLE </span>
</div>
</div>
<div class="quotations relative pt-10 text-right" id="close-quotation">
<div class="paws">
<img id="third-paw" src="./assets/img/Paw-Combo-03.png" class="block absolute" alt="">
</div>
<img src="./assets/img/Quote-02.png" class="md-big-quotations small-quotations" alt="">
</div>
</div>
</section>
<section id="newsletter" class="main-sections relative">
<div class="paws">
<img src="./assets/img/Big-paw-04.png" alt="" class="absolute big-paw">
<img src="./assets/img/Small-paw-04.png" alt="" class="absolute small-paw">
</div>
<div class="container">
<h1 class="font-xl sm-font-rg text-uppercase"> Subscribe to our newsletter </h1>
<p class="text-center md-font-rg"> Stay on trend and be the first in the know. </p>
<div class="forms">
<input class="block my-3 mx-auto px-5 py-1 sm-only-below-w-100 text-center" type="email" placeholder="Enter your email address">
<button class="block p-1 my-3 px-3 mx-auto work-in-progress">Submit</button>
</div>
</div>
</section>
<footer class="py-5 relative">
<div class="dropdown absolute">
<img src="./assets/img/Dropdown-03.png" alt="">
</div>
<div class="container">
<hr>
<div class="row flex-align-start pt-5">
<div id="company" class="footer-nav col-12 text-center col-md-3">
<h3 class="text-uppercase"> The Company </h3>
<ul>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> New Designs </a></li>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> Weekly Insights </a></li>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> Collaborations </a></li>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> Stay in the Loop </a></li>
</ul>
</div>
<div id="team" class="footer-nav col-12 text-center col-md-3">
<h3 class="text-uppercase"> The Team </h3>
<ul>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> Meet the Team </a></li>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> Our Designers </a></li>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> The Principals </a></li>
</ul>
</div>
<div id="fashion" class="footer-nav col-12 text-center col-md-3">
<h3 class="text-uppercase"> Our Fashion </h3>
<ul>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> International Research </a></li>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> Digital Solutions </a></li>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> Innovations </a></li>
</ul>
</div>
<div id="legal" class="footer-nav col-12 text-center col-md-3">
<h3 class="text-uppercase"> Legal </h3>
<ul>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> Terms and Conditions </a></li>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> Privacy Policy </a></li>
<li class="pt-1"> <a class="font-light-gray work-in-progress" href="#"> Sitemap </a></li>
</ul>
</div>
</div>
<div class="copyright text-center py-3 bold mt-5">
<span class="year bold"> 1999 </span> © Pet Style. All Rights Reserved.
</div>
</div>
</footer>
<div class="credits">
<a href="http://www.freepik.com" target="_blank">Designed by Freepik</a>
</div>
<script src="./assets/js/script.js"> </script>
</body>
</html>