"Backup Coenge"
Bootstrap 4.1.1 Snippet by alanvr

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 ---------->
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="mask flex-center">
<div class="container">
<div class="row align-items-center">
<div class="col-md-7 col-12 order-md-1 order-2">
<h4>70 mil<br>
m² construídos</h4>
<!--<p>Lorem ipsum dolor sit amet. Reprehenderit, qui blanditiis quidem rerum <br>
necessitatibus praesentium voluptatum deleniti atque corrupti.</p>
<a href="#">BUY NOW</a>--> </div>
<div class="col-md-5 col-12 order-md-2 order-1"><img src="https://i.imgur.com/zZe3pmt.png" class="mx-auto" alt="slide"></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="mask flex-center">
<div class="container">
<div class="row align-items-center">
<div class="col-md-7 col-12 order-md-1 order-2">
<h4>20 <br>
anos de história</h4>
<!--<p>Lorem ipsum dolor sit amet. Reprehenderit, qui blanditiis quidem rerum <br>
necessitatibus praesentium voluptatum deleniti atque corrupti.</p>
<a href="#">BUY NOW</a>--> </div>
<div class="col-md-5 col-12 order-md-2 order-1"><img src="https://i.imgur.com/edqikTT.png" class="mx-auto" alt="slide"></div>
</div>
</div>
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
#myCarousel .carousel-item .mask {
position: absolute;
top: 0;
left:0;
height:100%;
width: 100%;
background-attachment: fixed;
}
#myCarousel h4{
font-size:50px;
margin-bottom:15px;
margin-top:150px;
color:#FFF;
line-height:100%;
letter-spacing:0.5px;
font-weight:600;
}
#myCarousel p{
font-size:18px;
margin-bottom:15px;
color:#d5d5d5;
}
#myCarousel .carousel-item a{background:#F47735; font-size:14px; color:#FFF; padding:13px 32px; display:inline-block; }
#myCarousel .carousel-item a:hover{background:#394fa2; text-decoration:none; }
#myCarousel .carousel-item h4{-webkit-animation-name:fadeInLeft; animation-name:fadeInLeft;}
#myCarousel .carousel-item p{-webkit-animation-name:slideInRight; animation-name:slideInRight;}
#myCarousel .carousel-item a{-webkit-animation-name:fadeInUp; animation-name:fadeInUp;}
#myCarousel .carousel-item .mask img{-webkit-animation-name:slideInRight; animation-name:slideInRight; display:block; height:auto; max-width:100%;}
#myCarousel h4, #myCarousel p, #myCarousel a, #myCarousel .carousel-item .mask img{-webkit-animation-duration: 1s;
animation-duration: 1.2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#myCarousel .container {max-width: 1430px; }
#myCarousel .carousel-item{height:100%; min-height:550px; }
#myCarousel{position:relative; z-index:1; background:url(https://i.imgur.com/vIiw1fH.png) center center no-repeat; background-size:cover; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
$('#myCarousel').carousel({
interval: 2000,
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard 2 PRO

Questions / Comments: