"Untitled"
Bootstrap 4.1.1 Snippet by tieusuquay79

Post to Facebook Tweet this

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 ---------->
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top"> <a href="#" class="navbar-brand">BRANDNAME</a> <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item"> <a href="" class="nav-link">HOME</a> </li>
<li class="nav-item"> <a href="" class="nav-link">ABOUT</a> </li>
<li class="nav-item"> <a href="" class="nav-link">SERVICES</a> </li>
<li class="nav-item"> <a href="" class="nav-link">CONTACTS</a> </li>
</ul>
</div>
</nav>
<header>
<div id="indicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#indicators" data-slide-to="0" class="active"></li>
<li data-target="#indicators" data-slide-to="1"></li>
<li data-target="#indicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">Image one</h3>
<p class="lead">Some description about the first slide</p>
</div>
</div> <!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1460602594182-8568137446ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80')">
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">Image two</h3>
<p class="lead">Some description about the second slide</p>
</div>
</div> <!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1465146633011-14f8e0781093?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
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
.carousel-item {
height: 65vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
#mainNavbar {
padding-left: 50px;
padding-top: 20px
}
.navbar-dark .navbar-brand {
font-family: 'Source Serif Pro', serif
}
.navbar-nav .nav-link {
font-family: 'Source Serif Pro', serif
}
.display-4 {
font-family: 'Source Serif Pro', serif
}
.lead {
font-family: 'Source Serif Pro', serif
}
.navbar.scrolled {
background: rgb(34, 31, 31);
transition: background 500ms
}
.font-weight-light {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard

Questions / Comments: