<!--
author: W3layouts
author URL: http://222.178.203.72:19005/whst/63/_v2kZxntsrzbnl/
License: Creative Commons Attribution 3.0 Unported
License URL: http://222.178.203.72:19005/whst/63/_bqdZshudbnllnmrznqf//licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Men's Salon Beauty Category Flat Bootstrap Responsive Web Template | Home :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="keywords" content="Men's Salon Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- css files -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' /><!-- bootstrap css -->
<link href="css/style.css" rel='stylesheet' type='text/css' /><!-- custom css -->
<link href="css/font-awesome.min.css" rel="stylesheet"><!-- fontawesome css -->
<!-- //css files -->
<link href="css/css_slider.css" type="text/css" rel="stylesheet" media="all">
<!-- google fonts -->
<link href="//fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
<!-- //google fonts -->
</head>
<body>
<!-- header -->
<header>
<div class="container">
<!-- nav -->
<nav class="py-md-4 py-3 d-lg-flex">
<div id="logo">
<h1> <a href="index.html"><span class="fa fa-scissors"></span> Men's Salon</a></h1>
</div>
<label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
<input type="checkbox" id="drop" />
<ul class="menu mt-lg-4 ml-auto">
<li class="active"><a href="index.html">Home</a></li>
<li class=""><a href="about.html">About Us</a></li>
<li class=""><a href="services.html">Services</a></li>
<li class=""><a href="gallery.html">Gallery</a></li>
<li class="mr-2"><a href="contact.html">Contact</a></li>
<li class=""><span><span class="fa fa-phone"></span> +12 34 3456 7890</span></li>
</ul>
</nav>
<!-- //nav -->
</div>
</header>
<!-- //header -->
<!-- banner -->
<section class="banner_w3lspvt" id="home">
<div class="csslider infinity" id="slider1">
<input type="radio" name="slides" checked="checked" id="slides_1" />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" />
<input type="radio" name="slides" id="slides_4" />
<ul>
<li>
<div class="banner-top">
<div class="overlay">
<div class="container">
<div class="w3layouts-banner-info">
<h3 class="text-wh">We make your hair <span>look <span class="clr">perfect</span></span></h3>
<h4 class="text-wh">We make your hair <span>look Great, perfect!</span></h4>
<a href="about.html" class="button-style mt-4 mr-2">Read More</a>
<a href="#about" class="button-style mt-4">Book Now</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="banner-top1">
<div class="overlay">
<div class="container">
<div class="w3layouts-banner-info">
<h3 class="text-wh">Skilled Barbers Make<span>Great <span class="clr">Beards</span></span></h3>
<h4 class="text-wh">We make your hair <span>look Great, perfect!</span></h4>
<a href="about.html" class="button-style mt-4 mr-2">Read More</a>
<a href="#about" class="button-style mt-4">Book Now</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="banner-top2">
<div class="overlay">
<div class="container">
<div class="w3layouts-banner-info">
<h3 class="text-wh">We make your hair <span>look <span class="clr">perfect</span></span></h3>
<h4 class="text-wh">We make your hair <span>look Great, perfect!</span></h4>
<a href="about.html" class="button-style mt-4 mr-2">Read More</a>
<a href="#about" class="button-style mt-4">Book Now</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="banner-top3">
<div class="overlay">
<div class="container">
<div class="w3layouts-banner-info">
<h3 class="text-wh">Skilled Barbers Make<span>Great <span class="clr">Beards</span></span></h3>
<h4 class="text-wh">We make your hair <span>look Great, perfect!</span></h4>
<a href="about.html" class="button-style mt-4 mr-2">Read More</a>
<a href="#about" class="button-style mt-4">Book Now</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
</div>
</div>
</section>
<!-- //banner -->
<!-- about -->
<section class="about py-5" id="about">
<div class="container py-lg-5">
<div class="row about-grids">
<div class="col-lg-8">
<h2 class="mt-lg-3">Welcome to our Hair salon</h2>
<h5 class="plane mt-md-4 mt-3">We make your hair <span>look Great, perfect!</span></h5>
<p class="">Sed ut perspiciatis unde omnis iste natus error ipsum voluptatem ut accusa ntium dolor remque laudantium, totam rem
aperiam, eaque ipsa quae abse illo quasi sed architecto beatae vitae dicta sut dolor etr explicabo. Morbi a luctus magna, eut rutrum
turpis. Sed perspiciatis unde omnis iste natus error ipsum voluptatem ut accusantium dolor.</p>
<p class="mt-3">Eaque ipsa quae abse illo quasi sed architecto beatae vitae dicta sut dolor etr explicabo. Morbi a luctus magna, eu rutrum
turpis. Sed perspiciatis unde omnis iste natus error et ipsum voluptatem ut accusantium dolor voluptatem ut accusa ntium dolor.</p>
</div>
<div class="col-lg-4 col-md-8 mt-lg-0 mt-5">
<div class="padding">
<img src="images/mustache.png" class="img-fluid" alt="" />
<form action="#" method="post">
<div class="form-style-agile">
<input placeholder="Your Name" name="name" type="text" required="">
<input placeholder="Contact Number" name="number" type="text" required="">
<input placeholder="Address" type="text" required="">
<input placeholder="Timing" type="text" required="">
<button class="book-btn btn">Quick Appointment </button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- //about -->
<!-- about bottom -->
<section class="bottom-banner-w3layouts">
<div class="d-lg-flex">
<div class="col-lg-7 p-lg-0 text-lg-right text-center mt-lg-0 mt-4 bottom-left">
</div>
<div class="col-lg-5 banner-about text-center">
<span class="fa fa-scissors"></span>
<h4 class="mt-sm-4 mt-2">making hair style</h4>
<h5 class="bottom mt-m-4 mt-3">For man growing beards!</h5>
<p class="">Sed ut perspiciatis unde omnis iste natus error ipsum voluptatem ut accusa ntium dolor remque laudantium, totam rem
aperiam, eaque ipsa quae abse illo quasi sed architecto beatae vitae dicta sut dolor etr explicabo. Morbi a luctus magna, eu rutrum
turpis. Sed perspiciatis unde.</p>
</div>
</div>
</section>
<!-- //about bottom -->
<!-- services -->
<section class="services py-5" id="services">
<div class="container py-lg-5 py-3">
<div class="row service-grid-grids text-center">
<div class="col-lg-4 col-md-6 service-grid service-grid1">
<div class="service-icon">
<span class="fa fa-puzzle-piece"></span>
</div>
<h4 class="mt-3">Skilled Barbers</h4>
<p class="mt-3">Persp
基于HTML+CSS+JS开发的网站-男士发型沙龙响应式网站模板.7z （37个子文件） 
[web前端]&[课程设计]&[网站源码]-男士发型沙龙响应式网站模板 html css 
style.css 30KB bootstrap.css 174KB font-awesome.min.css 30KB css_slider.css 13KB
services.html 14KB index.html 15KB contact.html 7KB about.html 10KB images 
g3.jpg 32KB g2.jpg 39KB
mustache.png 28KB facts.png 289KB team4.jpg 32KB banner4.jpg 254KB team3.jpg 36KB banner3.jpg 149KB team2.jpg 30KB g6.jpg 50KB move-top.png 857B banner1.jpg 322KB g5.jpg 36KB te2.png 28KB te1.jpg 26KB g4.jpg 25KB team1.jpg 33KB 3.jpg 104KB banner2.jpg 245KB left.jpg 70KB g1.jpg 45KB 4.jpg 35KB fonts FontAwesome.otf 132KB fontawesome-webfont.eot 162KB fontawesome-webfont.woff 96KB fontawesome-webfont.woff2 75KB
fontawesome-webfont.svg 434KB fontawesome-webfont.ttf 162KB gallery.html 9KB资源评论
