-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
262 lines (224 loc) · 18.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
<!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" />
<!--========= FAVICON ==========-->
<link rel="icon" href="./assets/img/favicon.png" />
<!--========== BOX ICONS ==========-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet"/>
<!--=========== CSS =============-->
<link rel="stylesheet" href="./dist/styles.css" />
<title>The Beauty Retreat | Bespoke Beauty Treatments</title>
</head>
<body>
<!--========== HEADER ==========-->
<header class="l-header" id="header">
<nav class="nav bd-container">
<a href="#" class="nav__logo">The Beauty Retreat</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link active-link">Home</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
<li class="nav__item"><a href="#services" class="nav__link">Services</a></li>
<li class="nav__item"><a href="#treatment" class="nav__link">Treatment</a></li>
<li class="nav__item"><a href="#contact" class="nav__link">Contact us</a></li>
<li><i class='bx bx-moon change-theme' id="theme-button"></i></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<main class="l-main">
<!--========== HOME ==========-->
<section class="home" id="home">
<div class="home__container bd-container bd-grid">
<div class="home__data">
<h1 class="home__title">The Beauty Retreat</h1>
<h2 class="home__subtitle">Bespoke Beauty Treatments. <br> Luxury Redefined. </h2>
<a href="#treatment" class="button">View Treatments</a>
</div>
<img src="assets/img/home.png" alt="Header image of beautiful client with flawless skin" class="home__img">
</div>
</section>
<!--========== ABOUT ==========-->
<section class="about section bd-container" id="about">
<div class="about__container bd-grid">
<div class="about__data">
<span class="section-subtitle about__initial">About us</span>
<h2 class="section-title about__initial">Fully Qualified <br> Therapists</h2>
<p class="about__description">The Beauty Retreat is a five-star, full-service beauty spa that exudes quality and delivers luxury. We offer a full range of beauty treatments in a relaxed professional setting.</p>
<a href="#treatment" class="button">Explore Treatments</a>
</div>
<img src="assets/img/about.webp" alt="Client receiving relaxing facial treatment" class="about__img">
</div>
</section>
<!--========== SERVICES ==========-->
<section class="services section bd-container" id="services">
<span class="section-subtitle">Offering</span>
<h2 class="section-title">Personalised Services</h2>
<div class="services__container bd-grid">
<div class="services__content">
<svg class="services__img" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" style="fill: #8E2563; --darkreader-inline-fill:#060708;" data-darkreader-inline-fill=""><path d="M20.787 9.023c-.125.027-1.803.418-3.953 1.774-.323-1.567-1.279-4.501-4.108-7.485L12 2.546l-.726.767C8.435 6.308 7.483 9.25 7.163 10.827 5.005 9.448 3.34 9.052 3.218 9.024L2 8.752V10c0 7.29 3.925 12 10 12 5.981 0 10-4.822 10-12V8.758l-1.213.265zM8.999 12.038c.002-.033.152-3.1 3.001-6.532C14.814 8.906 14.999 12 15 12v.125a18.933 18.933 0 0 0-3.01 3.154 19.877 19.877 0 0 0-2.991-3.113v-.128zM12 20c-5.316 0-7.549-4.196-7.937-8.564 1.655.718 4.616 2.426 7.107 6.123l.841 1.249.825-1.26c2.426-3.708 5.425-5.411 7.096-6.122C19.534 15.654 17.304 20 12 20z"></path></svg>
<h3 class="services__title">5 Star Beauty Salon</h3>
<p class="services__description">We take the time to understand your goals, skin type and perfect imperfections to ensure that whatever treatment we provide lasts as long as possible.</p>
</div>
<div class="services__content">
<svg class="services__img" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" style="fill: #8E2563; --darkreader-inline-fill:#060708;" data-darkreader-inline-fill=""><path d="M12 2C6.486 2 2 6.486 2 12c0 2.521.945 4.82 2.49 6.582 1.24 1.52 3.266 3.066 6.439 3.358a9.731 9.731 0 0 0 2.141 0c3.174-.292 5.199-1.839 6.439-3.358A9.948 9.948 0 0 0 22 12c0-5.514-4.486-10-10-10zM4.709 8.724c.154.09.308.182.456.276.396.25.791.5 1.286.688.494.187 1.088.312 1.879.312.792 0 1.386-.125 1.881-.313s.891-.437 1.287-.687.792-.5 1.287-.688c.494-.187 1.088-.312 1.88-.312s1.386.125 1.88.313c.495.187.891.437 1.287.687s.792.5 1.287.688c.178.067.374.122.581.171.191.682.3 1.398.3 2.141 0 .843-.133 1.654-.375 2.417-.261.195-.733.474-1.577.756-.769.256-1.672.458-2.685.602a25.337 25.337 0 0 1-6.727 0c-1.013-.144-1.916-.346-2.685-.602-.844-.282-1.316-.561-1.577-.756a7.953 7.953 0 0 1 .335-5.693z"></path><circle cx="8.5" cy="12.5" r="1.5"></circle><circle cx="15.5" cy="12.5" r="1.5"></circle></svg>
<h3 class="services__title">Covid 19 Safety</h3>
<p class="services__description">At The Beauty Retreat we care about your safety and those working with you. We follow the latest Government guidelines for keeping you and our salon COVID-safe.</p>
</div>
<div class="services__content">
<svg class="services__img" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" style="fill: #8E2563; --darkreader-inline-fill:#060708;" data-darkreader-inline-fill=""><path d="M4 21h9.62a3.995 3.995 0 0 0 3.037-1.397l5.102-5.952a1 1 0 0 0-.442-1.6l-1.968-.656a3.043 3.043 0 0 0-2.823.503l-3.185 2.547-.617-1.235A3.98 3.98 0 0 0 9.146 11H4c-1.103 0-2 .897-2 2v6c0 1.103.897 2 2 2zm0-8h5.146c.763 0 1.448.423 1.789 1.105l.447.895H7v2h6.014a.996.996 0 0 0 .442-.11l.003-.001.004-.002h.003l.002-.001h.004l.001-.001c.009.003.003-.001.003-.001.01 0 .002-.001.002-.001h.001l.002-.001.003-.001.002-.001.002-.001.003-.001.002-.001c.003 0 .001-.001.002-.001l.003-.002.002-.001.002-.001.003-.001.002-.001h.001l.002-.001h.001l.002-.001.002-.001c.009-.001.003-.001.003-.001l.002-.001a.915.915 0 0 0 .11-.078l4.146-3.317c.262-.208.623-.273.94-.167l.557.186-4.133 4.823a2.029 2.029 0 0 1-1.52.688H4v-6zM16 2h-.017c-.163.002-1.006.039-1.983.705-.951-.648-1.774-.7-1.968-.704L12.002 2h-.004c-.801 0-1.555.313-2.119.878C9.313 3.445 9 4.198 9 5s.313 1.555.861 2.104l3.414 3.586a1.006 1.006 0 0 0 1.45-.001l3.396-3.568C18.688 6.555 19 5.802 19 5s-.313-1.555-.878-2.121A2.978 2.978 0 0 0 16.002 2H16zm1 3c0 .267-.104.518-.311.725L14 8.55l-2.707-2.843C11.104 5.518 11 5.267 11 5s.104-.518.294-.708A.977.977 0 0 1 11.979 4c.025.001.502.032 1.067.485.081.065.163.139.247.222l.707.707.707-.707c.084-.083.166-.157.247-.222.529-.425.976-.478 1.052-.484a.987.987 0 0 1 .701.292c.189.189.293.44.293.707z"></path></svg>
<h3 class="services__title">Quality Products & Aftercare</h3>
<p class="services__description">From Elemis, CND to OPI, we use the very best products to back up our pledge for longer lasting beauty combines with ongoing aftercare to maximise your treatment.</p>
</div>
</div>
</section>
<!--========== TREATMENTS ==========-->
<section class="treatment section bd-container" id="treatment">
<span class="section-subtitle">Treatments</span>
<!--========== MANICURES ==========-->
<h2 class="section-title">Manicures and Pedicures</h2>
<div class="treatment__container bd-grid">
<div class="treatment__content">
<img src="assets/img/manicure-1.png" alt="Manicured nails" class="treatment__img">
<h3 class="treatment__name">Classic</h3>
<span class="treatment__detail">Our Classic Manicures and Pedicures are for those that have low levels of dead skin, have had regular treatments and are looking for an express top up treatment.</span>
<span class="treatment__price">£29.00</span>
<a href="#contact" class="button treatment__button">BOOK NOW</a>
</div>
<div class="treatment__content">
<img src="assets/img/manicure-2.png" alt="Manicure and pedicure" class="treatment__img">
<h3 class="treatment__name">OPI Gold</h3>
<span class="treatment__detail">During a Gold manicure or pedicure we will remove any existing nail polish and soak your feet in rose petals and natural bath salt.</span>
<span class="treatment__price">£36.00</span>
<a href="#contact" class="button treatment__button">BOOK NOW</a>
</div>
<div class="treatment__content">
<img src="assets/img/manicure-3.png" alt="Glossy BIAB gel nails" class="treatment__img">
<h3 class="treatment__name">BIAB Gel</h3>
<span class="treatment__detail">After 12 weeks of using BIAB, you will have long, strong, beautiful natural nails. If you need length, then start your journey with Gel Extensions.</span>
<span class="treatment__price">£45.00</span>
<a href="#contact" class="button treatment__button">BOOK NOW</a>
</div>
</div>
<!--========== FACIALS ==========-->
<h2 class="section-title section-title-mt">Facial Treatments</h2>
<div class="treatment__container bd-grid">
<div class="treatment__content">
<img src="assets/img/facial-1.png" alt="Classic facial treatment" class="treatment__img">
<h3 class="treatment__name">Classic Facial</h3>
<span class="treatment__detail">We use steam treatment to help soften up open or dirty pores, ready for exfoliation (manual, mechanical or chemical) and then extraction, leaving your skin feeling soft and clean.</span>
<span class="treatment__price">£35.00</span>
<a href="#contact" class="button treatment__button">BOOK NOW</a>
</div>
<div class="treatment__content">
<img src="assets/img/facial-2.png" alt="Age defying facial treatment" class="treatment__img">
<h3 class="treatment__name">Age Defence Facial</h3>
<span class="treatment__detail">Stop aging symptoms before they appear with the Dermalogica Age Defence Facial. Formulated with AHAs and antioxidants. Dermalogica’s Age Defence Facial targets visible signs of aging and delivers long-lasting hydration.</span>
<span class="treatment__price">£60.00</span>
<a href="#contact" class="button treatment__button">BOOK NOW</a>
</div>
<div class="treatment__content">
<img src="assets/img/facial-3.png" alt="Exfoliating and renewing facial treatment" class="treatment__img">
<h3 class="treatment__name">Resurfacing Facial</h3>
<span class="treatment__detail">This pioneering treatment uses enzymes for powerful exfoliation and renewal. We use a number of ELEMIS’s patented technologies which include: Pro-Collagen Cleansing Balm to dissolve pollutants and daily impurities.</span>
<span class="treatment__price">£75.00</span>
<a href="#contact" class="button treatment__button">BOOK NOW</a>
</div>
</div>
<!--========== BROWS & LASHES ==========-->
<h2 class="section-title section-title-mt">Brows and Lashes</h2>
<div class="treatment__container bd-grid">
<div class="treatment__content">
<img src="assets/img/brows-1.png" alt="Eyebrow tinting" class="treatment__img">
<h3 class="treatment__name">Eyebrow Tinting</h3>
<span class="treatment__detail">Define your arches and all those hard to see hairs, as well as give an overall fullness to your brows. Works wonders for intensifying lighter brow hairs on blondes or redheads.</span>
<span class="treatment__price">£14.00</span>
<a href="#contact" class="button treatment__button">BOOK NOW</a>
</div>
<div class="treatment__content">
<img src="assets/img/brows-2.png" alt="Henna brow treatment" class="treatment__img">
<h3 class="treatment__name">Henna Brows</h3>
<span class="treatment__detail">Henna brows are a type of tinting that stains the skin and brow hair to giving you tinted hairs for up to 6 weeks and a tint on the skin that can last anywhere from 2-10 days.</span>
<span class="treatment__price">£35.00</span>
<a href="#contact" class="button treatment__button">BOOK NOW</a>
</div>
<div class="treatment__content">
<img src="assets/img/brows-3.png" alt="Strip lashes" class="treatment__img">
<h3 class="treatment__name">Strip Lashes</h3>
<span class="treatment__detail">Strip lashes are essentially a full set of lashes that reach from the inner to outer corner of your lash line, and which create a more dramatic appearance compared to other false lash types.</span>
<span class="treatment__price">£40.00</span>
<a href="#contact" class="button treatment__button">BOOK NOW</a>
</div>
</div>
</section>
<!--========== CONTACT US ==========-->
<section class="contact section bd-container" id="contact">
<div class="contact__container bd-grid">
<div class="contact__data">
<span class="section-subtitle contact__initial">Let's talk</span>
<h2 class="section-title contact__initial">Contact us</h2>
<p class="contact__description">Hi, I'm Rachael, founder of The Beauty Retreat. Contact me now to book your treatment. Not sure what you want? No problem, I have over 10 years experience as a beauty therapist. I'd be delighted to discuss your requirements.</p>
</div>
<div class="contact__button">
<a href="mailto:[email protected]" class="button">Contact us now</a>
</div>
</div>
</section>
</main>
<!--========== FOOTER ==========-->
<footer class="footer section bd-container">
<div class="footer__container bd-grid">
<div class="footer__content">
<a href="#" class="footer__logo">The Beauty Retreat</a>
<span class="footer__description">Luxury Salon & Spa</span>
<!-- NOTE: ADD LINKS ONCE RACHAEL HAS SET UP ACCOUNTS AND PROVIDES URLs -->
<!-- <div>
<a href="#" class="footer__social"><i class='bx bxl-facebook'></i></a>
<a href="#" class="footer__social"><i class='bx bxl-instagram'></i></a>
<a href="#" class="footer__social"><i class='bx bxl-twitter'></i></a>
</div> -->
</div>
<div class="footer__content">
<h3 class="footer__title">Services</h3>
<ul>
<li><a href="#services" class="footer__link">Services</a></li>
<li><a href="#treatment" class="footer__link">Treatments</a></li>
<li><a href="mailto:[email protected]" class="footer__link">Reserve your spot</a></li>
</ul>
</div>
<!-- NOTE: ADD DETAILS WHEN R SUPPLIES CONTENT -->
<!-- <div class="footer__content">
<h3 class="footer__title">Information</h3>
<ul>
<li><a href="#" class="footer__link">Event</a></li>
<li><a href="#" class="footer__link">Contact us</a></li>
<li><a href="#" class="footer__link">Privacy policy</a></li>
<li><a href="#" class="footer__link">Terms of services</a></li>
</ul>
</div> -->
<div class="footer__content">
<h3 class="footer__title">Address</h3>
<ul>
<li>156 Liverpool Road North</li>
<li>Maghull</li>
<li>Liverpool</li>
<li>L31 2HW</li>
</ul>
</div>
</div>
<p class="footer__copy">
Copyright © <span class="year">2022</span> by The Beauty Retreat. All Rights Reserved. Made with love by <a href="https://peter-irlam-portfolio.netlify.app/" target="_blank">IrlTech</a>.
</p>
</footer>
<!--========== SCROLL REVEAL ==========-->
<script src="https://unpkg.com/scrollreveal"></script>
<!--========== MAIN JS ==========-->
<script src="assets/js/main.js"></script>
</body>
</html>