Skip to content

Commit 33a8a73

Browse files
oyerohabiboyerohabib
committed
completed the barber salon website
1 parent dd3b531 commit 33a8a73

File tree

15 files changed

+692
-0
lines changed

15 files changed

+692
-0
lines changed

‎barber-website/assets/css/style.css

Lines changed: 472 additions & 0 deletions
Large diffs are not rendered by default.

‎barber-website/assets/images/banner.jpg

447 KB
Loading

‎barber-website/assets/images/barber-man.jpg

134 KB
Loading

‎barber-website/assets/images/close.png

2.11 KB
Loading

‎barber-website/assets/images/footer-img.png

66.8 KB
Loading

‎barber-website/assets/images/img-1.jpg

69.8 KB
Loading

‎barber-website/assets/images/img-2.jpg

70 KB
Loading

‎barber-website/assets/images/img-3.jpg

51.3 KB
Loading

‎barber-website/assets/images/logo.png

5.05 KB
Loading

‎barber-website/assets/images/menu.png

1.51 KB
Loading

‎barber-website/assets/images/pic-1.jpg

93 KB
Loading

‎barber-website/assets/images/pic-2.jpg

82.9 KB
Loading

‎barber-website/assets/images/pic-3.jpg

114 KB
Loading

‎barber-website/assets/images/pic-4.jpg

71.7 KB
Loading

