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 id="sectionHome" class="bg-container-1">
<img src="https://img.freepik.com/premium-photo/illustration-living-room-interior_252025-88814.jpg?w=1380" alt=""
class="img-1"
/>
<div class="d-flex flex-column justify-content-end bg-container-2">
<h1 class="heading-1">Sunrise Avenue</h1>
<p1 class="paragraph-1">Move to what moves you</p1>
<div class="d-flex flex-row justify-content-center">
<button class="button-1" onclick="display('sectionFlats')">Book Flat</button>
</div>
</div>
</div>
<div id="sectionFlats" class="flats-bg">
<h1 class="heading-2">Sunrise Avenue</h1>
<div id="sectionthreebhk" class="d-flex flex-row" onclick="display('section3bhkdetail')">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-card1-img.png" alt=""
class="img-2">
<div class=" flat_background">
<h1 class="flat_heading">3BHK Flat</h1>
<p class="flat_paragraph">This is a fully furnished house with hanmode furniture including a luxury en-suite facilities pack.Its built-up area is about 1600sq.<br>ft.A spacious home for you to live in.</p>
</div>
</div>
<div id="sectiontwobhk" class="d-flex flex-row bg_flat" onclick="display('section3bhkdetail')">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-card2-img.png" alt=""
class="img-2">
<div class=" flat_background">
<h1 class="flat_heading">2BHK Flat</h1>
<p class="flat_paragraph">A minimalist house made for moderrn-day families.It is fully furnished with trending furniture.Its built-up area is about 1200sq.ft.</p>
</div>
</div>
<div id="sectionfourbhk" class="d-flex flex-row bg_flat" onclick="display('section4bhkdetail')">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-card3-img.png" alt=""
class="img-2">
<div class=" flat_background">
<h1 class="flat_heading">4BHK Flat</h1>
<p class="flat_paragraph">A contemporary home with more color and vibrancy.It is fully furnished with elegant furniture.Its built-up area is about 3600sq.ft.</p>
</div>
</div>
<button class="button-1" onclick="display('sectionHome')">Back</button>
</div>
<div id="section3bhkdetail">
<div class="flats-bg-1">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-d1-img.png" alt=""
class="img-3">
<h1 class="heading-3">Rs 3000/-</h1>
<div>
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png" alt=""
class="img-4">
<p1 class="paragraph-2">D/N 5-2,Food Street,Indore</p1>
</div>
<div>
<hr class="hor-line">
</div>
<h1 class="heading-3">Description</h1>
<p class="paragraph-2">This is a fully furnished house with hanmode furniture including a luxury en-suite facilities pack.Its built-up area is about 1600sq.ft.A spacious home for you to live in.</p>
<button class="button-1" onclick="display('sectionHome')">Confirm</button>
<button class="button-1" onclick="display('sectionFlats')">Back</button>
</div>
</div>
<div id="section2bhkdetail">
<div class="flats-bg-1">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-d2-img.png" alt=""
class="img-3">
<h1 class="heading-3">Rs 2000/-</h1>
<div>
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png" alt=""
class="img-4">
<p1 class="paragraph-2">D/N 6-2,Food Street,Indore</p1>
</div>
<div>
<hr class="hor-line">
</div>
<h1 class="heading-3">Description</h1>
<p class="paragraph-2">A minimalist house made for moderrn-day families.It is fully furnished with trending furniture.Its built-up area is about 1200sq.ft.</p>
<button class="button-1" onclick="display('sectionHome')">Confirm</button>
<button class="button-1" onclick="display('sectionFlats')">Back</button>
</div>
</div>
<div id="section4bhkdetail">
<div class="flats-bg-1">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-d3-img.png" alt=""
class="img-3">
<h1 class="heading-3">Rs 4000/-</h1>
<div>
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png" alt=""
class="img-4">
<p1 class="paragraph-2">D/N 7-2,Food Street,Indore</p1>
</div>
<div>
<hr class="hor-line">
</div>
<h1 class="heading-3">Description</h1>
<p class="paragraph-2">A contemporary home with more color and vibrancy.It is fully furnished with elegant furniture.Its built-up area is about 3600sq.ft.</p>
<button class="button-1" onclick="display('sectionHome')">Confirm</button>
<button class="button-1" onclick="display('sectionFlats')">Back</button>
</div>
</div>
<script type="text/javascript" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/js/ccbp-ui-kit.js"></script>
</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=Bree Serif: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");
.bg-container-1 {
background-color:#222222;
background-size: cover;
height: 100vh;
width:80vh;
}
.bg-container-2 {
background-color: #ffffff;
text-align: center;
font-family: "Bree Serif";
border-top-left-radius:10px;
border-top-right-radius:10px;
height:50vh;
padding:20px;
border:solid;
border-width:1px;
}
.heading-1 {
color: #f19116;
margin:20px;
}
.paragraph-1 {
color: #7b8794;
margin:20px;
}
.button-1 {
color: #ffffff;
background-color:#f19116;
width:120px;
text-align:center;
margin:20px;
border-radius:5px;
border-color:#f19116;
box-shadow:0px 0px 0px 0px;
}
.img-1{
height:60vh;
width:80vh;
}
.flats-bg{
background-color:#222222;
height:130vh;
background-size:cover;
}
.heading-2 {
color: #f19116;
margin:20px;
font-family:"Bree Serif";
font-size:30px;
}
.flat_background{
background-color:#ffffff;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
margin-right:20px;
height:30vh;
font-family:"Bree Serif";
}
.img-2{
height:30vh;
margin-left:20px;
}
.flat_heading{
color:#0f0e46;
margin:20px;
}
.flat_paragraph{
color:#7b8794;
margin:20px;
font-size:12px;
}
.bg_flat{
margin-top:15px;
font-family:"Bree Serif";
}
.img-3{
height:50vh;
width:78vh;
}
.heading-3{
color:#f19116;
font-size:20px;
margin:20px;
font-family:"Bree Serif";
}
.img-4{
height:5vh;
margin:20px;
}
.paragraph-2{
color:#ffffff;
font-family:"Bree Serif";
margin:20px;
}
.hor-line{
background-color:#ffffff;
width:100%;
margin:20px;
}
.flats-bg-1{
background-color:#222222;
height:120vh;
background-size:cover;
width:78vh;
margin:20px;
}