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="favourite-places-background ">
<h1 class="favourite-places-heading">Favouite Places</h1>
<div class="favourite-places-container d-flex flex-row">
<h1 class="favourite-places-container-heading">Taj Mahal</h1>
<h2></h2>
<p class="favourite-places-paragraph"> If there was just one symbol to represent all of India, it would be
the Taj Mahal</p>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/tajmahal-img.png" class="favourite-place-card-image" />
</div>
<div class="favourite-places-container d-flex flex-row">
<h1 class="favourite-places-container-heading">Golden Temple</h1>
<h2></h2>
<p class="favourite-places-paragraph"> Amritsar is world-famous for the beautiful and highly revered Golden
Temple </p>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/golden-temple-img.png" class="favourite-place-card-image" />
</div>
<div class="favourite-places-container d-flex flex-row">
<h1 class="favourite-places-container-heading">Mysore Palace</h1>
<h2></h2>
<p class="favourite-places-paragraph"> The Mysore Palace is a historical palace and the royal residence at
Mysore .
</p>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/mysore-palace-img.png" class="favourite-place-card-image" />
</div>
<div class="favourite-places-container d-flex flex-row">
<h1 class="favourite-places-container-heading">Varanasi Temple</h1>
<h2></h2>
<p class="favourite-places-paragraph"> Varanasi Temple is most famous Hindu temples dedicated to Lord Shiva
</p>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/varanasi-temple-img.png" class="favourite-place-card-image" />
</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');
.favourite-places-background {
background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/towerbg.png");
height: 120vh;
background-size: cover;
}
.favourite-places-heading {
padding: 25px;
font-family: oblique;
font-style: italic;
font-weight: bold;
font-size: 50px;
text-decoration: underline;
}
.favourite-places-container {
background-color: white;
padding: 15px;
border-radius: 8px;
margin: 10px;
}
.favourite-places-container-heading {
font-size: 23px;
font-style: "Roboto";
font-weight: bold;
color: #0f0e46;
font-family: "Play Display";
text-shadow: 1px 1px grey;
font-style: italic;
text-decoration: underline;
text-decoration-color: blue;
width: 500px;
}
.favourite-places-paragraph {
font-size: 19px;
margin: 10px;
color: red;
text-shadow: 1px 1px grey;
}
.favourite-place-card-image {
width: 80px;
height: 100px;
}