-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
384 lines (382 loc) · 14.1 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
383
384
<!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>Home - Mary Kay</title>
<!-- stylesheet -->
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- nav start -->
<nav class="nav" id="nav">
<div class="nav__container row">
<!-- shop btn start -->
<a href="#" class="btn shop-btn row nav-btn">
<div class="img-box center-item transition">
<img src="./icons/shopping-cart.svg" alt="error" />
</div>
<div class="hover-btn transition">SHOP</div>
</a>
<!-- shop btn end -->
<a class="btn logo-btn" id="logo__btn" style="cursor: pointer">
<img src="./icons/logo.svg" alt="error" class="logo transition" />
</a>
<!-- hamb start -->
<a class="hamb__btn hover-btn nav-btn" id="hamb__btn">MENU</a>
<!-- hamb end -->
</div>
</nav>
<!-- nav end -->
<!-- hamb menu start -->
<div class="hamb__menu center-item" id="hamb__menu">
<a class="btn hover-btn close-btn" id="close-btn">CLOSE</a>
<div class="hamb-links start-item">
<p class="paragraph">MENU</p>
<a href="#" class="btn hover-btn hamb-btn">Home</a>
<a href="#" class="btn hover-btn hamb-btn">About</a>
<a href="#" class="btn hover-btn hamb-btn">Product</a>
<a href="#" class="btn hover-btn hamb-btn">Gallery</a>
<a href="#" class="btn hover-btn hamb-btn">Contact</a>
</div>
<div class="hamb-links-two start-item">
<p class="paragraph">SUPPORT</p>
<a href="#" class="btn hover-btn hamb-btn-two">TERMS & CONDITIONS</a>
<a href="#" class="btn hover-btn hamb-btn-two">PRIVACY POLICIES</a>
<a href="#" class="btn hover-btn hamb-btn-two">LEGAL MENTIONS</a>
</div>
<p class="paragraph dev-p">
Devlop by :
<span
><a
href="https://github.com/MAGGIx1404"
target="blank"
class="btn hover-btn"
>MAGGI</a
></span
>
</p>
</div>
<!-- hamb menu end -->
<!-- wrapper start -->
<div class="wrapper" id="wrapper">
<!-- scroll container start -->
<div class="scroll__container" id="scroll__container">
<!-- banner start -->
<div
class="banner section center-item full-size"
id="banner"
data-scroll-section
>
<!-- bg container start -->
<div class="bg-container full-size">
<div
class="parallax-container full-size"
data-scroll
data-scroll-delay="1"
data-scroll-speed="-6"
style="background: url(./images/banner.jpg) no-repeat"
></div>
</div>
<!-- bg container end -->
<h1 class="title">MARY KAY</h1>
</div>
<!-- banner end -->
<!-- about start -->
<div
class="about section full-size pad-section"
id="about"
data-scroll-section
>
<div class="container full-size center-item">
<div class="text-box">
<h6 class="sub-title">
WE'LL SHOW YOU <span>08</span> METHODS TO IMPROVE :
</h6>
</div>
<div class="text-box">
<h1 class="title-2">Smooth Hair</h1>
</div>
<div class="text-box">
<h1 class="title-2 flex">
Heals
<div class="center-item">
<img src="./images/line-1.jpg" alt="error" />
</div>
Derms
</h1>
</div>
<div class="text-box">
<h1 class="title-2 flex">
<div class="center-item">
<img src="./images/line-2.jpg" alt="error" />
</div>
Natural Peeling
</h1>
</div>
<div class="text-box">
<h1 class="title-2 flex">
Nails Ressurection
<div class="center-item">
<img src="./images/line-3.jpg" alt="error" />
</div>
</h1>
</div>
<div class="text-box">
<h1 class="title-2 flex">
Reducing
<div class="center-item">
<img src="./images/line-4.jpg" alt="error" />
</div>
FaceLines
</h1>
</div>
<div class="text-box">
<h1 class="title-2 flex">
Faster Growth
<div class="center-item">
<img src="./images/line-5.jpg" alt="error" />
</div>
</h1>
</div>
<div class="text-box">
<h1 class="title-2 flex">Healther Skin</h1>
</div>
</div>
</div>
<!-- about end -->
<!-- intro start -->
<div
class="intro section full-size center-item"
id="intro"
data-scroll-section
>
<div class="mini-container full-size flex">
<div class="intro-content full-size center-item">
<p class="paragraph p1">
Aligning products of extreme quality with the goal of bringing a
result never dreamed of. Mary Kay trusts in the power of beauty,
which is why we exist. We aim to bring facial, hair and body
products with the divine quality of the Gods. Always aiming for
exclusivity in packaging, service, and of course, in Divine
quality.
</p>
<div class="text-box row">
<p class="paragraph">THAT'S WHY:</p>
<p class="paragraph">We create special products.</p>
</div>
<div class="text-box row">
<p class="paragraph">WE ALWAYS:</p>
<p class="paragraph">Take care about every details.</p>
</div>
<div class="text-box row">
<p class="paragraph">FOR WHO:</p>
<p class="paragraph">Who always desire be beautiful.</p>
</div>
<div
class="text-box parallax-box"
data-scroll
data-scroll-speed="1"
data-scroll-delay="0.5"
>
<h1 class="title-2">
Our oath, <br />
You beautiful
</h1>
</div>
</div>
<div class="intro-pic full-size center-item">
<div class="img-box">
<img src="./images/intro.jpg" alt="error" />
</div>
<div class="bg-container"></div>
</div>
</div>
</div>
<!-- intro end -->
<!-- news start -->
<div
class="news section full-size center-item"
id="news"
data-scroll-section
>
<!-- bg start -->
<div class="bg-container full-size">
<div
class="parallax-container full-size"
data-scroll
data-scroll-speed="0.5"
data-scroll-delay="0.5"
style="background: url(./images/line-6.jpg) no-repeat"
></div>
</div>
<!-- bg end -->
<!-- img start -->
<div class="mini-container full-size center-item">
<div class="img-box">
<img src="./images/banner.jpg" alt="error" />
</div>
</div>
<!-- img end -->
<div class="text-box">
<h1 class="title">We are Mary Kay, Exclusively Premium.</h1>
</div>
</div>
<!-- news end -->
<!-- challenge start -->
<div
class="challange section center-item"
id="challanges"
data-scroll-section
>
<div class="container full-size center-item">
<h1 class="title-3">
“Mary Kay, we are <br />
welcoming challenges to foster <br />our beauty. People inspire us
<br />
and we want to inspire <br />
them too.”
</h1>
</div>
</div>
<!-- challenge end -->
<!-- contact start -->
<div class="contact section flex" id="contact" data-scroll-section>
<div class="left-contact center-item">
<p class="paragraph">BE CONNECTED</p>
<h4 class="sub-title">
Join our newsletter and be informed of our news and exceptional
sales.
</h4>
<form action="#" class="form-sub center-item">
<input
type="email"
name="email"
id="email"
placeholder="Email"
required
/>
<input type="submit" value="Subcribe" class="submit-btn" />
</form>
</div>
<div class="right-contact center-item">
<h1 class="title-3">2020</h1>
<h1 class="title-3">SHARE US</h1>
<h1 class="title-3">FOLLOW US</h1>
<h1 class="title-3">CONNECT</h1>
<h1 class="title-3">TODAY</h1>
<div class="img-box center-item">
<img src="./images/banner.jpg" alt="error" />
</div>
</div>
</div>
<!-- contact end -->
<!-- oth start -->
<div
class="oth section full-size pad-section"
id="oth"
data-scroll-section
>
<div class="mini-container center-item full-size">
<p class="paragraph p-one">OUR OATH AND PHILOSOPHY</p>
<h1 class="title-2">Mary Kay</h1>
<div class="oth-content row">
<div class="left-oth full-size center-item">
<p class="paragraph thin-p">
INNOVATION, CREATIVITY, AND SOCIAL COMMITMENT ARE OUR GREATEST
VALUES. PROFESSIONALISM AND THE SCIENCE THAT EVERY DAY IS A
NEW DAY TO SURPRISE EVERYONE AND EVERYTHING. WE VALUE THE
ETHICS OF MEETING ALL THE EXPECTATIONS OF EACH CUSTOMER WHO
TRUSTS IN OUR SERIOUS AND HARD WORK.
</p>
<p class="paragraph">
Provide unique experiences for everyone involved with a brand.
A trip without time, igniting a flame of enthusiasm and
curiosity for each one. Be striking, unique, and
extraordinary. Providing benefits for beauty, and at the same
time, fun with our unique way of being. Our greatest mission
is required according to our ideals
</p>
</div>
<div class="right-oth full-size center-item">
<p class="paragraph">
We are not just a brand of nutritional cosmetics, cosmetics,
and cosmetics, we are a company of excellence in the
international market for processing and marketing high-quality
products and continuing to expand in the market in which we
operate.
</p>
<p class="paragraph">
With a commitment to the continuous improvement of its
products and sustainable development and profitability in its
business. Encouraging our customers engaged in our lifestyle,
participating in causes, sending life rewards those who sow or
well. Taking care of our planet, with products that are less
and less harmful to the environment, because our castle is our
land.
</p>
</div>
</div>
<a href="#" class="btn center-item" data-name="ABOUT US">
<span>ABOUT US</span>
</a>
</div>
</div>
<!-- oth end -->
<!-- footer start -->
<footer
class="footer section full-size center-item"
id="footer"
data-scroll-section
>
<div class="mini-container full-size flex">
<div class="left-foot">
<p class="paragraph">WELCOME TO OUR WORLD</p>
<h1 class="title-2">MARY KAY</h1>
<div class="footer-links row">
<div class="left-links">
<p class="paragraph p-one">MENU</p>
<a href="#" class="btn hover-btn">Home</a>
<a href="#" class="btn hover-btn">About</a>
<a href="#" class="btn hover-btn">Products</a>
<a href="#" class="btn hover-btn">Gallery</a>
<a href="#" class="btn hover-btn">Contact</a>
</div>
<div class="right-links">
<p class="paragraph p-one">SUPPORT</p>
<a href="#" class="btn hover-btn">Terms & Conditions</a>
<a href="#" class="btn hover-btn">Privacy Policy</a>
<a href="#" class="btn hover-btn">Legal Mention</a>
</div>
</div>
</div>
<div class="right-foot">
<p class="paragraph">
Provide unique experiences for everyone involved with a brand. A
trip without time, igniting a flame of enthusiasm and curiosity
for each one.
</p>
<p class="paragraph p-one">
Develop by :
<span
><a
href="https://github.com/MAGGIx1404"
target="blank"
class="btn hover-btn"
>MAGGI</a
></span
>
</p>
</div>
</div>
</footer>
<!-- footer end -->
</div>
<!-- scroll container end -->
</div>
<!-- wrapper end -->
<!-- script -->
<script src="./javascript/index.js"></script>
</body>
</html>