‎barber-website/index.html

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="assets/css/style.css">
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
10+
<title>Barber Shop Website Design</title>
11+
</head>
12+
<body>
13+
14+
<section id="banner">
15+
<img src="./assets/images/logo.png" class="logo">
16+
<div class="banner-text">
17+
<h1>hair studio</h1>
18+
<p>style you hair like your life</p>
19+
<div class="banner-btn">
20+
<a href="#"><span></span>find out</a>
21+
<a href="#"><span></span>read more</a>
22+
</div>
23+
</div>
24+
</section>
25+
26+
<div id="side-nav">
27+
<nav>
28+
<ul>
29+
<li><a href="#banner">home</a></li>
30+
<li><a href="#feature">features</a></li>
31+
<li><a href="#services">services</a></li>
32+
<li><a href="#testimonial">testimonials</a></li>
33+
<li><a href="#footer">meet us</a></li>
34+
</ul>
35+
</nav>
36+
</div>
37+
38+
<div id="menu-btn">
39+
<img src="./assets/images/menu.png" id=menu>
40+
</div>
41+
42+
<!-- features -->
43+
<section id="feature">
44+
<div class="title-text">
45+
<p>features</p>
46+
<h1>why choose us</h1>
47+
</div>
48+
<div class="feature-box">
49+
<div class="features">
50+
<h1>experienced staff</h1>
51+
<div class="features-desc">
52+
<div class="feature-icon">
53+
<i class="fa fa-shield" aria-hidden="true"></i>
54+
</div>
55+
<div class="feature-text"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet veritatis pariatur nihil quibusdam quia!</p></div>
56+
</div>
57+
<h1>pre booking online</h1>
58+
<div class="features-desc">
59+
<div class="feature-icon">
60+
<i class="fa fa-check-square-o" aria-hidden="true"></i>
61+
</div>
62+
<div class="feature-text"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet veritatis pariatur nihil quibusdam quia!</p></div>
63+
</div>
64+
<h1>affordable cost</h1>
65+
<div class="features-desc">
66+
<div class="feature-icon">
67+
<i class="fa fa-inr" aria-hidden="true"></i>
68+
</div>
69+
<div class="feature-text"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet veritatis pariatur nihil quibusdam quia!</p></div>
70+
</div>
71+
</div>
72+
<div class="features-img">
73+
<img src="./assets/images/barber-man.jpg" alt="">
74+
</div>
75+
</div>
76+
</section>
77+
78+
<!-- services -->
79+
<section id="services">
80+
<div class="title-text">
81+
<p>services</p>
82+
<h1>we provide better</h1>
83+
</div>
84+
<div class="service-box">
85+
<div class="single-service">
86+
<img src="./assets/images/pic-1.jpg">
87+
<div class="overlay"></div>
88+
<div class="service-desc">
89+
<h3>hair styling</h3>
90+
<hr>
91+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae eos at earum dicta modi. Labore aut molestiae culpa nobis voluptates.</p>
92+
</div>
93+
</div>
94+
<div class="single-service">
95+
<img src="./assets/images/pic-2.jpg">
96+
<div class="overlay"></div>
97+
<div class="service-desc">
98+
<h3>beard trim</h3>
99+
<hr>
100+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae eos at earum dicta modi. Labore aut molestiae culpa nobis voluptates.</p>
101+
</div>
102+
</div>
103+
<div class="single-service">
104+
<img src="./assets/images/pic-3.jpg">
105+
<div class="overlay"></div>
106+
<div class="service-desc">
107+
<h3>dry shampoo</h3>
108+
<hr>
109+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae eos at earum dicta modi. Labore aut molestiae culpa nobis voluptates.</p>
110+
</div>
111+
</div>
112+
<div class="single-service">
113+
<img src="./assets/images/pic-4.jpg">
114+
<div class="overlay"></div>
115+
<div class="service-desc">
116+
<h3>hair styling</h3>
117+
<hr>
118+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae eos at earum dicta modi. Labore aut molestiae culpa nobis voluptates.</p>
119+
</div>
120+
</div>
121+
</div>
122+
</section>
123+
124+
<!-- testimonial -->
125+
<section id="testimonial">
126+
<div class="title-text">
127+
<p>testimonial</p>
128+
<h1>what client says</h1>
129+
</div>
130+
<div class="testimonial-row">
131+
<div class="testimonial-col">
132+
<div class="user">
133+
<img src="./assets/images/img-1.jpg">
134+
<div class="user-info">
135+
<h4>oyero habib <i class="fa fa-twitter"></i></h4>
136+
<small>@oyerohabib</small>
137+
</div>
138+
</div>
139+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem aut exercitationem cumque sequi mollitia veritatis reprehenderit. Officiis voluptatum,
140+
eos voluptas dolorem voluptates adipisci? Natus delectus error et distinctio maiores nulla fugit nesciunt dolorum inventore voluptatum.</p>
141+
</div>
142+
<div class="testimonial-col">
143+
<div class="user">
144+
<img src="./assets/images/img-2.jpg">
145+
<div class="user-info">
146+
<h4>oyero nasir <i class="fa fa-twitter"></i></h4>
147+
<small>@oyeronasir</small>
148+
</div>
149+
</div>
150+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem aut exercitationem cumque sequi mollitia veritatis reprehenderit. Officiis voluptatum,
151+
eos voluptas dolorem voluptates adipisci?</p>
152+
</div>
153+
<div class="testimonial-col">
154+
<div class="user">
155+
<img src="./assets/images/img-3.jpg">
156+
<div class="user-info">
157+
<h4>oyero adam <i class="fa fa-twitter"></i></h4>
158+
<small>@oyeroadam</small>
159+
</div>
160+
</div>
161+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem aut exercitationem cumque sequi mollitia veritatis reprehenderit. Officiis voluptatum,
162+
eos voluptas dolorem voluptates adipisci? Natus delectus error et distinctio maiores nulla fugit nesciunt dolorum inventore voluptatum.</p>
163+
</div>
164+
</div>
165+
</section>
166+
167+
<!-- footer -->
168+
<section id="footer">
169+
<img src="./assets/images/footer-img.png" class="footer-img">
170+
<div class="title-text">
171+
<p>contact</p>
172+
<h1>visit our shop today</h1>
173+
</div>
174+
<div class="footer-row">
175+
<div class="footer-left">
176+
<h1>opening hours</h1>
177+
<p><i class="fa fa-clock-o"></i>monday to friday - 9am to 9pm</p>
178+
<p><i class="fa fa-clock-o"></i>saturday to sunday - 8am to 11pm</p>
179+
</div>
180+
<div class="footer-right">
181+
<h1>get in touch</h1>
182+
<p>kemta idi-aba, abeokuta, ogun state<i class="fa fa-map-marker"></i></p>
183+
<p>oyerohabib@yahoo.com<i class="fa fa-paper-plane"></i></p>
184+
<p>+234 701 995 1241<i class="fa fa-phone"></i></p>
185+
</div>
186+
</div>
187+
<div class="social-links">
188+
<div class="fa fa-facebook"></div>
189+
<div class="fa fa-instagram"></div>
190+
<div class="fa fa-twitter"></div>
191+
<div class="fa fa-youtube-play"></div>
192+
<p>copyright. oyero habib</p>
193+
</div>
194+
</section>
195+
196+
<script>
197+
var menuBtn = document.getElementById("menu-btn");
198+
var sideNav = document.getElementById("side-nav");
199+
var menu = document.getElementById("menu");
200+
201+
sideNav.style.right = "-250px"
202+
203+
menuBtn.onclick = function() {
204+
if(sideNav.style.right == "-250px") {
205+
sideNav.style.right = "0";
206+
menu.src = "./assets/images/close.png"
207+
} else {
208+
sideNav.style.right = "-250px";
209+
menu.src = "./assets/images/menu.png"
210+
}
211+
}
212+
213+
// All animations will take exactly 500ms
214+
var scroll = new SmoothScroll('a[href*="#"]', {
215+
speed: 1000,
216+
speedAsDuration: true
217+
});
218+
</script>
219+
</body>
220+
</html>

0 commit comments

Comments
 (0)