HTML

<!DOCTYPE html>
<html>
<head>
<title>Barber Website</title>
<link rel=“stylesheet” href=“style.css”>
<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>
<link href=“https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Poppins:wght@100;400&display=swap” rel=“stylesheet”>
<script src=“https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js”></script>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<body>
<section id=“banner”>
<img src=“images/logo.png” alt=“logo” class=“logo”>
<div class=“banner-text”>
<h1>Hair Studio</h1>
<p>style your hair is style your life</p>
<div class=“banner-btn”>
<a href=“#”><span></span>Find out</a>
<a href=“#”><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”>MEET US</a></li>
</ul>
</nav>
</div>
<div id=“menuBtn”>
<img src=“images/menu.png” alt=“menu” id=“menu”>
</div>
<!——-feature section——>
<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=“feature-desc”>
<div class=“feature-icon”>
<i class=“fa fa-shield”></i>
</div>
<div class=“feature-text”>
<p>
This is a proffesor barber to style you perfect
in all one.So It’s time to test for free with Proffesor Michael Whilliams.
</p>
</div>
</div>
<h1>Pre Booking Online</h1>
<div class=“feature-desc”>
<div class=“feature-icon”>
<i class=“fa fa-check-square-o”></i>
</div>
<div class=“feature-text”>
<p>
This is a proffesor barber to style you perfect
in all one.So It’s time to test for free with Proffesor Michael Whilliams.
</p>
</div>
</div>
<h1>Affordable Costs</h1>
<div class=“feature-desc”>
<div class=“feature-icon”>
<i class=“fa fa-inr”></i>
</div>
<div class=“feature-text”>
<p>
This is a proffesor barber to style you perfect
in all one.So It’s time to test for free with Proffesor Michael Whilliams.
</p>
</div>
</div>
</div>
<div class=“feature-img”>
<img src=“images/barber-man.jpg” alt=“Barber man”>
</div>

</div>
</section>
<!–Service–>
<section id=“service”>
<div class=“title-text”>
<p>SERVICES</p>
<h1>We Provide Better</h1>
</div>
<div class=“serivce-box”>
<div class=“service-img”>
<img src=“images/pic1.jpg” alt=“pic1”>
<div class=“overlay”></div>
<div class=“service-desc”>
<h3>Hair Style</h3>
<hr />
<p>This is hair style part that you can choose you style from the picture</p>
</div>
</div>
<div class=“service-img”>
<img src=“images/pic2.jpg” alt=“pic2”>
<div class=“overlay”></div>
<div class=“service-desc”>
<h3>Hair Style</h3>
<hr />
<p>This is hair style part that you can choose you style from the picture</p>
</div>
</div>
<div class=“service-img”>
<img src=“images/pic3.jpg” alt=“pic3”>
<div class=“overlay”></div>
<div class=“service-desc”>
<h3>Hair Style</h3>
<hr />
<p>This is hair style part that you can choose you style from the picture</p>
</div>
</div>
<div class=“service-img”>
<img src=“images/pic4.jpg” alt=“pic4”>
<div class=“overlay”></div>
<div class=“service-desc”>
<h3>Hair Style</h3>
<hr />
<p>This is hair style part that you can choose you style from the picture</p>
</div>
</div>

</div>

</section>
<!– Testimonail –>
<section id=“Testimonial”>
<div class=“title-text”>
<p>Testimonial</p>
<h1>What Clients Say</h1>
</div>
<div class=“testimonial-row”>
<div class=“testimonial-col”>
<div class=“user”>
<img src=“images/user1.jpeg” alt=“user1”>
<div class=“user-info”>
<h4>Ken Norman<i class=“fa fa-twitter”></i></h4>
<small>@kennorman</small>
</div>
</div>
<p>grea great barbershop with grea barber, This is a barbershop for you, you can reserve your time online and See each other at that time and
comlplete your style at a specific time you’ve arranged
</p>
</div>
<div class=“testimonial-col”>
<div class=“user”>
<img src=“images/user2.jpeg” alt=“user2”>
<div class=“user-info”>
<h4>John Miller<i class=“fa fa-twitter”></i></h4>
<small>@JohnMiller2</small>
</div>
</div>
<p>This is a barbershop for you, you can reserve your time online and See each other at that time.
</p>
</div>
<div class=“testimonial-col”>
<div class=“user”>
<img src=“images/user3.jpeg” alt=“user3”>
<div class=“user-info”>
<h4>Chris Obama<i class=“fa fa-twitter”></i></h4>
<small>@Chris20</small>
</div>
</div>
<p>This is a barbershop for you, you can reserve your time online and See each other at that time and
comlplete your style at a specific time you’ve arranged
</p>
</div>
</div>

