I've made good progress on my mockup website by laying out the basics.
#hero {
background: url("https://picsum.photos/1280/710") no-repeat center;
background-size: cover;
}
.book {
height: 100px;
width: 100px;
bottom: 9vh;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Etomon</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid hero" id="hero">
<div class="container">
<div class="row">
<div class="col-12 col-md-7 mb-4 book">
<img src="./images/book.png" class="book">
<h1 class="logo h2 text-light">Etomon</h1>
</div>
<div class="col search">
<input type="text" class="" placeholder="Search?">
<button type="submit">Submit</button>
<form>
subject/course <br>
<input type="text" placeholder="Graphic Design"> <br> level <br>
<input type="text" placeholder="Intermediate"> <br> starting <br>
<input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
<input type="text" placeholder="mm/dd/yyy"> <br>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<h1 class="popular text-center">Most Popular Subjects</h1>
</div>
</div>
</div>
</body>
</html>To enhance the design, I aim to include an image carousel in the .jumbotron div for a similar aesthetic as shown in this screenshot.
https://i.sstatic.net/YwbUY.jpg
In the CSS provided, #hero is set to display the background image. When attempting to replicate the w3s Bootstrap carousel, the carousel appears above the content. How can I ensure it stays within the jumbotron section?