-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (159 loc) · 6.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wanderlust Hair Salon</title>
<!--fonts-->
<script src="https://kit.fontawesome.com/d706b47c33.js" crossorigin="anonymous"></script>
<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=Gideon+Roman&display=swap" rel="stylesheet">
<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=Dancing+Script&display=swap" rel="stylesheet">
<!-- external CSS link -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="home">
<nav>
<ul>
<li class="first"><a href="#home">Wanderlust.</a></li>
<li class="main"><a href="#home">HOME</a></li>
<li class="main"><a href="#services">SERVICES</a></li>
<li class="main"><a href="#about">ABOUT</a></li>
<li class="main"><a href="#stylists">STYLISTS</a></li>
<li class="main"><a href="#offers">OFFERS</a></li>
<li class="main"><a href="#lookbook">LOOKBOOK</a></li>
<li class="last"><a href="#contact">- CONTACT</a></li>
<li id="pg-content" class="menu" style="cursor: pointer" onclick="openSM()">☰</li>
</ul>
</nav>
</header>
<div id="mySidemenu" class="sidemenu">
<a href="javascript:void(0)" class="close" onclick="closeSM()">×</a>
<div class="sm-wrapper">
<a href="#home" onclick="closeSM()">HOME</a>
<a href="#services" onclick="closeSM()">SERVICES</a>
<a href="#about" onclick="closeSM()">ABOUT</a>
<a href="#stylists" onclick="closeSM()">STYLISTS</a>
<a href="#offers" onclick="closeSM()">OFFERS</a>
<a href="#lookbook" onclick="closeSM()">LOOKBOOK</a>
<a href="#contact" onclick="closeSM()">CONTACT</a>
</div>
</div>
<main>
<h1>BOLD, BRAVE, AND BEAUTIFUL</h1>
<p>CHANGE IT UP WITH A NEW LOOK THAT'S AS FEARLESS AS YOU</p>
<a href="#services">- OUR SERVICES</a>
<section>
<h4>YOUR FIRST VISIT?</h4>
<h3>20% OFF FOR THE FIRST CLASSIC HAIR COLORING!</h3>
<a href="mailto:">- BOOK ONLINE</a>
</section>
</main>
<section class="quality" id="services">
<section class="one">
<img src="Assets/quality-icon-01.png">
<h3>EXPERT BEAUTICIANS</h3>
<p>Our beauticians are passion driven and have all completed
rigorous cosmetology programs to make sure that they have
the skills to make you look and feel your best.
</p>
</section>
<section class="two">
<img src="Assets/quality-icon-02.png">
<h3>QUALITY SERVICES</h3>
<p>We offer a wide variety of services including haircuts, styling,
coloring and color correction, treatments and processes, and makeup.
Come see us to help you achieve your new look.
</p>
</section>
<section class="three">
<img src="Assets/quality-icon-03.png">
<h3>BEAUTY PRODUCTS</h3>
<p>We utilize the highest salon quality products in all of our styles
and treatments. Love something we used? We keep plenty of items in stock
that are available for purchase.
</p>
</section>
</section>
<section class="video" id="about">
<section class ="both">
<section class="left">
<h2>BRING YOUR VISION TO LIFE</h2>
<p>We celebrate women in their real, most raw, authentic brilliance, who believe
in themselves, and are ready to step into a look they love. We employ hair
products with some of the most natural and rich ingredients because we believe
you should never expect any less.
</p>
<a href="#lookbook">- SEE LOOKBOOK</a>
</section>
<section class="right">
<video controls preload="auto" poster="Assets/poster.png"
src="Assets/pexels-rodnae-productions-7754434.mp4">
</video>
</section>
</section>
</section>
<section class="stylers" id="stylists">
<h2>OUR STYLISTS</h2>
<h4>_</h4>
<section class="profiles">
<section class="individuals">
<img src="Assets/gabriel-silverio-u3WmDyKGsrY-unsplash.jpg">
<div class="title">
<h3>AMBER LAKE</h3>
<span>-COLORIST</span>
</div>
</section>
<section class="individuals">
<img src="Assets/prince-akachi-LWkFHEGpleE-unsplash.jpg">
<div class="title">
<h3>LAUREN SMITH</h3>
<span>-STYLIST</span>
</div>
</section>
<section class="individuals">
<img src="Assets/salha-frija-dsQoLK2N7DQ2-unsplash.jpg">
<div class="title">
<h3>RACHAEL WILLIAMS</h3>
<span>-BEAUTICIAN</span>
</div>
</section>
</section>
</section>
<section class="offer" id="offers">
<h4>COLOR DAY OFFER!</h4>
<h3>10% OFF ON HAIRCUT, COLOR, AND HIGHLIGHT</h3>
<span><a href="mailto:">- BOOK APPOINTMENT</a></span>
</section>
<section class="lookbook" id="lookbook">
<h2>OUR LOOKBOOK</h2>
<h4>_</h4>
<section class="grid">
<img class="two" src="Assets/averie-woodard-4nulm-JUYFo-unsplash.jpg">
<img class="two" src="Assets/raphael-lovaski-acJTuAzH9RQ-unsplash.jpg">
<img class="three" src="Assets/kareya-saleh-tLKOj6cNwe0-unsplash.jpg">
<img class="three" src="Assets/jessie-dee-dabrowski-www-jessiedee-net-TETR8YLSqt4-unsplash.jpg">
<img class="three" src="Assets/gustavo-spindula-K2D7muBun1A-unsplash.jpg">
<img class="two" src="Assets/maxim-potkin-K7mpa6NVWDk-unsplash.jpg">
<img class="two" src="Assets/omid-armin-jvjZuJ9Inc8-unsplash.jpg">
</section>
</section>
<footer id="contact">
<ul>
<li><a href="https://facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="https://instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="mailto:"><i class="fa-regular fa-envelope"></i></a></li>
</ul>
<h6><a href="https://jessefrenchdev.com" target="_blank">© Jesse French</a></h6>
</footer>
<script type="text/javascript" src="main.js"></script>
</body>
</html>