Improving HTML and Bootstrap:
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
.jumbotron--aboutus {
background-image: url(ContraMedia-Free-Zoom-Bg-49.jpg);
background-size: cover;
background-position: left 40% bottom 18%;
height: 50vh;
filter: brightness(90%);
margin-bottom: 100px;
}
.jumbotron--play {
background-image: url(bed123.jpg);
background-size: cover;
background-position: center;
height: 50vh;
width: 75%;
margin-top: 100px;
margin-left: 12%;
}
.jumbotron h1 {
text-align: center;
color: white;
margin-top: 130px;
filter: brightness(200%);
font-size: 40px;
font-weight: bold;
}
.row .col {
left: -10%;
margin: 10px;
margin-bottom: 50px;
}
.row .col-lg {
justify-content: center;
top: 100px;
left: 20px;
}
.row .col-lg h2 {
font-size: 40px;
margin-bottom: 20px;
}
.row .col-lg-7 {
left: 160px;
}
.zoom-image {
transition: transform 0.3s ease;
}
.zoom-image:hover {
transform: scale(1.05);
}
.container h2 {
font-size: 27px;
}
.container p {
margin-bottom: 30px;
font-size: 14px;
color: grey;
}
.container button {
background-color: white;
border: 0.1px black solid;
width: 140px;
height: 45px;
transition: background-color 0.5s;
}
<!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://cdn.jsdelivr.net/npm/fontawesome/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>About Us</title>
</head>
<div class="jumbotron jumbotron--aboutus">
<h1 class="display-4">ABOUT US</h1>
</div>
<div class="container">
<div class="row">
<div class="col col-lg-8">
<a href="#">
<img src="presidents-day-furniture-amazon-tout-b05768db6945443b9a2190e5b099a777.webp" class="img-fluid zoom-image" alt="Image 1">
</a>
</div>
<div class="col col-lg">
<h2 class="display-6">Modular Sofa, Light Gray Linen</h2>
<p>Modern sectional sofa with an inverted L-shaped seat that can be placed on either side,…</p>
<button>Shop Now</button>
</div>
</div>
<div class="row">
<div class="col col-lg">
<h2 class="display-6">Bedside Cabinet, Oak Material</h2>
<p>Store gadgets, books, or magazines on this easy-sliding two-tier nightstand or end table.</p>
<button>Shop Now</button>
</div>
<div class="col col-lg-7">
<a href="#">
<img src="tabdaugiuong-2.jpg" class="img-fluid zoom-image" alt="Image 2">
</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popperjs/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>I tried to remove the jumbotron--play class but it doesn't seem to work. Additionally, I noticed that the row justify-content-md-center class is impacting the layout, but I'm unsure how to resolve it.