107 739
Assignments Done
100%
Successfully Done
In April 2024
In April 2024
Your physics assignments can be a real challenge, and the due date can be really close — feel free to use our assistance and get the desired result.
Physics
Be sure that math assignments completed by our experts will be error-free and done according to your instructions specified in the submitted order form.
Math
Our experts will gladly share their knowledge and help you with programming projects. Keep up with the world’s newest programming trends.
Programming
Answer to Question #168237 in HTML/JavaScript Web Application for mani
Question #168237
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
https://assets.ccbp.in/frontend/content/static-website/flats-output.gif
Note
- 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
- https://assets.ccbp.in/frontend/static-website/flats-list-bg.png
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
- https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png
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:
#f19116
#222222
#ffffff
Text color Hex Code values:
#f19116
#7b8794
#ffffff
#0f0e46
#6c6b70
CSS Font families used:
- Bree Serif
Expert's answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="main">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-bg.png" alt="home">
<div class="text">
<div class="title">Sunrise Avenue</div>
<div class="desc">Move to what moves you.</div>
<button class="btn flat">Book Flat</button>
</div>
</div>
<div class="list hidden">
<div class="title">Sunrise Avenue</div>
<div class="lists">
<div class="item" data-item="1">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-card1-img.png" alt="1">
<div class="desc">
<div class="title">3BHK Flat</div>
<div class="text">This is a fully furnished house ith handmade furniture including a luxary en-suite facilities pack. Its buit-up area is about 1600sq.ft. A spacious home for you to live in</div>
</div>
</div>
<div class="item" data-item="2">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-card2-img.png" alt="2">
<div class="desc">
<div class="title">2BHK Flat</div>
<div class="text">A minimalist house made for modern-day families. It is fully furnished with trending furniture. Its built-up area is about 1200sq.ft.</div>
</div>
</div>
<div class="item" data-item="3">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-card3-img.png" alt="3">
<div class="desc">
<div class="title">4BHK Flat</div>
<div class="text">A contemporary home with more color and vibrancy. it is fully furnished with elegant furniture. Its built-up area is about 3600sq.ft.</div>
</div>
</div>
</div>
<button class="btn backToMain">Back</button>
</div>
<div class="description hidden">
<div class="item hidden" data-item="1">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-d1-img.png" alt="one">
<div class="content">
<div class="price">Rs 3000/-</div>
<div class="location">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png" alt="location">
<span>D/N 6-2, Food Street, Indore</span>
</div>
<div class="line"></div>
<div class="desc">
<div class="title">Description</div>
<div class="text">This is a fully furnished house ith handmade furniture including a luxary en-suite facilities pack. Its buit-up area is about 1600sq.ft. A spacious home for you to live in.</div>
</div>
<div class="action">
<button class="btn btnConfirm">Confirm</button>
<button class="btn btnBackToList">Back</button>
</div>
</div>
</div>
<div class="item hidden" data-item="2">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-d2-img.png" alt="one">
<div class="content">
<div class="price">Rs 2000/-</div>
<div class="location">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png" alt="location">
<span>D/N 6-2, Food Street, Indore</span>
</div>
<div class="line"></div>
<div class="desc">
<div class="title">Description</div>
<div class="text">A minimalist house made for modern-day families. It is fully furnished with trending furniture. Its built-up area is about 1200sq.ft.</div>
</div>
<div class="action">
<button class="btn btnConfirm">Confirm</button>
<button class="btn btnBackToList">Back</button>
</div>
</div>
</div>
<div class="item hidden" data-item="3">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-d3-img.png" alt="one">
<div class="content">
<div class="price">Rs 4000/-</div>
<div class="location">
<img src="https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png" alt="location">
<span>D/N 6-2, Food Street, Indore</span>
</div>
<div class="line"></div>
<div class="desc">
<div class="title">Description</div>
<div class="text">A contemporary home with more color and vibrancy. it is fully furnished with elegant furniture. Its built-up area is about 3600sq.ft.</div>
</div>
<div class="action">
<button class="btn btnConfirm">Confirm</button>
<button class="btn btnBackToList">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
.wrapper {
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #000;
font-family: 'Bree Serif', serif;
}
.container {
max-width: 360px;
width: 100%;
height: 100%;
margin: 0 auto;
}
.btn {
background-color: #f19116;
color: #fff;
border-radius: 4px;
padding: 10px 24px;
outline: none;
border: none;
cursor: pointer;
}
.hidden {
display: none!important;;
}
.main {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
position: relative;
}
.main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main .text {
background-color: #ffffff;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 24px;
height: 30%;
}
.main .text .title {
color: #f19116;
font-size: 24px;
}
.main .text .desc {
color: #7b8794;
padding: 12px 0 32px;
}
.list {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: #222222;
padding: 16px;
}
.list .title {
color: #f19116;
font-size: 26px;
}
.list .lists {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: 8px 0 48px;
}
.list .lists .item {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
background-color: #ffffff;
border-radius: 8px;
cursor: pointer;
}
.list .lists .item + .item {
margin-top: 16px;
}
.list .lists .item img {
max-width: 30%;
}
.list .lists .item .desc {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 18px 12px;
}
.list .lists .item .desc .title {
padding-bottom: 8px;
color: #0f0e46;
font-weight: bold;
}
.list .lists .item .desc .text {
font-size: 11px;
color: #6c6b70;
}
.description {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: #222222;
color: #ffffff;
}
.description .item {
display: flex;
flex-direction: column;
}
.description .item .content {
display: flex;
flex-direction: column;
padding: 16px;
}
.description .item .content .price {
color: #f19116;
font-size: 24px;
}
.description .item .content .location {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 18px 0 24px;
}
.description .item .content .location img {
width: 24px;
height: 24px;
margin-right: 8px;
}
.description .item .content .line {
width: 100%;
height: 2px;
background-color: #ffffff;
margin-bottom: 16px;
}
.description .item .content .desc .title {
color: #f19116;
font-size: 24px;
padding-bottom: 8px;
}
.description .item .content .action {
margin-top: 48px;
text-align: center;
}
.description .item .content .action .btn + .btn {
margin-left: 16px;
}
</style>
<script>
const main = document.querySelector('.main');
const list = document.querySelector('.list');
const description = document.querySelector('.description');
const mainBlock = [main, list, description];
const btnBackToMain = document.querySelector('.backToMain');
const btnFlat = document.querySelector('.flat');
const btnBackToList = document.querySelectorAll('.btnBackToList');
const btnConfirm = document.querySelectorAll('.btnConfirm');
const listItem = document.querySelectorAll('.list .item');
const descriptionItem = document.querySelectorAll('.description .item');
btnFlat.addEventListener('click', () => toggleShow(list))
btnBackToMain.addEventListener('click', () => toggleShow(main))
btnBackToList.forEach(item => item.addEventListener('click', () => toggleShow(list)))
btnConfirm.forEach(item => item.addEventListener('click', () => toggleShow(main)))
listItem.forEach(item => {
item.addEventListener('click', function() {
toggleShow(description);
showItem(item);
});
})
function toggleShow(el) {
mainBlock.forEach(item => item.classList.add('hidden'));
el.classList.remove('hidden');
}
function showItem(el) {
descriptionItem.forEach(item => {
if (item.getAttribute('data-item') != el.getAttribute('data-item')) {
item.classList.add('hidden')
} else {
item.classList.remove('hidden')
}
});
}
</script>
</body>
</html>
Learn more about our help with Assignments: Programming & Computer Science
-
![Help me with my assignment!]()
Who Can Help Me with My Assignment
There are three certainties in this world: Death, Taxes and Homework Assignments. No matter where you study, and no matter…
-
![How to finish assignment]()
How to Finish Assignments When You Can’t
Crunch time is coming, deadlines need to be met, essays need to be submitted, and tests should be studied for.…
-
![Math Exams Study]()
How to Effectively Study for a Math Test
Numbers and figures are an essential part of our world, necessary for almost everything we do every day. As important…
"assignmentexpert.com" is professional group of people in Math subjects! They did assignments in very high level of mathematical modelling in the best quality. Thanks a lot
#339914 on Dec 2023
#339914 on Dec 2023
Comments
Leave a comment