CODING ASSIGNMENT 3
Flats Page
In this assignment, let's build the Sunrise Avenue page by applying the concepts we learned till now. You can use the Bootstrap concepts and CCBP UI Kit as well.
Refer to the below images.
Flats List Page
- When clicked on the Book Flat button on the Sunrise Avenue Home Page, it must display the Flats List Page.
- When clicked on each flat in Flats List Page, it must display the respective Flat Details Page.
- When clicked on Confirm button in Flat Details Page, it must display Sunrise Avenue Home Page
- When clicked on Back button in Flat Details Page, it must display Flats List Page
- Try to achieve the design as close as possible.
Resources
Use the image URLs given below.
Home Page Background Image
Flats List Card Images
- https://assets.ccbp.in/frontend/static-website/flats-list-card1-img.png
- https://assets.ccbp.in/frontend/static-website/flats-list-card2-img.png
- https://assets.ccbp.in/frontend/static-website/flats-list-card3-img.png
Location Icon
Flats Description Images
- https://assets.ccbp.in/frontend/static-website/flats-list-d1-img.png
- https://assets.ccbp.in/frontend/static-website/flats-list-d2-img.png
- https://assets.ccbp.in/frontend/static-website/flats-list-d3-img.png
CSS Colors used:
Background color Hex Code values:
Text color Hex Code values:
CSS Font families used:
- Bree Serif
Concepts Review
Want to quickly review some of the concepts you’ve been learning?
Take a look at the Cheat Sheets.
<!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="sectionhomepage"> <div class="fist-page-bg d-flex flex-column justify-content-end"> <div class="fist-page-card "> <h1 class="fist-page-card-HEADING">sun rise hotel</h1> <p class="fist-page-card-paragarph">somthing is missing</p> <button class="fist-page-card-buttion" onclick="display('sectionpage1')">Book Free</button> </div> </div> </div> <div id="sectionpage1"> <div class="second-page-bg"> <h1 class="second-page-heading">sun hotel</h1> <div class="second-page-card d-flex flex-row " onclick="display('sectionpage2')"> <img class="second-page-card-img" src="https://assets.ccbp.in/frontend/static-website/flats-list-card1-img.png" alt="" /> <div class="second-page-card-text"> <h1 class="second-page-card-heading">sun hotel</h1> <p class="second-page-card-paragraph">gjjkdtkdtkuykdyuk</p> </div> </div> <div class="second-page-card d-flex flex-row"> <img class="second-page-card-img" src="https://assets.ccbp.in/frontend/static-website/flats-list-card1-img.png" alt="" /> <div class="second-page-card-text"> <h1 class="second-page-card-heading">sun hotel</h1> <p class="second-page-card-paragraph">gjjkdtkdtkuykdyuk</p> </div> </div> <div class="second-page-card d-flex flex-row"> <img class="second-page-card-img" src="https://assets.ccbp.in/frontend/static-website/flats-list-card1-img.png" alt="" /> <div class="second-page-card-text"> <h1 class="second-page-card-heading">sun hotel</h1> <p class="second-page-card-paragraph">gjjkdtkdtkuykdyuk</p> </div> </div> <button class="second-page-card-buttion"> back</button> </div> </div> <div id="sectionpage2"> <div class="threed-page"> <img class="threed-page-img" src="https://assets.ccbp.in/frontend/static-website/flats-list-d1-img.png" alt="" /> <h1 class="threed-page-heading">RS.4000/-</h1> <div class="threed-page-text-card"> <hr /> <h1 class="threed-page-heading">Descripation</h1> <p class="threed-page-paragraph">gfjd,<br />ujf,fjl,<br />fgggkfyughi<br />ouhikulil.</p> </div> <button class="second-page-card-buttion">confme</button> <button class="second-page-card-buttion" onclick="display('sectionhomepage')">back</button> </div> </div> <script type="text/javascript" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/js/ccbp-ui-kit.js"></script> </body> </html>
@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");
.fist-page-bg {
background-image: url("https://assets.ccbp.in/frontend/static-website/flats-list-bg.png");
background-size: cover;
height: 100vh;
}
.fist-page-card {
background-color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: center;
height: 30vh;
}
.fist-page-card-HEADING {
font-family: "breeserif";
color: #f19116;
}
.fist-page-card-paragarph {
font-family: "breeserif";
color: #f19116;
}
.fist-page-card-buttion {
color: white;
background-color: #f19116;
border-radius: 5px;
border-width: 0px;
font-family: "breeserif";
}
.second-page-bg {
background-color: black;
background-size: cover;
}
.second-page-heading {
color: #f19116;
padding: 20px;
}
.second-page-card {
background-color: white;
border-radius: 10px;
padding: 8px;
margin: 10px;
}
.second-page-card-img {
height: 130px;
width: 120px;
}
.second-page-card-text {
text-align: center;
margin: 20px;
}
.second-page-card-heading {
color: #00e46;
font-family: "breeserif ";
}
.second-page-card-paragraph {
color: black;
font-family: "breeserif"
}
.second-page-card-buttion {
color: white;
background-color: #f19116;
border-radius: 5px;
margin: 10px;
}
.threed-page {
background-color: black;
background-size: cover;
}
.threed-page-img {
height: 50vh;
width: 100vw;
}
.threed-page-text-card {
text-align: center;
}
.threed-page-heading {
color: #f19116;
font-family: "breeserif";
padding: 20px;
}
.threed-page-paragraph {
color: white;
}
.horizontal-line {
color: white;
}
Comments
Post a Comment