Create Simple Website Hero Section Using Bootstrap With Free Source Code By Indian Coding Wala


HTML Source Code :-

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Hero Section</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

<section class="hero d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Create Website With Free Source Code...</h1>
<p class="lead">Create Simple Website Hero Section Using Bootstrap With Free Source Code.... 
<br/>By Indian Coding Wala...</p>
<a href="#" class="btn btn-danger btn-lg">Subscribe Indian Coding Wala</a>
</div>
</div>
</div>
</section>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>


CSS Source Code :-  

.hero {
    background-image: url(https://images.pexels.com/photos/695644/pexels-photo-695644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
    background-size: cover;
    background-position: center;
    height: 100vh;
}
.hero h1 {
    font-size: 5rem;
    font-weight: bold;
    color: #eff309;
}
.hero p {
    font-size: 1.5rem;
    color: #fff;
}