Bootstrap five hero banner snipp example v03
Whole html/css code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet">
<title>Hero banner snipp</title>
<style>
.angled {
position: relative;
}
svg {
position: absolute;
bottom: 0;
width: 100%;
height: 5vw;
fill: #fff;
}
a.button2 {
text-decoration: none;
color: #fff;
}
a.button2:hover {
text-decoration: none;
opacity: 0.7;
}
.button2 {
min-width: 50px;
min-height: 50px;
font-size: 22px;
color: #fff;
background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
border-radius: 50px;
box-shadow: 12px 12px 24px rgba(79,209,197,.64);
transition: all 0.3s ease-in-out 0s;
}
.button2::after {
content: '';
width: 30px;
height: 30px;
border-radius: 100%;
border: 6px solid #00FFCB;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ring 1.5s infinite;
}
.button2:hover::after, .button2:focus::after {
animation: none;
display: none;
}
@keyframes ring {
0% {
width: 30px;
height: 30px;
opacity: 1;
}
100% {
width: 100px;
height: 100px;
opacity: 0;
}
}
.bb {
border-bottom: 0;
}
</style>
</head>
<body>
<section class="angled bg-dark"> <svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,100 100,0 100,100" />
</svg>
<div class="container py-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-6">
<h1 class="display-5 text-white mb-4">We bring solutions to make life easier for our customers.</h1>
<p class="lead text-white mb-5">We carefully consider our solutions to support each and every stage of your growth.</p>
<div> <a class="btn btn-lg btn-primary rounded px-4 mb-5 mb-lg-0">Get Started</a> </div>
</div>
<!-- /column -->
<div class="col-lg-5 offset-lg-1">
<div class="position-relative"> <a href="" data-bs-toggle="modal" data-bs-target="#exampleModal" class="button2 position-absolute text-center d-flex align-items-center justify-content-center" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;"> <i class="lni lni-play"></i> </a> <img src="https://bootstraplily.com/wp-content/uploads/2021/11/about13.jpg" class="rounded img-fluid shadow-lg" alt="">
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bb">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/HYlwYjRPbPo?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /div -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>
jsfiddle example
