-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (130 loc) · 5.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="assets/images/icons8-scissors-96.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>Barb'her salon</title>
</head>
<body>
<nav id="nav">
<div>
<h2><a href="#main"class="navEl icon">Barb'her</a></h2>
</div>
<div>
<ul>
<li><a href="#three"class="navEl">Services</a></li>
<li><a href="#staff" class="navEl">About</a></li>
<li><a href="#lookbook"class="navEl" >Gallery</a></li>
<li><a href=""class="navEl"></a>Contact</li>
<li><a href=""><i class="fas fa-search"></i></a></li>
<li><a href=""><i class="fas fa-shopping-bag"></i></a></li>
</ul>
</div>
<div><h2 class="navEl bookOnline">Book Online</h2></div>
</nav>
<div class="main" id="main">
<section class="mainSec">
<h1 class="tagline">A new-found confidence</h1>
<!-- <p>Life Isn't perfect but your hair can be! </p> -->
<button href="#three" class="button black"><a href="#three">Our services</a></button>
</section>
</div>
<div class="tricky">
<h2 class="offer">Your first visit?</h2>
<br>
<h1>-20%</h1><h3> off for the first chassic hair coloring!<h3>
<br>
<button class="button trickyButton">Book online</button>
</div>
<div class="three" id="three">
<section>
<!-- <div> <i class="fas fa-circle back"></i></div> -->
<i class="fas fa-scissors front"></i>
<h3>Expert Beauticians</h3>
<p>The staff is trained from international schools like "Tony & Guy". You Know you'll be in expert company soon.</p>
</section>
<section>
<!-- <div> <i class="fas fa-circle back"></i></div> -->
<i class="fa-solid fa-award front"></i>
<h3>Quality Services</h3>
<p>All the staff are dedicated to make you feel special at all times. One client said "You'd be a two michellin star restraunt if that was your expertise". It's high praise we guess.</p>
</section>
<section>
<!-- <div class="back">
</div> -->
<!-- <i class="fas fa-circle "></i>
</i> -->
<i class="fa-solid fa-arrow-up-from-water-pump front"></i>
<h3>Beauty Products</h3>
<p>We've partnered with all-natural brands like Mama Earth to provide the best skincare products. Get some <a href="" class="linkVisible">here</a></p>
</section>
</div>
<div class="classic">
<section class="classicChild">
<h2>Make your own momentum.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus at excepturi laborum, cumque debitis ipsum repellat iste, id eum odio voluptates quas quisquam recusandae, cupiditate illo perspiciatis. Mollitia, delectus eaque!</p>
<button>Read More</button>
</section>
<section class="classicChild2">
</section>
</div>
<div class="staff" id="staff">
<section class="staffPics stilyst2">
<img src="assets/images/stylist2.jpg" alt="">
<article class="staffNames"><h2>
Alita Williams
</h2>
<p>colorist</p></article>
</section>
<section class="staffPics stilyst1">
<img src="assets/images/stylist4.jpg" alt="">
<article class="staffNames"><h2>Ayesha Lake</h2>
<p>Styler</p></article>
</section>
<section class="staffPics stilyst3">
<img src="assets/images/stylist3.jpg" alt="">
<article class="staffNames black"> <h2>Smith Michelle</h2>
<P>Beautician</P></article>
</section>
</div>
<div class="discount" id="discount">
<section class="discountSec">
<h2>color day offer!</h2>
<br>
<h1>-10%</h1><h2> on haircut color and highlights</h2>
<br>
<button class="button black">Book Appointment</button>
</section>
</div>
<div class="lookbook" id="lookbook">
<h1>Gallery</h1>
<section class="sixImages">
<div class="secondRoute">
<!-- <img src="assets/images/Braids.jpg" alt=""> -->
<article class="short img1"><img src="" alt=""></article>
<article class="long img2"></article>
</div>
<div class="secondRoute">
<article class="long img3"></article>
<article class="short img4"></article>
</div>
<div class="secondRoute"> <article class="short img5"></article>
<article class="long img6"></article></div>
</section>
</div>
<footer class="footer">
<h2><a href="#main"class="footerEl icon">Barb'her</a></h2>
<a href="https://tau-website-maker.netlify.app/" class="linkVisible"><h3>Made by <span class="linkVisible">Tau</span> </h3></a>
<ul class="footerList">
<li><a href="#discount">Services</a></li>
<li><a href="#staff">About</a></li>
<li><a href="https://tau-website-maker.netlify.app">Contact</a></li>
</ul>
</footer>
<script src="main.js"></script>
</body>
</html>