-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
214 lines (192 loc) · 13.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
<!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">
<link rel="stylesheet" href="./css/main.css">
<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:ital,wght@0,200;0,500;0,600;0,700;0,900;1,100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<title>Luma</title>
</head>
<body>
<header class="container relative">
<nav class="flex justify-between py-6 items-center">
<ul class="flex gap-[32px] lg:hidden">
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">SUPPLEMENT</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">LASER</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">REVIEWS</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">JOURNAL</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">ABOUT </a></li>
</ul>
<img class="flex flex-1 max-w-[150px] px-[15px]" src="img/logo.svg" alt="">
<img class="hidden lg:block max-w-[150px] menu" src="img/menu.svg" alt="">
<ul class="flex gap-[32px] lg:hidden">
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">HELP & SUPPORT</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">ACTIVATE</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">ACCOUNT</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">BUY</a></li>
</ul>
</nav>
</header>
<div class="modal">
<ul class="flex flex-col justify-center items-center gap-5 ">
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">SUPPLEMENT</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">LASER</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">REVIEWS</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">JOURNAL</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">ABOUT </a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">HELP & SUPPORT</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">ACTIVATE</a></li>
<li><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase" href="#">ACCOUNT</a></li>
<li class="pb-[15px]"><a class="opacity-30 hover:opacity-100 text-[14px] transition-all uppercase " href="#">BUY</a></li>
</ul>
</div>
<section class="bg-[url(/img/hero-img.jpg)] min-h-screen bg-cover grid place-items-center gap-[10px]">
<div class="grid place-items-center text-center px-[10px]">
<h1 class="rob text-white text-[57px] leading-[67px] md:text-[37px] md:leading-[47px]">
THE FUTURE OF WELLNESS.
</h1>
<p class="text-base leading-4 mt-[33px] mb-[60px] text-white">
The perfect balance of science, nature and technology. Prepare to look and feel your absolute best.
</p>
<div class="flex gap-7 md:flex-col">
<a class="w-[215px] text-white text-center items-center py-[10px] border-2 border-white hover:bg-white hover:text-black anim-tran" href="#">SUPPLEMENT</a>
<a class="w-[215px] text-white text-center items-center py-[10px] border-2 border-white hover:bg-white hover:text-black anim-tran" href="#">LASER</a>
</div>
</div>
</section>
<section class="my-[10px]">
<div class="grid grid__cont">
<div class="bg-[url(/img/first-woman.jpg)] min-h-[500px] items-center bg-no-repeat h-full flex flex-col justify-end">
<h2 class="text-white rob text-[32px]">
Supplement.
</h2>
<h4 class="my-[13px] text-base leading-6 text-white ">
Nine powerful ingredients.
</h4>
<h4 class="text-base leading-6 text-white ">
One ultimate formula.
</h4>
<div class="flex gap-[60px] py-[25px]">
<a class="text-[14px] font-light hover:underline text-white uppercase tracking-widest" href="#">discover</a>
<a class="text-[14px] font-light hover:underline text-white uppercase tracking-widest" href="#">buy</a>
</div>
</div>
<div class="bg-[url(/img/second-woman.jpg)] min-h-[500px] items-center bg-no-repeat h-full flex flex-col justify-end">
<h2 class="text-white rob text-[32px]">
Laser.
</h2>
<h4 class="my-[13px] text-base leading-6 text-white ">
Ultimate skin regeneration.
</h4>
<h4 class="text-base leading-6 text-white ">
A new dawn for beauty.
</h4>
<div class="flex gap-[60px] py-[25px]">
<a class="text-[14px] font-light hover:underline text-white uppercase tracking-widest" href="#">discover</a>
<a class="text-[14px] font-light hover:underline text-white uppercase tracking-widest" href="#">buy</a>
</div>
</div>
</div>
</section>
<section class="bg-black min-h-screen grid place-items-center my-[10px]">
<div class="container grid place-items-center gap-[35px] text-center">
<h1 class="text-white rob text-4xl tracking-wider">THE QUEST FOR BETTER.</h1>
<img src="img/quest-img.png" alt="">
<p class="max-w-[450px] text-white text-base leading-6">At LYMA, we’re always searching for the perfect balance of science, nature and technology. Every LYMA product has been designed to work together. We know that when we discover the best, you’ll discover yours.</p>
</div>
</section>
<section class="bg-[url(/img/vilness-bg.jpg)] min-h-screen mb-[10px] grid place-items-center bg-cover">
<div class="grid place-items-center pb-[30px] text-center">
<p class="text-white rob text-4xl tracking-wider max-w-[550px] uppercase md:text-[27px] md:leading-[47px]" >Wellness innovation at its scientific best.</p>
<div class="flex gap-7 md:flex-col pt-[30px]">
<a class="w-[215px] text-white text-center items-center py-[10px] border-2 border-white hover:bg-white hover:text-black anim-tran" href="#">SUPPLEMENT</a>
<a class="w-[215px] text-white text-center items-center py-[10px] border-2 border-white hover:bg-white hover:text-black anim-tran" href="#">LASER</a>
</div>
</div>
</section>
<section class="mb-[10px] bg-[url(/img/meet-bg.jpg)] flex min-h-[430px] items-center bg-cover lg:items-center lg:justify-center">
<div class="max-w-[350px] px-[15px] flex flex-col flex-1 ml-[50%] lg:ml-0 lg:text-center">
<h3 class="lg:text-white rob text-[35px] text-primary tracking-wide leading-[43px] pb-[33px]">Meet our founder.</h3>
<p class="lg:text-white text-secondary text-base leading-6 pb-[12px]">Lucy’s story is one you really need to read; it changed an industry forever.</p>
<a class="lg:text-white text-primary uppercase tracking-widest text-[14px] hover:underline" href="#">READ MORE</a>
</div>
</section>
<section class="ticker-section">
<div class="ticker">
<div class="ticker__wrapper">
<div class="item">
<p class="item-text">“The new standard in supplements.”</p>
<img src="img/slider1.svg" alt="img">
</div>
<div class="item">
<p class="item-text">“The new standard in supplements.”</p>
<img src="img/slider2.svg" alt="img">
</div>
<div class="item">
<p class="item-text">“The new standard in supplements.”</p>
<img src="img/slider3.svg" alt="img">
</div>
<div class="item">
<p class="item-text">“The new standard in supplements.”</p>
<img src="img/slider4.svg" alt="img">
</div>
<div class="item">
<p class="item-text">“The new standard in supplements.”</p>
<img src="img/slider5.svg" alt="img">
</div>
<div class="item">
<p class="item-text">“The new standard in supplements.”</p>
<img src="img/slider6.svg" alt="img">
</div>
<div class="item">
<p class="item-text">“The new standard in supplements.”</p>
<img src="img/slider7.svg" alt="img">
</div>
<div class="item">
<p class="item-text">“The new standard in supplements.”</p>
<img src="img/slider8.svg" alt="img">
</div>
</div>
</div>
</section>
<footer class="bg-black">
<div class="container pt-[100px] flex justify-evenly text-center footer sm:flex-col sm:mb-4">
<ul class="flex flex-col gap-[8px] sm:mb-4">
<li class="text-[16px] mb-[30px] text-white uppercase">SUPPLEMENT</li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Benefits</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Formula</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Immunity</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">JOURNAL</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">REVIEWS</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Buy</a></li>
</ul>
<ul class="flex flex-col gap-[8px] sm:mb-4">
<li class="text-[16px] mb-[30px] text-white uppercase">about</li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">About</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">JOURNAL</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">FAQs</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Contacts</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Terms</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Terms</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Privacy</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Warranty</a></li>
</ul>
<ul class="flex flex-col gap-[8px] sm:mb-4">
<li class="text-[16px] mb-[30px] text-white uppercase">ACCOUNT</li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Active</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">My subscription</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Add orders</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Account detals</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all" href="#">Payment method</a></li>
<li><a class="text-[13px] text-gray hover:text-white transition-all " href="#">Login details</a></li>
</ul>
</div>
<div class="text-center py-9"><h4 class="text-white text-[18px] uppercase">copyright by egor latushko <br> 2022</h4></div>
</footer>
<script src="./js/main.js"></script>
</body>
</html>