-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (198 loc) · 8.3 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
<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">
<title> HAIR STUDIO </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link rel="icon" href="img/logo.jpg">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
<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=Poppins:wght@500&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
</head>
<body>
<section id="banner">
<div class="banner-text">
<h1>Hair Studio </h1>
<p>Style Your hair is Style your Life</p>
<div class="banner-btn">
<a href="#feature"><span></span>Read More</a>
</div>
</div>
</section>
<div id="sideNav">
<nav>
<ul>
<li><a href="#banner">HOME</a></li>
<li><a href="#feature">FEATURES</a></li>
<li><a href="#service">SERVICES</a></li>
<li><a href="#testimonial">TESTIMONIALS</a></li>
<li><a href="#footer">CONTACT</a></li>
</ul>
</nav>
</div>
<div id="menuBtn">
<img src="img/menu.png" id="menu">
</div>
<!--Features-->
<section id="feature">
<div class="title-text">
<p>FEATURES</p>
<h1>Why Choose Us</h1>
</div>
<div class="feature-box">
<div class="features">
<h1>Experienced Staff</h1>
<div class="features-desc">
<div class="feature-icon">
<img src="img/shield icon.png" alt="">
</div>
<div class="feature-text">
<p>With years of experience in the industry, our staff is equipped with the knowledge and expertise to deliver high-quality results every time.</p>
</div>
</div>
<h1>Pre Booking Online</h1>
<div class="features-desc">
<div class="feature-icon">
<img src="img/tick box.png" alt="">
</div>
<div class="feature-text">
<p>Don't miss out on your desired appointment time! Pre-book online now to secure your spot and receive a special discounted rate.</p>
</div>
</div>
<h1>Affordable Cost</h1>
<div class="features-desc">
<div class="feature-icon">
<img src="img/dollar.png" alt="">
</div>
<div class="feature-text">
<p>Looking for affordable haircuts and grooming services? you are on the right place.</p>
</div>
</div>
</div>
<div class="features-img">
<img src="img/barber-man.jpg" alt="">
</div>
</div>
</section>
<!--Service-->
<section id="service">
<div class="title-text">
<p>SERVICES</p>
<h1>We Provide Better</h1>
</div>
<div class="service-box">
<div class="single-service">
<img src="img/pic-1.jpg" alt="">
<div class="overlay"></div>
<div class="service-desc">
<h3>Hair Styling</h3>
<hr>
<p>At our barber shop, we offer a range of hair styling services to help our clients achieve their desired look.</p>
</div>
</div>
<div class="single-service">
<img src="img/pic-2.jpg" alt="">
<div class="overlay"></div>
<div class="service-desc">
<h3>Beard Trim</h3>
<hr>
<p>At our barber shop, we offer beard trimming services to help our clients maintain a well-groomed and stylish beard.</p>
</div>
</div>
<div class="single-service">
<img src="img/pic-3.jpg" alt="">
<div class="overlay"></div>
<div class="service-desc">
<h3>Hair Cut</h3>
<hr>
<p>At our barber shop, we offer a range of hair cutting services to meet the needs of our clients.</p>
</div>
</div>
<div class="single-service">
<img src="img/pic-4.jpg" alt="">
<div class="overlay"></div>
<div class="service-desc">
<h3>Dry Shampoo</h3>
<hr>
<p>Keep your hair looking and feeling fresh between haircuts with our selection of dry shampoos!</p>
</div>
</div>
</div>
</section>
<!-- Testimonial -->
<section id="testimonial">
<div class="title-text">
<p>TESTIMONIAL</p>
<h1>What Client Says</h1>
</div>
<div class="testimonial-row">
<div class="testimonial-col">
<div class="user">
<img src="img/img-1.jpg" alt="">
<div class="user-info">
<h4>KEN NORMAN <img src="img/twitter.png"></h4>
<small>@kennorman</small>
</div>
</div>
<p>I recently had the pleasure of visiting this shop and was blown away by the level of service I received. From the moment I walked in the door, the staff were friendly and welcoming, and the atmosphere was clean and inviting.</p>
</div>
<div class="testimonial-col">
<div class="user">
<img src="img/img-2.jpg" alt="">
<div class="user-info">
<h4>Laira Karian <img src="img/twitter.png"></h4>
<small>@lairakarian</small>
</div>
</div>
<p>They took the time to listen to my preferences and gave me a haircut that exceeded my expectations. I was extremely happy with the end result and will definitely be returning to this shop in the future. Highly recommend!"
</p>
</div>
<div class="testimonial-col">
<div class="user">
<img src="img/img-3.jpg" alt="">
<div class="user-info">
<h4>Ricky Danial <img src="img/twitter.png"></h4>
<small>@rickydanial</small>
</div>
</div>
<p>Everything was more than I have ever experienced in any other shop. Simply Outstanding services! I will surely come again. Highly recommend!</p>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<img src="img/footer-img.png" class="footer-img">
<div class="title-text">
<p>CONTACT</p>
<h1>Visit Shop Today</h1>
</div>
<div class="footer-row">
<div class="footer-left">
<h1>Opening Hours</h1>
<p><img src="img/clock.png"> Sunday to Thursday- 9am to 11pm</p>
<p><img src="img/clock.png"> Friday and Saturday- 9am to 5pm</p>
</div>
<div class="footer-right">
<h1>Get in Touch</h1>
<p>Chandpur sadar, Chandpur <img src="img/location.png"></p>
<p>example@website.com <img src="img/paperplane.png"></p>
<p>+0 123456789 <img src="img/phone.png"></p>
</div>
</div>
<div class="social-links">
<img src="img/facebook.png">
<img src="img/instagram.png">
<img src="img/youtube.png">
<img src="img/twitter.png">
<p> Development by <a href="https://ialamin.bio.link" target="_blank"> Al Amin </a> <br> All rights reserved © 2023 </p>
</div>
</section>
<!-- JS -->
<script src="script.js"></script>
</body>
</html>