</section>
<!– footer –>
<section id=“footer”>
<img src=“images/footer.png” alt=“footer” 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>Openin Hours</h1>
<p><i class=“fa fa-clock-o”></i>Saturday to Thursday – 9am to 9pm</p>
<p><i class=“fa fa-clock-o”></i>Friday – 5pm to 9pm</p>
 
</div>
<div class=“footer-right”>
<h1>Get In Touch</h1>
<p>#30, Shah St, Tehran, Iran<i class=“fa fa-map-marker”></i></p>
<p>Myemail@website.com<i class=“fa fa-paper-plane”></i></p>
<p>+098 912 000 0011<i class=“fa fa-phone”></i></p>
</div>
</div>
<div class=“social-icons”>
<i class=“fa fa-facebook”></i>
<i class=“fa fa-instagram”></i>
<i class=“fa fa-twitter”></i>
<i class=“fa fa-youtube-play”></i>
<p>Copyright H.Etesami</p>
</div>

</section>

<script>
var menuBtn = document.getElementById(‘menuBtn’)
var sideNav = document.getElementById(‘sideNav’)
var menu = document.getElementById(‘menu’)

sideNav.style.right = “-250px”;

menuBtn.onclick = function() {
if(sideNav.style.right == “-250px”) {
sideNav.style.right = “0”;
menu.src = “images/close.png”
}
else {
sideNav.style.right = “-250px”;
menu.src = “images/menu.png”
}
}
var scroll = new SmoothScroll(‘a[href*=”#”]’, {
speed: 500,
speedAsDuration: true
});
</script>
</body>
</head>
</html>
 
 
 

CSS

