Flat Booking model

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; }
JAVASCRIPT
Expand for more options Login