-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
186 lines (154 loc) · 10.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Julee" />
<link rel="stylesheet" href="styles.css">
<title>Olaplex</title>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg" style="background-color: #EEB0B0;">
<div class="container-fluid d-flex">
<a class="navbar-brand" style="color: black; font-size: 40px;" href="#">Olaplex</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 mx-auto">
<li class="nav-item" style="margin-right:10%;">
<a class="nav-link active" style="color: black; font-size: 25px;" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item" style="margin-right:10%;">
<a class = "nav-link active" style="color: black; font-size: 25px;" aria-current="page" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link active" style="color: black; font-size: 25px;" aria-current="page" href="#">About</a>
</li>
</ul>
<form class="d-flex">
<button class="btn" style="color: black; font-size: 25px;" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- SECTION 1 -->
<div>
<div style="width: 100%; height: 100%; text-align: center; background: #F3E6E6; display: flex; justify-content: center; align-items: center;">
<div style="width: 50%; height: 100%; background: #FEFAFA; border-radius: 13px; border: 5px #EEDBDB solid; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<div style="width: 80%; color: #BB8A8A; font-size: 50px; font-family: Julee; font-weight: 400; margin-bottom: 20px;">
EXPERIENCE STRONGER, HEALTHIER HAIR IN AS LITTLE AS 3 MINUTES*
</div>
</div>
<img style="width: 40%; height: 40%; margin-top: 20px; margin: 20px; border-radius: 35px; border: 4px #EEB0B0 solid;" src="https://media.istockphoto.com/id/1312807901/photo/beautiful-woman-with-long-straight-hair-blond-girl.jpg?s=612x612&w=0&k=20&c=ixiI7eHnV8Fr3gQp6yZa-VrCNkY9PxBLBnyrfXjFUug=" />
</div>
</div>
<!-- SECTION 2 -->
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; background: #F4F2F2;">
<div style="width: 50%; height: 50%; text-align: center;">
<img style="width: 60%; height: 100%; border-radius: 5px;" src="https://i.pinimg.com/originals/cb/bf/3a/cbbf3a4781af2e17f219823779629e50.png" />
</div>
<div style="width: 50%; height: 50%; text-align: center; padding-right: 40px;">
<div style="color: #BB8A8A; font-size: 47px; font-family: Julee; font-weight: 400; word-wrap: break-word;">
WATCH & SHOP
</div>
<div style="color: #D49D9D; font-size: 25px; font-family: Junge; font-weight: 400; word-wrap: break-word;">
Olaplex is the complete solution to repair, rebuild and restore broken hair bonds. This is all thanks to a
single molecule: Bis-Aminopropyl Diglycol Dimaleate. This patented ingredient is designed to seek out broken
hair bonds in your client's hair caused by heat, chemical, mechanical and color damage.
</div>
</div>
</div>
<!-- SECTION 3 -->
<div style="display: flex; justify-content: center; align-items: center; height: 80vh; background: white;">
<div style="width: 50%; height: 100%; text-align: center;">
<div style="background: #F3E6E6; border-radius: 24px; padding: 20px; margin-top: 20px; margin-left: 60px;">
<div style="color: #BB8A8A; font-size: 30px; font-family: Julee; font-weight: 400; word-wrap: break-word;">
Our Best Products
</div>
<div style="color: #BB8A8A; font-size: 27px; font-family: Junge; font-weight: 400; word-wrap: break-word;">
Olaplex is different in that it actually transforms strands from the inside-out. Put (very simply), damaged hair
contains damaged disulfide bonds, and Olaplex's patented ingredient, bis-aminopropyl diglycol dimaleate, helps
to repair them.
</div>
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 30%; background: white; border: 3px #BB8A8A solid; border-radius: 10px; padding: 10px; color: #E58383; font-size: 16px; font-family: Junge; font-weight: 400; word-wrap: break-word;">Shop now
</div>
</div>
</div>
</div>
<div style="width: 60%; height: 100%; text-align: center;">
<img style="width: 60%; height: 65%; margin-top: 40px; border-radius: 110%; border: 4px #BB8A8A solid;"
src="https://www.glossy.co/wp-content/uploads/sites/4/2021/09/Olaplex.jpeg?w=1077" />
</div>
</div>
<!-- SECTION 4 -->
<div class="container mx-1">
<div class="row justify-content-end">
<div class="card" style="width: 500px; height: max-content; border: none">
<div class="card-body">
<h5 class="card-title" style="font-size: 200%;">Healthier hair, healthier planet</h5>
<h6 class="card-subtitle mb-2" style="font-size: 150%;"> <br><br> <br><br> LEARN MORE <img src="https://static.thenounproject.com/png/582073-200.png" style="width: 50px"></h6>
<div style="width: 46%; height: 100%; border: 1px black solid"></div>
</div>
</div>
<div class="col-auto mx-1">
<div class="card" style="width: 120px; border: none;">
<img src="https://olaplex.com/cdn/shop/files/icon-1_1_360x.png?v=1645570709" class="card-img-top">
<div class="card-body">
<p class="card-text">WE SAVE <br><br> 0.7 Gallons <br><br> of water per product</p>
</div>
</div>
</div>
<div class="col-auto mx-1">
<div class="card" style="width: 120px; border: none;">
<img src="https://olaplex.com/cdn/shop/files/Trees_Icon_256x265_96825b55-55ec-421a-a209-0ab1b6003a21_360x.png?v=1650468548" class="card-img-top">
<div class="card-body">
<p class="card-text">WE SAVE <br><br> 44,000 Trees <br><br> A year from being cut down</p>
</div>
</div>
</div>
<div class="col-auto mx-1">
<div class="card" style="width: 130px; border: none;">
<img src="https://olaplex.com/cdn/shop/files/Wind_Icon_256x256_ff7a87b6-e00f-43f6-802e-970cf9b651c3_360x.png?v=1650468542" class="card-img-top">
<div class="card-body">
<p class="card-text">WE ELIMINATE <br><br> 0.4 LBS <br><br> of greenhouse gas emissions per product</p>
</div>
</div>
</div>
<div class="col-auto mx-1">
<div class="card" style="width: 120px; border: none;">
<img src="https://olaplex.com/cdn/shop/files/icon-4_1_360x.png?v=1645570709" class="card-img-top">
<div class="card-body">
<p class="card-text">WE SAVE <br><br> 8,239 Acres <br><br> Of US land from being deforested</p>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div style="width: 100%; height: 100%; background: #EEB0B0; padding-top: 3%;">
<div style="width: 80%; height: 100%; border: 2px rgb(255, 255, 255) solid; margin-bottom: 10px; margin-left: 10%;"></div>
<div class="social-icons">
<div style="justify-content: center; align-items: center; display: flex;">
<img style="width: 6%; height: 5%"
src="https://qwestore.com/png_images_min/10/bFacebook-logob-bBlack-iconb-FB-icon-7384.png" />
<img style="width: 5%; height: 5%"
src="https://iconape.com/wp-content/png_logo_vector/twitter-icon-circle-black-logo.png" />
<img style="width: 5%; height: 5%" src="https://cdn-icons-png.flaticon.com/512/4401/4401407.png" />
<img style="width: 5%; height: 5%"
src="https://purepng.com/public/uploads/thumbnail/purepng.com-wifi-icon-blackwifi-iconwifiiconwireless-connection-1701528436080jcuu9.png" />
<img style="width: 5.5%; height: 5%"
src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/google_circle_black-512.png" />
</div>
<div
style="width: 100%; height: 100%; text-align: center;justify-content: center; color: black; font-size: 14px; font-family: Judson; font-weight: 400; word-wrap: break-word">
@Copyright. All rights reserved
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>