forked from Rounak-09/Bobbi_Brown_Cosmetics
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
332 lines (315 loc) · 15.5 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
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/32f181d7c4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="Styles\index.css"/>
<title>Cosmetics | Bobbi Brown Cosmetics</title>
<style>
</style>
</head>
<body>
<!-- Header Start -->
<div id="container1">
<div id="top">
<div id="left">
<div id="email">
<a href="signup.html">EMAIL SIGN UP</a>
</div>
<div id="find">
<img src="https://www.bobbibrowncosmetics.com/sites/bobbibrown/themes/bb_base/img/icons/svg/Search-White.svg">
<input id="search" type="text" placeholder="SEARCH">
</div>
</div>
<div id="center">
<div id="title">
<a href="index.html"><img src="https://www.bobbibrowncosmetics.com/media/export/cms/logo.png"></a>
</div>
<div id="tabs">
<div><a href="new.html">NEW</a></div>
<div><a href="bestSellers.html">BESTSELLERS</a></div>
<div><a href="face.html">FACE</a></div>
<div><a href="makeup.html">MAKEUP</a></div>
<div><a href="skinCare.html">SKINCARE</a></div>
<div><a href="virtual.html">VIRTUAL SERVICES</a></div>
<div><a href="DISCOVER.html">DISCOVER</a></div>
</div>
</div>
<div id="right">
<div>
<div><a href="login.html">JOIN BB<u>ACCESS</u></a></div>
<div class="rightImage"><a href=""><img src="https://www.bobbibrowncosmetics.com/sites/bobbibrown/themes/bb_base/img/icons/svg/Location-White.svg"></a></div>
<div class="rightImage"><a href="login.html"><img src="https://www.bobbibrowncosmetics.com/sites/bobbibrown/themes/bb_base/img/icons/svg/MyAccount-White.svg"></a></div>
<div class="rightImage" ><a href="cart.html"><img src="https://www.bobbibrowncosmetics.com/sites/bobbibrown/themes/bb_base/img/icons/svg/Bag-White.svg"></a></div>
</div>
</div>
</div>
<div id="discount">
<p>Get 15% off your first order plus free shipping everyday when you join BB Access</p>
</div>
<!-- Header End -->
<!-- Product Showcase -->
<div id="products">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/640px-A_black_image.jpg">
<img src="https://m.bobbibrowncosmetics.com/media/export/cms/VirtualServices/SS21_findyourfoundation.jpg">
<div id="content">
<p class="smallTitle">NEW</p>
<p class="title">ALL-IN <br>SKIN DUO</p>
<p>Everything you need for fresh, healthy-looking skin in one full-size set:<br>Vitamin Enriched Face Base and Skin Long-Wear Weightless Foundation SPF 15.</p>
<p>A $114 value, yours for $72.</p>
<button class="whiteButton">CREATE YOUR SET</button>
</div>
</div>
</div>
<!-- Container-1 End -->
<!-- Container-2 Start -->
<div id="container2">
<p id="title2" class="title">GOTTA HAVE IT</p>
<div id="tabs2">
<a>NEW</a>
<a>TRENDING NOW</a>
<a>SKINCARE</a>
</div>
<div id="products2">
</div>
</div>
<!-- Container-2 End -->
<!-- New Container Start -->
<div id="newContainer">
<div>
<div id="newImage">
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/HP_Modules/SS22/SS22_SLWWF_VEFB_pc.jpg">
</div>
</div>
<div>
<div id="newContent">
<p class="smallTitle">NEW</p>
<p class="title" id="largeTitle">ALL-IN <br>SKIN DUO</p>
<p>Everything you need for fresh, healthy-looking skin: a full-size set of our bestselling foundation and primer.</p>
<p>A $114 value, yours for $72.</p>
<button class="whiteButton">CREATE YOUR SET</button>
</div>
</div>
</div>
<!-- New Container End -->
<!-- Container-3 Start -->
<div id="container3">
<div class="titleBox" id="title2">
<p class="titleTop">DATE-NIGHT BEAUTY</p>
<p class="title">EASY ON THE EYES</p>
<p>Three quick steps to creating an eye-catching look that stays the night.</p>
</div>
<div id="photos3">
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/HP_Modules/SS22/SS22_All_in_the_Eyes_pc_01.jpg">
<p class="smallTitle"><b>ADD CONTRAST</b></p>
<p>Swipe <b>Long-Wear Cream Shadow Stick in Dusty Mauve</b> all over lids and line with <b>Long-wear Gel Eyeliner in Caviar ink.</b></p>
<div class="shopButton">
<button class="blackButton">SHOP LONG-WEAR CREAM SHADOW STICK</button>
<button class="blackButton">SHOP LONG-WEAR GEL EYELINER</button>
</div>
</div>
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/HP_Modules/SS22/SS22_All_in_the_Eyes_pc_02.jpg"/>
<p class="smallTitle"><b>BLEND IT OUT</b></p>
<p>Smudge the liner with our <b>Smokey Eyeliner Brush</b> for a soft yet sultry finish.</p>
<div class="shopButton">
<button class="blackButton">SHOP SMOKEY EYELINER BRUSH</button>
</div>
</div>
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/HP_Modules/SS22/SS22_All_in_the_Eyes_pc_03.jpg"/>
<p class="smallTitle"><b>TURN UP THE VOLUME</b></p>
<p>Comb <b>Smokey Eye Mascara</b> from root to tip for streched-out, volumised lashes.</p>
<div class="shopButton">
<button class="blackButton">SHOP SMOKEY EYE MASCARA</button>
</div>
</div>
</div>
</div>
<!-- Container-3 End -->
<!-- Container-4 Start -->
<div id="container4">
<div id="video">
<video src="https://www.bobbibrowncosmetics.com/media/export/cms/HP_Modules/SS22/SS22_FlexSet_pc.mp4" autoplay loop muted type="video/mp4"></video>
</div>
<div id="text4">
<div>
<p class="title">YOU'RE ALL SET</p>
<p>Find everything you need to amplify your glow<br> and create go-to looks in our limited-edition sets.</p>
<a class="shopSets" href="./paletteSets.html">
<button>SHOP SETS</button>
</a>
</div>
</div>
</div>
<!-- Container-4 End -->
<!-- Container-5 Start -->
<div id="container5">
<div id="text5">
<div>
<p class="title">CONNECT <br>WITH A PRO</p>
<p>Take your undereye routine to the next level: Book a complimentary Virtual Artistry Consultation to discover personalized tips, tricks, and color-true shades for your best and brightest eyes.</p>
<button class="whiteButton">BOOK NOW</button>
</div>
</div>
<div id="photo5">
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/HP_Modules/SS22/SS22_SkinCCStick_VirtualConsultant_pc.jpg">
</div>
</div>
</div>
<!-- Container-5 End -->
<!-- Container-6 Start -->
<div id="container6">
<div class="titleBox" id="title6">
<p class="titleTop">VIRTUAL ARTISTY CONSULTATIONS</p>
<p class="title">LEARN FROM THE PROS</p>
<p>From trying a new shade to learning new tips, our artists <br>are here to help with complimentary video sessions.</p>
</div>
<div id="body6">
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/VirtualServices/SS21_lookfreshvideocalls.jpg">
<p class="paraTop">30 MIN</p>
<p class="paraTitle">LOOK FRESH FOR VIDEO CALLS</p>
<p>Learn how to look bright eyed and fresh faced in minutes with our pro tips.</p>
<button class="blackButton blackMargin">BOOK NOW</button>
</div>
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/VirtualServices/BB_PC_VirtualServices_LandingPage_Group_Tile2_1_@2x.gif">
<p class="paraTop">15 MIN</p>
<p class="paraTitle">CORRECT & CONCEAL</p>
<p>Look less tired by neutralizing undereye circles to look instantly more awake and bright-eyed using our new Skin Corrector Stick & Skin Concealer Stick.</p>
<button class="blackButton blackMargin">BOOK NOW</button>
</div>
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/VirtualServices/SS21_customizeskincareroutine.jpg">
<p class="paraTop">30 MIN</p>
<p class="paraTitle">CUSTOMIZE YOUR SKIN CARE ROUTINE</p>
<p>Learn how to address your top skin concerns with a professionalized routine curated by an artist.</p>
<button class="blackButton blackMargin">BOOK NOW</button>
</div>
</div>
</div>
<!-- Container-6 End -->
<!-- Container-7 Start -->
<div id="container7">
<div class="titleBox">
<p class="title">#BOBBIBROWN COMMUNITY</p>
<p>Looking fresh-faced? Let's see it. Mention @bobbibrown and tag #BobbiBrown to share.</p>
</div>
<div id="body7">
<div>
<img src="https://photorankmedia-a.akamaihd.net/media/e/e/4/ee4teo4/mobile.jpg">
<div class="content7">@kamiiilamakeup</div>
</div>
<div>
<img src="https://photorankmedia-a.akamaihd.net/media/n/j/s/njs6gs4/mobile.jpg">
<div class="content7">@romyglow</div>
</div>
<div>
<img src="https://photorankmedia-a.akamaihd.net/media/a/h/e/ahei6q4/mobile.jpg">
<div class="content7">@paulaosma</div>
</div>
<div>
<img src="https://z3photorankmedia-a.akamaihd.net/media/p/a/u/pausfz4/mobile.jpg">
<div class="content7">@bbpro_jp_miki.fujima</div>
</div>
</div>
<div><button class="blackButton marginExtra extraWidth"><img src="https://www.bobbibrowncosmetics.com/media/export/cms/icons/olapic-camera-icon.gif" id="camera"> SHARE YOUR LOOK</button></div>
<div class="marginExtra"><a id="link7" class="black" href="">VIEW GALLERY</a></div>
</div>
<!-- Container-7 End -->
<!-- Container-8 Start -->
<div id="container8">
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/HP_Modules/EvergreenServices/BB_HP_Module_PC_Services_03.jpg">
<p class="bold">CHAT NOW</p>
<p>Chat with a makeup artist to get product recommendations.</p>
<a class="black small" href="">CHAT NOW</a>
</div>
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/HP_Modules/EvergreenServices/BB_HP_Module_PC_Services_05.jpg">
<p class="bold">FREE SHIPPING</p>
<p>Get free shipping on all orders $65+. Or join Bobbi Brown Club to get free shipping on all orders.</p>
<a class="black small" href="">LEARN MORE</a>
</div>
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/HP_Modules/EvergreenServices/BB_HP_Module_PC_Services_07.jpg">
<p class="bold">WE WANT YOU TO LOVE IT</p>
<p>That’s why we offer free shipping and returns on all foundations, correctors, concealers, and powders.</p>
<a class="black small" href="">LEARN MORE</a>
</div>
<div>
<img src="https://www.bobbibrowncosmetics.com/media/export/cms/HP_Modules/EvergreenServices/BB_HP_Module_PC_Services_09.jpg">
<p class="bold">EXCLUSIVE OFFERS</p>
<p>Special somethings, just for you.</p>
<a class="black small" href="">GET OFFERS</a>
</div>
</div>
<!-- Container-8 End -->
<!-- Footer Start -->
<div id="footer">
<div id="footerContents">
<div id="footerLeft">
<div>
<p class="bold">NEED HELP?</p>
<div><a href="" class="mediumFont">Chat with an Artist</a></div>
<div><a href="" class="titleTop">Text An Artist</a></div>
<div><a href="" class="titleTop">Call Us (877)-310-9222</a></div>
<div><a href="" class="titleTop">Shipping & Returns</a></div>
<div><a href="" class="titleTop">FAQS</a></div>
<div><a href="" class="titleTop">Careers</a></div>
<select class="blackOption">
<option>CHOOSE LOCATION</option>
</select>
</div>
<div>
<p class="bold">MY BOBBI BROWN</p>
<div><a href="" class="titleTop">BB Access</a></div>
<div><a href="" class="titleTop">My Account</a></div>
<div><a href="" class="titleTop">My Orders</a></div>
<div><a href="" class="titleTop">Store Locator</a></div>
</div>
</div>
<div id="footerRight">
<div id="input">
<input type="text" class="blackInput blackSubmit" placeholder="ENTER YOUR EMAIL">
<input type="number" class="blackInput blackSubmit" placeholder="ENTER YOUR MOBILE PHONE">
<button class="blackSubmit">SUBMIT</button>
<div>
<p class="bold gap">FOLLOW US</p>
<i class="fa-brands fa-facebook-f footerIcons"></i>
<i class="fa-brands fa-twitter footerIcons"></i>
<i class="fa-brands fa-youtube footerIcons"></i>
<i class="fa-brands fa-instagram footerIcons"></i>
<i class="fa-brands fa-pinterest footerIcons"></i>
</div>
</div>
</div>
</div>
<div id="footerBottom">
<div>
<p>© Bobbi Brown Professional Cosmetics, Inc. All worldwide rights reserved.</p>
</div>
<div id="bottomTabs">
<div>
<div><a>Terms & Conditions</a></div>
<div><a>California Do Not Sell My Personal Information</a></div>
<div><a>Accessibility</a></div>
</div>
<div>
<div><a>Interest Based Ads</a></div>
<div><a>Privacy Policy</a></div>
</div>
<div id="bottomIcon"><img src="https://www.bobbibrowncosmetics.com/media/images/global/bobbi_access_icon.jpg"></div>
</div>
</div>
</div>
<!-- Footer End -->
</body>
</html>
<script src="Scripts\index.js"></script>