<div class="static-slider10" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/sliders/static-slider/slider10/img1.jpg)">
<div class="container">
<!-- Row -->
<div class="row justify-content-center ">
<!-- Column -->
<div class="col-md-8 align-self-center text-center">
<span class="badge rounded-pill badge-inverse text-white font-weight-light px-3 py-1">Creating Brands</span>
<h1 class="my-3 title text-white text-uppercase">ONE BILLON People Use Facebook</h1>
<h6 class="text-white font-weight-normal op-8">Pellentesque vehicula eros a dui pretium ornare. Phasellus congue vel quam nec luctus.In accumsan at eros in dignissim. Cras sodales nisi nonn accumsan.</h6>
<a class="btn btn-outline-light rounded-pill btn-md mt-3" href=""><span>Do you Need Help?</span></a>
</div>
<!-- Column -->
</div>
</div>
</div
@import url(//fonts.googleapis.com/css?family=Montserrat:400,700);
.static-slider10 {
font-family: "Montserrat", sans-serif;
font-weight: 300;
padding: 10% 0;
background-size: cover;
background-position: center center;
}
.static-slider10 .title {
font-weight: 700;
font-size: 48px;
line-height: 50px;
}
.static-slider10 .subtitle {
line-height: 24px;
}
@media (max-width: 900px) {
.static-slider10 .title {
font-size: 40px;
line-height: 45px;
}
}
.static-slider10 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
.static-slider10 .badge {
line-height: 21px;
}
.static-slider10 .badge-inverse {
background: #3e4555;
}
.static-slider10 .op-8 {
opacity: 0.8;
}