<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 ---------->
<!-- Slick Slider-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<section>
<div class="banner_sec">
<div class="slidr">
<div class="slide1">
<div class="slide_cont text-center">
<h1>It Is More Difficult to Give Money Away </h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<button class="btn btn-yelow my-2">Donate Now<span>
<i class="fa fa-long-arrow-right" ></i></span>
</button>
<button class="btn btn-white my-2">Join Now<span>
<i class="fa fa-long-arrow-right" ></i></span>
</button>
</div>
</div>
<div class="slide2">
<div class="slide_cont text-center">
<h1>It Is More Difficult to Give Money Away </h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<button class="btn btn-yelow my-2">Donate Now<span>
<i class="fa fa-long-arrow-right" ></i></span>
</button>
<button class="btn btn-white my-2">Join Now<span>
<i class="fa fa-long-arrow-right" ></i></span>
</button>
</div>
</div>
</div>
</div>
</section>
/* ==========================================================================
Banner Css Start
========================================================================== */
.slide1 {
height: 100vh;
min-height: 751px;
background: linear-gradient(rgb(0 0 0 / 72%), rgb(0 0 0 / 62%)), url("https://placeimg.com/1000/1000/nature") no-repeat center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
.slide2 {
height: 100vh;
min-height: 751px;
background: linear-gradient(rgb(0 0 0 / 72%), rgb(0 0 0 / 62%)), url("https://placeimg.com/1000/1000/nature") no-repeat center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
.slide1 {
color: #fff;
display: flex !important;
align-items: center;
text-align: center;
}
.slide2 {
color: #fff;
display: flex !important;
align-items: center;
text-align: center;
}
.slide_cont {
max-width: 600px;
margin: 0 auto;
}
.slide_cont h1 {
font-family: 'DM Serif Display', serif;
font-size: 65px;
font-weight: 400;
line-height: 75px;
padding-bottom: 10px;
}
.slide_cont p {
padding-bottom: 10px;
}
.slidr button.slick-prev.slick-arrow:before {
background: url("../img/left.png") no-repeat;
background-position: 100%;
}
.slidr button.slick-next.slick-arrow:before {
background: url("../img/right.png") no-repeat;
background-position: 100%;
}
.slidr button.slick-prev.slick-arrow {
left: 0;
z-index: 9;
}
.slidr button.slick-next.slick-arrow {
right: 0;
z-index: 9;
}
.slidr .slick-arrow {
position: absolute;
top: 40%;
font-size: 0;
padding: 0;
border: none;
background-color: transparent;
}
.slick-arrow:before {
height: 150px;
width: 60px;
content: "";
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background-size: cover;
z-index: 9;
cursor: pointer;
}
.btn.btn-yelow {
background: #F39811;
border: 2px solid #F39811;
border-radius: 60px;
color: #fff;
padding: 12px 47px;
}
.btn.btn-yelow:hover {
background: transparent;
color: #F39811
}
.btn.btn-white {
background: transparent;
border: 2px solid #F39811;
border-radius: 60px;
color: #fff;
padding: 12px 47px;
}
.btn.btn-white:hover {
background: #F39811;
color: #fff;
}
/* ==========================================================================
Donate Css Start
========================================================================== */
.donation_sec{
padding: 0;
}
.bs {
box-shadow: 0 33px 48px #E5E5E5;
}
.doante_cont {
padding: 51px;
}
.border_right_lg {
border-right: 2px solid #F2F2F2;
}
.doante_cont h5 {
font-size: 24px;
padding: 20px 0;
}
.doante_cont p {
padding-bottom: 15px;
}
.doante_cont a {
font-size: 18px;
color: #f39811;
line-height: 24px;
}
.doante_cont a:hover {
text-decoration: underline;
}
$('.slidr').slick({
cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
touchThreshold: 100,
dots: false,
arrows: true,
infinite: true,
speed: 1500,
fade:true,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
