Contact Ian
Dropdowns / Accordions 2
Award Winning Support
Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget cursus dolor.
Amazing Digital Experience
Nullam hendrerit justo non leo aliquet imperdiet. Etiam sagittis lectus condime dapibus.
Live Monitoring Tools
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu pellentesque sem tempor.
Paste this in the HTML / Javascript element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Carousel with Title Text and Description</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Oswald:300,400">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.carousel {
margin: 30px 0;
background: #ccc;
position: relative;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.carousel:after {
content: "";
position: absolute;
z-index: -1;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
height: 60px;
bottom: 0px;
left: 10px;
right: 10px;
border-radius: 100px / 20px;
}
.carousel .item {
text-align: center;
overflow: hidden;
height: 475px;
}
.carousel .item img {
max-width: 100%;
margin: 0 auto; /* Align slide image horizontally center in Bootstrap v3 */
}
.carousel .carousel-control {
width: 50px;
height: 50px;
background: #000;
margin: auto 0;
opacity: 0.8;
}
.carousel .carousel-control:hover {
opacity: 0.9;
}
.carousel .carousel-control i {
font-size: 41px;
}
.carousel-caption h3, .carousel-caption p {
color: #fff;
display: inline-block;
font-family: 'Oswald', sans-serif;
text-shadow: none;
margin-bottom: 20px;
}
.carousel-caption h3 {
background: rgba(0,0,0,0.9);
padding: 12px 24px;
font-size: 40px;
text-transform: uppercase;
}
.carousel-caption p {
background: #8fc93c;
padding: 10px 20px;
font-size: 20px;
font-weight: 300;
}
.carousel-action {
padding: 10px 0 30px;
}
.carousel-action .btn {
min-height: 34px;
border-radius: 0;
margin: 3px;
min-width: 150px;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}
.carousel-action .btn-primary {
border-color: #000;
background: none;
color: #000;
}
.carousel-action .btn-primary:hover {
background: #000;
color: #fff;
}
.carousel-action .btn-success {
background: #8fc93c;
border: none;
}
.carousel-action .btn-success:hover {
background: #87bd35;
}
.carousel-indicators li, .carousel-indicators li.active {
width: 11px;
height: 11px;
border-radius: 50%;
margin: 1px 6px;
}
.carousel-indicators li {
background: transparent;
border: 1px solid #fff;
}
.carousel-indicators li.active {
background: #8fc93c;
border-color: #8fc93c;
}
</style>
</head>
<body>
<div class="container-lg">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1771&q=80" class="img-fluid" alt="Notebook">
<div class="carousel-caption">
<h3>Award Winning Support</h3>
<p>Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget cursus dolor.</p>
<div class="carousel-action">
<a href="#" class="btn btn-primary">Learn More</a>
<a href="#" class="btn btn-success">Try Now</a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1501959181532-7d2a3c064642?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1193&q=80" class="img-fluid" alt="Tablet">
<div class="carousel-caption">
<h3>Amazing Digital Experience</h3>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam sagittis lectus condime dapibus.</p>
<div class="carousel-action">
<a href="#" class="btn btn-primary">Learn More</a>
<a href="#" class="btn btn-success">Try Now</a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1416339442236-8ceb164046f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1103&q=80" class="img-fluid" alt="Workstation">
<div class="carousel-caption">
<h3>Live Monitoring Tools</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu pellentesque sem tempor.</p>
<div class="carousel-action">
<a href="#" class="btn btn-primary">Learn More</a>
<a href="#" class="btn btn-success">Try Now</a>
</div>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Powered by Omni Matic
