-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
61 lines (61 loc) · 4.26 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Landing Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="'https://fonts.googleapis.com/css?family=Work+Sans:800|Open+Sans'">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<!-- <div class="header"> -->
<nav class="navbar">
<a href="#">Home</a>
<a href="#">What's New</a>
<a href="#">Products</a>
<a href="#">About</a>
<a href="#">Buy Now</a>
</nav>
<!-- </div> -->
<div class="background"></div>
<section class="section">
<h2 class="black-header">Trending Now:</h2>
<!-- <p class="featured-title">Featured Product</p> -->
<h1 class="title">M·A·C Lipglass</h1>
<h2 class="subtitle">Create a <span class="highlight">shine</span></h2><h2>that <span class="highlight">lasts</span></h2>
<img class="product" src="https://www.maccosmetics.com/media/export/cms/products/640x600/mac_sku_S3HT1M_640x600_0.jpg" alt="lipglass" title="M.A.C lipglass">
<!-- <div class="button" id="magical" onclick="magicalColor()"></div>
<div class="button" id="luxe" onclick="luxeColor()"></div>
<div class="button" id="oyster" onclick="oysterColor()"></div>
<div class="button" id="ruby" onclick="rubyColor()"></div> -->
<p class="trending-desc">Get in line for high-shine, because the lacquered lip glosses you knew and loved from the 90s are BACK! Despite the current superslick, wet and juicy lip gloss trend, our iconic Lipglass has ALWAYS been poppin’ thanks to its moisturizing glass-like finish that wears for hours.</p>
<h1 class="tagline">Bring your vision to life</h1>
<!-- <h1 class="tagline" id="lipglass-color">Muted Rose Pink</h1> -->
<p class="desc">M·A·C is the world’s leading professional makeup authority because of our<br> unrivalled expertise in makeup ARTISTRY</p>
<div class="image-carousel">
<img class="miniImage" id="first" src="https://www.maccosmetics.com/media/export/cms/products/640x600/mac_sku_S3HT1M_640x600_0.jpg" onclick="swapImage(this.id)">
<img class="miniImage" id="second" src="https://www.maccosmetics.com/media/export/cms/products/640x600/mac_sku_S3HT1M_640x600_1.jpg" onclick="swapImage(this.id)">
<img class="miniImage" id="third" src="https://www.maccosmetics.com/media/export/cms/products/640x600/mac_sku_S3HT1M_640x600_2.jpg" onclick="swapImage(this.id)">
<img class="miniImage" id="fourth" src="https://www.maccosmetics.com/media/export/cms/products/640x600/mac_sku_S3HT1M_640x600_3.jpg" onclick="swapImage(this.id)">
<img class="miniImage" id="fifth" src="https://www.maccosmetics.com/media/export/cms/products/640x600/mac_sku_S3HT1M_640x600_4.jpg" onclick="swapImage(this.id)">
</div>
<div class="button" id="magical" onclick="magicalColor()"></div>
<div class="button" id="luxe" onclick="luxeColor()"></div>
<div class="button" id="oyster" onclick="oysterColor()"></div>
<div class="button" id="myth" onclick="mythColor()"></div>
<div class="button" id="candy" onclick="candyColor()"></div>
<div class="button" id="ruby" onclick="rubyColor()"></div>
</section>
</div>
<script src="main.js"></script>
</body>
</html>