-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·220 lines (203 loc) · 8.17 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Darling and Mason Premier Salon">
<meta name="keywords" content="hair, salon, beauty, cosmetics, style, darling, mason">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Darling & Mason Premier Salon</title>
<!-- font links -->
<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=Raleway:wght@400;700&display=swap" rel="stylesheet">
<!-- css links -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- top navigation -->
<nav class="topnav">
<ul>
<li><a href="#lookbook">lookbook</a></li>
<li><a href="#staff">staff</a></li>
<li><a href="#services">services</a></li>
<li><a href="#location">location</a></li>
<li><a href="#contact" class="blk-btn">book an appointment</a></li>
</ul>
</nav>
<!-- hero -->
<header>
<section class="logo">
<div> <div id="darling">darling</div>
<div id="mason">& mason</div>
<div id="premier-salon">premier salon</div></h1>
</section>
</header>
<!-- welcome -->
<section class="welcome">
<h2>Welcome to Darling & Mason<br />—</h2>
<p>Our team is comprised of experienced hair stylists, nail technicians and estheticians who are truly passionate about crafting the perfect salon experience. We strive to celebrate the unique beauty and individuality of every guest and delight at the opportunity to exceed your expectations.</p>
<p>Our salon strongly believes in the pursuit of continuing education, so that we may better serve you. Our team stays up to date with the latest trends in hair, nail design, skin treatments and use of the most cutting-edge professional products. We foster an environment that is truly unique ‐ one where we carefully listen to your needs, unleash our talents to realize your very best look and deliver unparalleled customer service. Allow us to provide an amazing salon experience for you!</p>
</section>
<!-- lookbook -->
<section class="lookbook-flex">
<h2 id="lookbook">our lookbook<br />—</h2>
<section class="lookbook-grid">
<section>
<img src="images/lookbook-1-1.webp" alt="male with stylish haircut" class="img-1-1">
<img src="images/lookbook-1-2.webp" alt="woman with wavy red hair" class="img-1-2">
</section>
<section>
<img src="images/lookbook-2-1.webp" alt="woman with curly dark hair" class="img-1-2">
<img src="images/lookbook-2-2.webp" alt="woman with curly blonde hair and beautiful makeup" class="img-1-1">
</section>
<section>
<img src="images/lookbook-3-1.webp" alt="woman with gorgeous cosmetics" class="img-1-1">
<img src="images/lookbook-3-2.webp" alt="woman with perfectly done braids" class="img-1-2">
</section>
</section>
</section>
<!-- staff -->
<section class="staff">
<h2 id="staff">meet our staff<br />—</h2>
<section>
<section class="staff-img" id="staff-darling">
<div class="staff-txt-container">
<h5 class="staff-txt">Alita Darling</h5>
<h6 class="staff-txt">Master Esthetician</h6>
</div>
</section>
<section class="staff-img" id="staff-mason">
<div class="staff-txt-container">
<h5 class="staff-txt">Yafir Mason</h5>
<h6 class="staff-txt">Master Stylist</h6>
</div>
</section>
<section class="staff-img" id="staff-adams">
<div class="staff-txt-container">
<h5 class="staff-txt">Bella Adams</h5>
<h6 class="staff-txt">Master Colorist</h6>
</div>
</section>
<section class="staff-img" id="staff-dunbar">
<div class="staff-txt-container">
<h5 class="staff-txt">Ted Dunbar</h5>
<h6 class="staff-txt">Master Barber</h6>
</div>
</section>
<section class="staff-img" id="staff-cohen">
<div class="staff-txt-container">
<h5 class="staff-txt">Yennefer Cohen</h5>
<h6 class="staff-txt">Master Nail Technician</h6>
</div>
</section>
<section class="staff-img" id="staff-alvarez">
<div class="staff-txt-container">
<h5 class="staff-txt">Julia Alvarez</h5>
<h6 class="staff-txt">Master Cosmetologist</h6>
</div>
</section>
</section>
</section>
<!-- services -->
<h2 id="services">services<br />—</h2>
<section class="services">
<section>
<h4>cut & style</h4>
<ul>
<li>Bang Trim ‐ $10</li>
<li>Braid ‐ $20</li>
<li>Clean Up ‐ $10</li>
<li>Clipper Cut ‐ $35</li>
<li>Formal Style ‐ $56</li>
<li>Perms ‐ $175</li>
<li>Scissor Cut ‐ $45</li>
<li>Shampoo & Blow Dry ‐ $25</li>
<li>Trend Braids ‐ $40</li>
<li>Undercut ‐ $10</li>
</ul>
</section>
<section>
<h4>hair coloring</h4>
<ul>
<li>Balayage (Full) ‐ $140</li>
<li>Balayage (Partial) ‐ $130</li>
<li>Corrective Color ‐ $70</li>
<li>Highlight (Full) ‐ $110</li>
<li>Highlight (Partial) ‐ $100</li>
<li>+ Base (Full) ‐ $40</li>
<li>+ Base (Partial) ‐ $20</li>
<li>Premium Color ‐ $70</li>
<li>Single Process Color ‐ $60</li>
<li>Toner/Gloss ‐ $40</li>
</ul>
</section>
<section>
<h4>hair therapy</h4>
<ul>
<li>Smoothing Keratin ‐ $250</li>
<li>Express Treatment ‐ $150</li>
<li>Conditioning Service ‐ $25</li>
</ul>
<h4>nails</h4>
<ul>
<li>Gel Full ‐ $65</li>
<li>Gel Fill ‐ $60</li>
<li>Manicure ‐ $30</li>
<li>Manicure (No Clip) ‐ $45</li>
<li>Overlay ‐ $55</li>
</ul>
</section>
</section>
<!-- location -->
<section class="location">
<h2 id="location">location<br />—</h2>
<section class="location-flex">
<section>
<h4>address</h4>
<address>1320 Washington Ave<br />
Saint Louis, MO 63103<br />
Downtown</address>
</section>
<img src="images/map.webp" alt="Map of Downtown Saint Louis.">
<section>
<h4>hours</h4>
<ul>
<li>Monday 09:00a ‐ 6:00p</li>
<li>Tuesday 09:00a ‐ 6:00p</li>
<li>Wednesday 09:00a ‐ 6:00p</li>
<li>Thursday 09:00a ‐ 6:00p</li>
<li>Friday 09:00a ‐ 6:00p</li>
<li>Saturday 09:00a ‐ 6:00p</li>
<li>Sunday 12:00p ‐ 6:00p
</ul>
</section>
</section>
</section>
<!-- contact -->
<section id="contact">
<section class="grid-flex-container">
<h2>contact us<br />—</h2>
<p>We love hearing from our clientele whether it's a service inquiry or just to say hello. Fill out the form below and we will have one of our staff get back to you as soon as possible.</p>
</section>
<section class="grid-flex-container">
<form method="post" action="#" id="contact-form" netlify>
<input type="text" name="first" id="first" placeholder="First Name" />
<input type="text" name="last" id="last" placeholder="Last Name" />
<input type="tel" name="phone" id="phone" placeholder="Phone Number" />
<input type="email" name="email" id="email" placeholder="Email" />
<input type="text" name="subject" id="subject" placeholder="Subject" />
<textarea name="message" id="message" placeholder="Message" rows="4"></textarea>
<input type="submit" id="submit" value="Send Message" />
</form>
</section>
</section>
<!-- footer -->
<footer>
<section>
<small>Darling & Mason Premier Salon © 2022 | Web Design by <a href="https://garlandkey.com">Garland Key</a></small>
</section>
</footer>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>