* {
margin: 0;
padding: 0;
font-family: ‘Poppins’, sans-serif;
}
#banner {
background-image: linear-gradient(rgba(0,0,0,0.5), #009688), url(images/banner.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.logo {
width: 120px;
position: absolute;
top: 4%;
left: 10%;

}
.banner-text {
text-align: center;
padding-top: 180px;
color: #fff;
}
.banner-text h1 {
font-size: 130px;
font-family: ‘Kaushan Script’, cursive;
}
.banner-text p {
font-size: 20px;
font-style: italic;
}
.banner-btn {
margin: 70px auto 0;
}
.banner-btn a {
width: 150px;
display: inline-block;
border: 0.5px solid #fff;
color: #fff;
text-decoration: none;
padding: 12px 0;
margin: 0 10px;
position: relative;
z-index: 1;
transition: color 0.5;
}
.banner-btn a span {
width: 0;
height: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: 0.5s;
}
.banner-btn a:hover span {
width: 100%
}
.banner-btn a:hover {
color: #000;
}
#sideNav {
position: fixed;
top: 0;
right: -250px;
width: 250px;
height: 100vh;
background: #009688;
z-index: 2;
transition: 0.5s;

}
nav ul li {
list-style: none;
margin: 50px 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
#menuBtn {
width: 50px;
height: 50px;
background: #009688;
position: fixed;
right: 30px;
top: 20px;
border-radius: 3px;
text-align: center;
z-index: 2;
cursor: pointer;
}
#menuBtn img {
width: 25px;
margin-top: 15px;
}
@media screen and (max-width: 770px) {
.banner-text h1 {
font-size: 40px;
}
.banner-btn a {
display: block;
margin: 20px auto;
}
}
#feature {
width: 100%;
padding: 70px 0;
}
.title-text {
text-align: center;
padding-bottom: 70px;
}
.title-text p {
font-size: 20px;
margin: auto;
color: #009688;
font-weight: bold;
position: relative;
display: inline-block;
z-index: 1;
}
.title-text p::after {
content: ”;
width: 50px;
height: 35px;
position: absolute;
top: -20px;
left: 0;
z-index: -1;
background: linear-gradient(#009688, #fff);
transform: rotate(10deg);
border-top-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.title-text h1 {
font-size: 50px;
}
.feature-box {
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
}
.features {
flex-basis: 50%;
}
.feature-img {
flex-basis: 50%;
margin: auto;
}
.feature-img img {
width: 70%;
border-radius: 10px;
}
.features h1 {
color: #009688;
text-align: left;
font-weight: 100;
margin-bottom: 10px;
}
.feature-desc {
display: flex;
margin-bottom: 40px;
align-items: center;
}
.feature-icon .fa {
width: 50px;
height: 50px;
font-size: 30px;
border-radius: 8px;
color: #009688;
border: 1px solid #009688;
line-height: 50px;
}
.feature-text p {
padding: 0 20px;
text-align: initial;
}
@media screen and (max-width: 770px) {
.title-text h1 {
font-size: 30px;
}
.features {
flex-basis: 100%;
}
.feature-img {
flex-basis: 100%;
}.feature-img img {
width: 100%;
}
}
/*—Services—*/

#service {
width: 100%;
padding: 70px 0;
background: #efefef;
}
.serivce-box {
width: 80%;
display: flex;
flex-wrap: wrap;
margin: auto;
justify-content: space-around;
}
.service-img {
flex-basis: 48%;
text-align: center;
border-radius: 7px;
margin-bottom: 20px;
color: #fff;
position: relative;
}
.service-img img {
width:100%;
border-radius: 7px;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: linear-gradient(rgba(0,0,0,0.5), #009688);
cursor: pointer;
border-radius: 7px;
opacity: 0;
transition: 1s;
}
.service-img:hover .overlay {
opacity: 1;
}
.service-desc {
width: 80%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: 1s;
}
hr {
background: #fff;
height: 2px;
border: 0;
margin: 15px auto;
width: 60%;
}
.service-desc p {
font-size: 14px;
}
.service-img:hover .service-desc {
opacity: 1;
bottom: 40%;
}
@media screen and (max-width: 770px) {
.service-img {
flex-basis: 100%;
margin-bottom: 30px;
}
.service-desc p {
font-size: 12px;
}
hr {
margin: 5px auto;
}
}
/* testimonial */
#Testimonial {
width: 100%;
padding: 70px 0;
}
.testimonial-row {
width: 80%;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
}
.testimonial-col {
flex-basis: 28%;
padding: 10px;
margin-bottom: 30px;
border-radius: 5px;
box-shadow: 0 10px 20px 3px #00968814;
cursor: pointer;
transition: transform 0.5s;

}
.testimonial-col p {
font-size: 14px;
}
.user {
display: flex;
margin: 20px auto;
}
.user img {
width: 60px;
margin-right: 12px;
border-radius: 3px;
}
.user-info .fa {
margin-left: 10px;
color: #27c0ff;
font-size: 20px;
}
.user-info small {
color: #009688;
}
.testimonial-col:hover {
transform: translateY(-7px);
}
@media screen and (max-width: 770px) {
.testimonial-col {
flex-basis: 100%;
}
}
/* footer */
#footer {
padding: 100px 0 20px;
background: #efefef;
position: relative;
}
.footer-row {
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
}
.footer-left, .footer-right {
flex-basis: 48%;
padding: 10px;
margin-bottom: 20px;
}
.footer-right {
text-align: right;
}
.footer-row h1 {
margin: 10px 0;
}
.footer-row p {
line-height: 35px;
}
.footer-left .fa, .footer-right .fa {
font-size: 20px;
color: #009688;
margin: 10px;

}
.footer-img {
max-width: 300px;
opacity: 0.1;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-50%);
}
.social-icons {
text-align: center;
}
.social-icons .fa {
width: 40px;
height: 40px;
border: 1px solid #009688;
line-height: 40px;
font-size: 20px;
cursor: pointer;
color: #009688;
margin: 40px 5px 0;
transition: 0.5s;
}
.social-icons .fa:hover {
background: #009688;
color: #fff;
transform: translateY(-7px);
}
.social-icons p {
font-size: 12px;
margin-top: 20px;
}
@media screen and (max-width: 770px) {
.footer-left, .footer-right {
flex-basis: 100%;
font-size: 14px;
}
.footer-img {
top: 20%;
}

}
 
 
 
 
error: Content is protected !!
Teacher Etesami

Welcome to Teacher Etesami

Your journey to fluency starts here.

Start Your English Journey