"Barber shop Bootstrap 4 Template"
Bootstrap 4.1.1 Snippet by grafreez

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<nav class="navbar navbar-expand-md fixed-top top-nav">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><strong>Grafreez</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="https://grafreez.com/wp-content/temp_demos/razor/img/icons/menu.png"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto text-sm-center text-md-center">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#price">Prices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonial">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-auto search-box">
<li class="nav-item">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
/*Google Fonts*/
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
@import url('https://fonts.googleapis.com/css?family=Montserrat:500,600,700');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700');
body, html{
height: 100%;
width:100%;
}
body{
font-size: 1rem;
font-family: 'Source Sans Pro', sans-serif;
}
/* ========== Universal Stylings ========== */
h1,h2,h3,h4,h5{
position: relative;
font-family: 'Montserrat', sans-serif;
}
h6{
position: relative;
}
.bg-primary{
background-color: #B47F41!important;
}
.bg-dark{
background-color: #0f0a05!important;
}
.bg-white{
background-color: #fff;
}
.text-inverse{
color: #074052;
}
.text-primary{
color: #B47F41!important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
// Page loadinmg animation
if ((".loader").length) {
// show Preloader until the website ist loaded
$(window).on('load', function () {
$(".loader").fadeOut("slow");
});
}
/* Onpage linkng smooth effect */
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
// Sticky Header
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".top-nav").addClass("light-header");
} else {
$(".top-nav").removeClass("light-header");
}
});
// Year for copy content
$(function(){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: