HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="detailed-view-bg-container">
<h1 class="detailed-view-heading">Detailed View</h1>
<div class="detailed-view-card-container">
<div id="mysorePalaceCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mysorePalaceCarousel" data-slide-to="0" class="active"></li>
<li data-target="#mysorePalaceCarousel" data-slide-to="1"></li>
<li data-target="#mysorePalaceCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/mysore-palace1-img.png" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/mysore-palace2-img.png" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/mysore-palace3-img.png" class="d-block w-100" alt="..." />
</div>
</div>
<a class="carousel-control-prev" href="#mysorePalaceCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mysorePalaceCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="detailed-view-card-text-container">
<h1 class="detailed-view-card-heading">Mysore Palace</h1>
<p class="detailed-view-card-description">
Mysore Palace, also called Amba Vilas Palace, is one of the most magnificent and largest palaces in India. Situated in the southern state of Karnataka, it used to be the official residence of the Wodeyar Dynasty, the rulers of Mysore from 1399 to 1950. The grand palace stands tall in the heart of Mysore city and attracts visitors from across the world. Being one of the prime attractions in India after the Taj Mahal, it certainly deserves a place in every traveler’s bucket list.
</p>
</div>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');
.detailed-view-bg-container {
background-color:#ffffff;
height: 180vh;
width:800px;
background-size: cover;
}
.detailed-view-heading {
color: black;
font-family: "San-Serif";
font-size: 28px;
font-weight: bold;
padding: 24px;
text-decoration:underline red wavy 2px;
}
.detailed-view-card-container {
background-color: #000080;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin: 24px;
}
.detailed-view-card-heading {
color: #ffffff;
font-family: "Roboto";
font-size: 23px;
font-weight: bold;
}
.detailed-view-card-description {
color: #F0B400;
font-family: "Roboto";
font-size: 20px;
}
.detailed-view-card-text-container {
padding: 16px;
}
