New bootstrap hero header with laptop image on side bootstrap snipp made with bootstrap framework, you can use this as your website hero header on top, simple div structure easy to implement.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
<title>Hero header with laptop image on side</title>
</head>
<body>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
.btn {
padding: 14px 26px;
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn-danger {
background-color: #e34c43;
border-color: #e34c43;
}
.banner-image{
background: linear-gradient(rgba(29, 38, 113, 0.1), rgba(195, 55, 100, 0.1)), url(img/banner-image-five.jpg);
background-size: cover;
background-position: center;
}
.banner-laptop-image img{
max-width:800px;
height:auto;
}
@media(max-width:780px){
.display-4{
font-size:36px;
}
}
</style>
<nav class="navbar navbar-expand-lg fixed-top navbar-light py-3">
<div class="container"> <a class="navbar-brand font-weight-bold text-uppercase" href="#">BRANDNAME</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto font-weight-bold">
<li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Testimonials</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
</ul>
</div>
</div>
</nav>
<div class="banner-image py-5">
<div class="container-fluid pt-5 px-0">
<div class="row py-5 no-gutters align-items-center">
<div class="col-lg-2"></div>
<div class="col-lg-4">
<h5 class="display-4 mb-4 font-weight-bold text-center text-lg-left">Stay connected with your customers</h5>
<p class="lead mb-5 text-black-50 text-center text-lg-left px-5 px-lg-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc nisi, suscipit id dapibus sit amet, lacinia nec lorem. Aenean eget urna rutrum.</p>
<div class="d-flex justify-content-center justify-content-lg-start pt-3 mb-4 mb-5">
<a href="" class="btn btn-lg btn-danger mr-2"> View More</a>
<a href="" class="btn btn-lg btn-outline-danger"> Contact Us</a>
</div>
</div>
<div class="col-lg-6 text-right">
<div class="banner-laptop-image"> <img src="img/macbook_PNG59.png" class="img-fluid"> </div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.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>
</body>
</html>
