-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
382 lines (369 loc) · 28.4 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
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./assets/stylesheet/style.css"/>
<link rel="stylesheet" href="./assets/stylesheet/utility.css"/>
<link rel="stylesheet" href="./assets/stylesheet/form-registration.css"/>
<title>Luxura</title>
</head>
<body>
<header class="navigation-main header header header-fixed--top" id="nav-bar">
<nav class="flex--space-between fixed-width-layout">
<a href="" class="garamond-title no-hyperlink brand-logo text-color--white">LUXURA</a>
<button class="nav-button" id="menu-btn"><img src="./assets/images/icons/mobile-nav.svg" alt="" class="nav-icon" arial-label="sign up button"/></button>
<nav class="navigation-primary" id="navigation">
<ul class="nav__ul-two text-color--white ul--list-style--no-hyperlink montserrat-paragraph navigation-background--default" id="main-nav__ul">
<li><a href="#our-story" class="text-color--white" id="nav-link-item">Our Story</a></li>
<li><a href="#meet-the-team" class="text-color--white" id="main__nav-link-item">Our Team</a></li>
<li><a href="#our-services" class="text-color--white" id="main__nav-link-item">Our Services</a></li>
</ul>
</nav>
<nav class="navigation__store">
<ul class="ul--list-style--no-hyperlink navigation-store__ecomerce-cart">
<li>
<a href="">
<img src="./assets/images/icons/shopping-cart.svg" alt="" class="sign-up"/>
</a href="">
</li>
<li>
<button class="sign-up__button">
<img src="./assets/images/icons/user-login-white.svg" alt="" class="sign-up" id="sign-up-button"/>
</button>
</li>
</ul>
</nav>
</nav>
</header>
<!-- forms for registration -->
<section class="form-container display-hidden" id="form-section">
<!-- Registration From -->
<form class="form-container__section fixed-width-layout" id="registration-form">
<fieldset class="form-container__form">
<button type="button" class="form-cancle-button" id="cancel-button" aria-label="cancle button">
<i class="fa-solid fa-xmark"></i>
</button>
<h1 class="form-container-form__header garamond-title">Register</h1>
<label for="register-user-name-input" class="montserrat-paragraph">User Name:</label>
<input id="register-user-name-input" type="text" required/>
<label for="register-email-input" class="montserrat-paragraph">Email:</label>
<input id="register-email-input" type="email" required/>
<label for="register-password" class="montserrat-paragraph">Password 4-10 characters:</label>
<input id="register-password" type="password" required/>
<label class="montserrat-paragraph sign-up-label--padding-bottom" for="sign-up-as">Sign Up As</label>
<select id="form-users-choice" class="form-container-form__selection">
<option value="">Please Select an Option</option>
<option class="montserrat-paragraph">
Administrator
</option>
<option class="montserrat-paragraph">
Customer
</option>
</select>
<button type="submit" class="montserrat-paragraph our-finest-works-ul-card__btn" id="register-button">Submit</button>
<p class="montserrat-paragraph form-container__paragraph">Already have an account: <a href="#login-form" id="login-link">Login</a></p>
<section class="form-demo-section form-container__paragraph">
<h3 class="montserrat-paragraph demo-section__heading">Demo:</h3>
<p class="montserrat-paragraph">User Name: David</p>
<p class="montserrat-paragraph">Email: test123@gmail.com</p>
<p class="montserrat-paragraph">Password: 12345</p>
</section>
</fieldset>
</form>
<!-- Login From -->
<form class="form-container__section fixed-width-layout display-hidden" id="login-form">
<fieldset class="form-container__form">
<button type="button" class="form-cancle-button" id="cancel-button-login" aria-label="cancle button">
<i class="fa-solid fa-xmark"></i>
</button>
<h1 class="form-container-form__header garamond-title">Login</h1>
<label for="login-user-name-input" class="montserrat-paragraph">User Name:</label>
<input id="login-user-name-input" type="text" required/>
<label for="login-email-input" class="montserrat-paragraph">Email:</label>
<input id="login-email-input" type="email" required/>
<label for="login-password" class="montserrat-paragraph">Password 4-10 characters:</label>
<input id="login-password" type="password" required/>
<label class="montserrat-paragraph sign-up-label--padding-bottom" for="sign-up-as">Login As</label>
<select id="form-users-choice" class="form-container-form__selection">
<option value="">Please Select an Option</option>
<option class="montserrat-paragraph">
Administrator
</option>
<option class="montserrat-paragraph">
Customer
</option>
</select>
<button type="submit" class="montserrat-paragraph our-finest-works-ul-card__btn" id="login-button">Submit</button>
<p class="montserrat-paragraph form-container__paragraph">Already have an account: <a href="#registration-form" id="registration-link">Register Now</a></p>
<section class="form-demo-section form-container__paragraph">
<h3 class="montserrat-paragraph demo-section__heading">Demo:</h3>
<p class="montserrat-paragraph">User Name: David</p>
<p class="montserrat-paragraph">Email: test123@gmail.com</p>
<p class="montserrat-paragraph">Password: 12345</p>
</section>
</fieldset>
</form>
</section>
<main class="main">
<section class="hero-section" id="hero-section">
<h1 class="text-color--white garamond-title hero-section__heading">Elevate your wardrobe with Luxura Fashion</h1>
<!-- Add extra stuff like socials and navigators in the website -->
</section>
<section class="our-story two-col-grid fixed-width-layout" id="our-story">
<section class="our-story__text-section">
<h1 class="our-story-text-section__heading garamond-title">Our Story</h1>
<p class="montserrat-paragraph our-story-text-section__paragraphy text-color--dark-2">
Founded on the principles of luxury and exclusivity, Luxura Fashion is more than just a brand it’s a legacy. We believe in creating fashion that transcends trends, offering our discerning clientele timeless pieces that speak of elegance, quality, and sophistication. Each garment is a testament to our commitment to craftsmanship and our passion for the art of fashion.”
</p>
</section>
<section class="our-story__image-section">
<img src="./assets/images/home-page/why-choose-us/about-img-gallery/gigi-hadid.jpg" class="our-story__image our-story__image-1"/>
<img src="./assets/images/home-page/why-choose-us/about-img-gallery/men-in-suit.jpg" class="our-story__image our-story__image-2"/>
<img src="./assets/images/home-page/why-choose-us/about-img-gallery/holo-gram-2.jpg" class="our-story__image our-story__image-3"/>
<img src="./assets/images/home-page/why-choose-us/about-img-gallery/make-up-1.jpg" class="our-story__image our-story__image-4"/>
<img src="./assets/images/home-page/why-choose-us/about-img-gallery/makeup-photoshoot.jpg" class="our-story__image our-story__image-5"/>
</section>
<section class="our-story__text-section-two">
<h1 class="our-story-text-section__heading garamond-title">Craftsmanship</h1>
<p class="montserrat-paragraph our-story-text-section__paragraphy text-color--dark-2">
At Luxura Fashion, we take pride in our meticulous attention to detail. Our designs are brought to life by master artisans who pour their heart and soul into every stitch, ensuring that each piece is a work of art. From the selection of the finest fabrics to the intricate finishing touches, our commitment to quality is unwavering.
</p>
</section>
<section class="our-story__image-section-two">
<img src="assets/images/home-page/why-choose-us/about-img-gallery/make-up-artist.jpg" class="our-story-section-two__img our-story-section-two__img-1"/>
<img src="assets/images/home-page/why-choose-us/about-img-gallery/fashion-designer-working.jpg" class="our-story-section-two__img our-story-section-two__img-2"/>
<img src="assets/images/home-page/why-choose-us/about-img-gallery/fashion-photography-500x500.webp" class="our-story-section-two__img our-story-section-two__img-3"/>
</section>
<section class="our-story__text-section-three">
<h1 class="our-story-text-section__heading garamond-title">Our Philosophy</h1>
<p class="montserrat-paragraph our-story-text-section__paragraphy text-color--dark-2">
Luxury is not just about opulence; it’s about an experience. We strive to create an environment where our clients feel valued, indulged, and inspired. Our exclusive collections are crafted for those who appreciate the finer things in life and seek to express their individuality through fashion.
</p>
</section>
<section class="our-story__image-section-three">
<img src="assets/images/home-page/why-choose-us/about-img-gallery/pholisophy.jpg" class="our-story-section-three__img">
</section>
</section>
<div class="div--spacing"></div>
<section class="our-finest-works">
<h1 class="garamond-title fixed-width-layout our-finest-works__heading">Our Finest Works Of Art</h1>
<ul class="fixed-width-layout our-finest-works__ul ul--list-style--no-hyperlink ">
<li class="our-finest-works-ul__card">
<img src="./assets/images/home-page/our-finest-works/purple-guy-removebg-preview.png" alt="" arial-label="" class="div__image"/>
<h2 class="our-services__card-heading garamond-title">Purple Gentlemen's Tuxedo</h2>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">
From the ballroom to that high-stakes gala, the Purple Gentlemen's Tuxedo is all about elegance with a bold twist. The deep, regal purple commands attention while the tailored fit exudes confidence. Pair this with a crisp white shirt and your smoothest moves, and you're set to be the best-dressed in any room!
</p>
<a href="" class="our-finest-works-ul-card__btn montserrat-paragraph">Shop Now!</a>
</li>
<li class="our-finest-works-ul__card">
<img src="./assets/images/home-page/our-finest-works/Satin-faux-wrap-gown-removebg-preview.png" alt="" arial-label="" class="div__image"/>
<h2 class="our-services__card-heading garamond-title">Satin Faux-Wrap <br>Gown</h2>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">
The Satin Faux-Wrap Gown is pure elegance with a touch of seductive flow. This beauty wraps you up in luxury, hugging all the right curves while maintaining that chic, sophisticated look. Whether it's a red-carpet event or a moonlit evening, this gown will have you gliding through the night with effortless grace.
</p>
<a href="" class="our-finest-works-ul-card__btn montserrat-paragraph">Shop Now!</a>
</li>
<li class="our-finest-works-ul__card">
<img src="./assets/images/home-page/our-finest-works/Prince_Aristocrat_Retro_Vintage_Rococo_Medieval_18th_Century_Coat_Outfits_Suit_Trouble-removebg-preview.png" alt="" arial-label="" class="div__image"/>
<h2 class="our-services__card-heading garamond-title">Prince Aristocrat Retro</h2>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">
Step into a different era with the Prince Aristocrat Retro Vintage Rococo Suit, straight out of a royal wardrobe! Inspired by the grandeur of the 18th century, this lavish coat brings back the opulence of the Rococo era. Ideal for costume parties or simply when you're feeling a bit extra – after all, history never looked this good!
</p>
<a href="" class="our-finest-works-ul-card__btn montserrat-paragraph">Shop Now!</a>
</li>
</ul>
</section>
<div class="div--spacing"></div>
<section class="our-services fixed-width-layout" id="our-services">
<h1 class="our-services__heading garamond-title">Our Services</h1>
<ul class="our-services__ul ul--list-style--no-hyperlink">
<li class="our-services__card our-services__card-1">
<img src="./assets/images/home-page/our-services/personal-styling.webp" alt="" aria-label="" class="our-services-card__image"/>
<h1 class="our-services__card-heading garamond-title">Personal Styling</h1>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">"Why settle for off-the-rack when you can have a masterpiece crafted just for you?"</p>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">For the true connoisseurs of style, we offer bespoke tailoring that fits you like a second skin. Whether it's a luxurious tuxedo or a stunning evening gown, our tailors will take your measurements and craft a custom piece that's designed to flatter every inch. At Luxura, we don't just make clothes – we create wearable art.</p>
<a href="" class="montserrat-paragraph our-services__link">
<i class="fa-solid fa-arrow-right"></i>
Book Now!
</a>
</li>
<li class="our-services__card our-services__card-2">
<img src="./assets/images/home-page/our-services/personal-touch.jpg" alt="" aria-label="" class="our-services-card__image"/>
<h1 class="our-services__card-heading garamond-title">Custom Tailoring & Bespoke Designs</h1>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">"Why settle for off-the-rack when you can have a masterpiece crafted just for you?"</p>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">For the true connoisseurs of style, we offer bespoke tailoring that fits you like a second skin. Whether it's a luxurious tuxedo or a stunning evening gown, our tailors will take your measurements and craft a custom piece that's designed to flatter every inch. At Luxura, we don't just make clothes – we create wearable art.</p>
<a href="" class="montserrat-paragraph our-services__link">
<i class="fa-solid fa-arrow-right"></i>
Book Now!
</a>
</li>
<li class="our-services__card our-services__card-3">
<img src="./assets/images/home-page/our-services/styling-consultant.jpg" alt="" aria-label="" class="our-services-card__image"/>
<h1 class="our-services__card-heading garamond-title">Wardrobe Consultations</h1>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">"Why settle for off-the-rack when you can have a masterpiece crafted just for you?"</p>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">For the true connoisseurs of style, we offer bespoke tailoring that fits you like a second skin. Whether it's a luxurious tuxedo or a stunning evening gown, our tailors will take your measurements and craft a custom piece that's designed to flatter every inch. At Luxura, we don't just make clothes – we create wearable art.</p>
<a href="" class="montserrat-paragraph our-services__link">
<i class="fa-solid fa-arrow-right"></i>
Book Now!
</a>
</li>
<li class="our-services__card our-services__card-1">
<img src="./assets/images/home-page/our-services/makeup.jpg" alt="" aria-label="" class="our-services-card__image"/>
<h1 class="our-services__card-heading garamond-title">Makeup Artistry – Glamour in Every Brushstroke</h1>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">"Because darling, the perfect look deserves the perfect face!"</p>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">Our professional makeup artists will ensure you're red-carpet ready from head to toe. Whether it’s a soft, elegant glow or bold, dramatic flair, we craft makeup looks that highlight your best features and complement your Luxura outfit. Trust us, darling, you’ll be camera-ready in no time!</p>
<a href="" class="montserrat-paragraph our-services__link">
<i class="fa-solid fa-arrow-right"></i>
Book Now!
</a>
</li>
<li class="our-services__card our-services__card-2">
<img src="./assets/images/home-page/our-services/photography.jpg" alt="" aria-label="" class="our-services-card__image"/>
<h1 class="our-services__card-heading garamond-title">Fashion Photography – Capture Your Luxura Moment</h1>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">"Ready for your close-up? Strike a pose!"</p>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">Our photography service ensures your Luxura look is captured in all its glory. Whether it's for personal keepsakes or the 'Gram, our fashion photographers will make sure you’re immortalized in style. You’ll have your very own high-fashion photoshoot, where the only thing more stunning than the backdrop is you.</p>
<a href="" class="montserrat-paragraph our-services__link">
<i class="fa-solid fa-arrow-right"></i>
Book Now!
</a>
</li>
<li class="our-services__card our-services__card-3">
<img src="./assets/images/home-page/our-services/virtual-classes.jpg" alt="" aria-label="" class="our-services-card__image"/>
<h1 class="our-services__card-heading garamond-title">Virtual Styling for Global Clients</h1>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">"Can’t make it to our boutique? No worries – we’ll bring the style to you!"</p>
<p class="montserrat-paragraph our-services__card-para text-color--dark-2">For our fashionistas across the globe, we offer virtual styling sessions. Via video call, our expert stylists will help you select the perfect outfits, offer style tips, and even guide you through custom orders – all from the comfort of your home.</p>
<a href="" class="montserrat-paragraph our-services__link">
<i class="fa-solid fa-arrow-right"></i>
Book Now!
</a>
</li>
</ul>
<div class="div--spacing"></div>
</section>
<div class="div--spacing"></div>
<section class="team-members-section fixed-width-layout" id="meet-the-team">
<h1 class="team-members-section__heading garamond-title">Meet Your Fashion Stylist</h1>
<ul class="team-members__ul ul--list-style--no-hyperlink">
<li>
<img src="./assets/images/home-page/meet-the-team/peter.jpg" aria-label="" alt="" class="team-members-profile"/>
<h2></h2>
</li>
<li>
<img src="./assets/images/home-page/meet-the-team/michael-burrows.jpeg" aria-label="" alt="" class="team-members-profile"/>
<h2></h2>
</li>
<li>
<img src="./assets/images/home-page/meet-the-team/poppy-make-up-artist.jpg" aria-label="" alt="" class="team-members-profile"/>
<h2></h2>
</li>
<li>
<img src="./assets/images/home-page/meet-the-team/style-theorist-amy-roberts.webp" aria-label="" alt="" class="team-members-profile"/>
<h2></h2>
</li>
<li>
<img src="./assets/images/home-page/meet-the-team/style-theorist-matpat.jpg" aria-label="" alt="" class="team-members-profile"/>
<h2></h2>
</li>
<li>
<img src="./assets/images/home-page/meet-the-team/priscilla-ono-make-up-artist.webp" aria-label="" alt="" class="team-members-profile"/>
<h2></h2>
</li>
</ul>
</section>
<div class="div--spacing"></div>
<section class="testamonials-section fixed-width-layout">
<h1 class="garamond-title testamonials-section__heading">Don't take our word for it, just ask our testamonials</h1>
<ul class="testamonial-section__ul">
<li class="testamonial-section__list-item">
<h1 class="testamonial-section-list__heading montserrat-paragraph text-color--dark-2">
"I needed something unforgettable for the Met Gala. Luxura didn’t just deliver – they redefined glamour. I’ve never felt more confident and comfortable."
</h1>
<section class="testamonial-image-section">
<img src="./assets/images/home-page/testamonials/zama-mthethwa.jpg" alt="" aria-label="" class="testamonial-section-profiles"/>
</section>
<p class="testamonial-section-list__para montserrat-paragraph">Zama Mthethwa, <br>Award-Winning Actress & Style Icon</p>
</li>
</ul>
</section>
<div class="div--spacing"></div>
<section class="news-letter-section">
<form class="fixed-width-layout news-letter-section__form" id="sign-up-newsletter-form">
<label for="news-letter" class="garamond-title news-letter-section-form__label">Sign Up to our newsletter</label>
<input id="news-letter" type="email" placeholder="Email" class="news-letter-section-form__input"/>
<button type="submit" class="our-finest-works-ul-card__btn news-letter-section-form__btn">Sign Up</button>
</form>
<form class="fixed-width-layout create-news-letter-form create-news-letter-form--flex-center display-hidden" id="create-newsletter-form">
<fieldset class="form-fieldset--block">
<img src="./assets/images/login/login.jpg" class="image--resize" alt="image of a beautiful blond lady displaying makeup"/>
<section class="form-create-newsletter-section">
<h1 class="garamond-title create-form__heading">Create A News Letter</h1>
<fieldset>
<label for="news-letter-headline" class="montserrat-paragraph">HeadLine Name: </label>
<input id="news-letter-headline" class="montserrat-paragraph"/>
</fieldset>
<fieldset>
<label for="news-letter-author-name" class="montserrat-paragraph">Author Name: </label>
<input id="news-letter-author-name" class="montserrat-paragraph" />
</fieldset>
<fieldset>
<label for="news-letter-text-area" class="montserrat-paragraph">News Letter Article:</label>
<textarea id="news-letter-text-area" class="montserrat-paragraph"></textarea>
</fieldset>
<button type="submit" class="our-finest-works-ul-card__btn news-letter-section-form__btn">Submit</button>
</section>
</fieldset>
</form>
</section>
</main>
<footer class="footer">
<ul class="footer-ul fixed-width-layout">
<li class="footer-ul__item footer__luxura-logo-socials">
<a href="" class="garamond-title no-hyperlink brand-logo text-color--white footer__luxura-link">LUXURA</a>
<section aria-label="social medias" class="footer__social-links">
<a href=""><i class="fa-brands fa-x-twitter"></i></a>
<a href=""><i class="fa-brands fa-instagram"></i></a>
<a href=""><i class="fa-brands fa-youtube"></i></a>
<a href=""><i class="fa-brands fa-discord"></i></a>
</section>
</li>
<li class="footer-ul__item">
<h3 href="" class="garamond-title no-hyperlink brand-logo text-color--white footer-item__heading">Explore Luxura</h3>
<section aria-label="social medias" class="footer__main-links montserrat-paragraph">
<a href="">Home</a>
<a href="">Shop All Collections</a>
<a href="">Explore Finest Works</a>
<a href="">Exclusive Services</a>
</section>
</li>
<li class="footer-ul__item">
<h3 href="" class="garamond-title no-hyperlink brand-logo text-color--white footer-item__heading">Our Services</h3>
<section aria-label="social medias" class="footer__main-links montserrat-paragraph">
<a href="">Personal Styling</a>
<a href="">Custom Tailoring & Bespoke Designs</a>
<a href="">Makeup Artistry</a>
<a href="">Fashion Photography</a>
<a href="">Red Carpet Ready Packages</a>
</section>
</li>
<li class="footer-ul__item">
<h3 href="" class="garamond-title no-hyperlink brand-logo text-color--white footer-item__heading">Legal & Policies</h3>
<section aria-label="social medias" class="footer__main-links montserrat-paragraph">
<a href="">Privacy Policy</a>
<a href="">Terms of Service</a>
<a href="">Shipping & Returns</a>
</section>
</li>
<li class="footer-ul__item">
<h3 href="" class="garamond-title no-hyperlink brand-logo text-color--white footer-item__heading">Download Our App</h3>
<section aria-label="social medias" class="footer__main-links montserrat-paragraph">
<a href="">Privacy Policy</a>
</section>
</li>
</ul>
</footer>
<script src="./script.js"></script>
</body>
</html>