Project Report
Topic: Flat Book
Contributor:
Pradyumn Vashisht(211127)
Submitted To: Sunil Dutt Sharma Sir
Submission date:15th May 2023(Monday)
Abstract:
This project involves designing and developing a web page for finding houses. The webpage
is designed using HTML and CSS, which are the basic building blocks of web development.
The main objective of this project is to provide users with an easy-to-use interface for
finding houses based on their preferences and requirements.
This webpage gives you the best high-end flats and houses to buy and to rent and provides
you to check out places for commercial use and even helps you to find a PG. This comprises
of a menu on the home page from where you will be directed to the different pages where
you will be looking at different properties.
The design of the webpage is clean and modern, with a responsive layout that works well on
all devices, including desktops, laptops, tablets, and mobile phones. The colour scheme and
typography are chosen to create a professional and user-friendly experience.
Overall, this project demonstrates the use of HTML and CSS to create a functional and
attractive webpage for finding houses, flats, villas, commercial buildings etc.
Key Learnings:
HTML & CSS: the project demonstrates the use of html and css for designing and
developing a functional and attractive web page.
RESPONSIVE DESIGN: The project shows how to create a responsive layout that
works well on all devices ,including desktops, laptops, tablets and mobile phones .
USER EXPERIENCE: The project emphasizes the importance of UI/UX designing which
will give a good feedback to the user and will let him engage in the page for a longer
period of time.
PLANNING AND ORGANIZATION: The project highlights the importance of planning
and organization in web development, including creating a clear project objective,
outlining the necessary features, and designing a user-friendly interface.
Purpose:
The purpose of the above project is to create a web page that helps users find houses based
on their preferences and requirements. The project aims to provide an easy-to-use interface
for users to search for houses, and view house listings with detailed information such as
images, floor plans, amenities, and prices.
User needs:
Find Suitable Houses: The primary need of the users is to find houses that meet their
specific requirements and preferences. Users need an easy-to-use interface that
allows them to filter houses based on desired number of bedrooms and other
features, and view detailed information such as images, floor plans, and amenities.
User-Friendly Interface: Users need a user-friendly interface that is easy to navigate
and understand, with clear and intuitive navigation menus, search bars, and clickable
house listings.
Responsive Design: Users need a webpage that is responsive and works well on all
devices, including desktops, laptops, tablets, and mobile phones.
High Performance: Users need a webpage that loads quickly and responds to user
interactions in a timely manner, with minimal lag time or delays.
Clear and Professional Design: Users need a webpage that has a clear and
professional design, with an appropriate colour scheme and typography that create a
cohesive and visually pleasing user experience.
Accurate and Up-to-Date Information: Users need accurate and up-to-date
information about houses, including pricing, availability, and other details.
HLD/LLD:
Methodology:
The methodology for the House Finding Webpage project is not explicitly stated in the
provided information. However, based on typical software development practices, the
methodology may have followed a process similar to the Agile methodology, which involves
iterative and incremental development, with a focus on customer satisfaction, flexibility,
and continuous improvement.
The project may have followed the following steps:
Requirement gathering: Identify the user needs and requirements for the House
Finding Webpage through user interviews, surveys, and research.
Planning: Develop a plan for the project, including timelines, goals, and resources
required.
Design: Create wireframes and mockups of the webpage design and user interface.
Development: Write code and develop the House Finding Webpage, with a focus on
iterative development and continuous improvement.
Testing: Test the functionality and performance of the webpage to ensure that it
meets the user requirements and works as intended.
Deployment: Deploy the House Finding Webpage to a production environment,
making it available to users.
Maintenance: Continuously monitor and improve the webpage to ensure that it
meets user needs and stays up-to-date with changing technology and user
requirements.
Overall, the methodology for the House Finding Webpage project may have followed a
standard software development process, with a focus on iterative development and
customer satisfaction.
Program of the project:
main.html:
<!DOCTYPE html>
<html>
<head>
<title>House Design select</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header >
<nav>
<div class="Logo">
Flat Book
</div>
<div class="Menu">
<a href="buying.html">Buying</a>
<a href="renting.html">Renting</a>
<a href="https://bookmypg.co.in/">PG</a>
<a href="https://strataprop.com/property-listing?
hsa_acc=7105654635&hsa_tgt=kwd-
152392218&hsa_cam=6514465332&hsa_src=g&hsa_kw=property
%20share&hsa_grp=78306166476&hsa_ad=383491455241&hsa_ver=3&hsa_mt=b&hsa
_net=adwords">Commercial</a>
</div>
<div class="register">
<a href="register.html">Register</a>
</div>
</nav>
<section class="h-text">
<span>Enjoy</span>
<h1>House surfing </h1>
<br>
<a href="#">Book your new flat</a>
</section>
</header>
</body>
</html>
main.css:
body{
background-image: url('head.jpg');
background-size: cover;
}
.header{
width:100%;
height:100vh;
background-size:cover;
font-family: sans-serif;
}
nav{
width:100%;
height:100px;
display:flex ;
justify-content: space-around;
align-items: center;
}
.Logo{
font-size: 2em;
letter-spacing: 2;
color:aliceblue;
}
.Menu a{
text-decoration: none;
color: aliceblue;
padding: 10px 20px;
font-size: 20px;
position: relative;
}
.Menu a:before{
content:' ';
position: absolute;
top: 0%;
left: 0%;
width:0% ;
height: 100%;
border-bottom:2px solid indianred;
transition: 0.4s linear;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linear;
}
.Menu a:hover:before{
width:80%
}
.register a{
text-decoration: none;
color:aliceblue;
font-size: 20px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
.register a:hover{
background: transparent;
border:2px solid indianred ;
transition: 0.4s linear;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linear;
}
.h-text{
max-width: 650px;
position:absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
color:whitesmoke;
text-align: center;
}
.h-text span{
font-size: 3em;
}
.h-text h1{
font-size:3.5em;
}
.h-text a{
text-decoration: none;
background: indianred;
color: aliceblue;
padding: 10px 20px;
letter-spacing:5px
}
.h-text a:hover{
background: transparent;
border: 2px solid indianred;
transition: 0.4s linear;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linear;
}
Buying.html:
<!DOCTYPE html>
<html>
<head>
<title>Buying</title>
<link rel="stylesheet" href="buying.css" />
</head>
<body>
<div class="flats">
<h1><u>Ready to move Flats</u></h1>
<a
href="https://www.magicbricks.com/propertyDetails/4-BHK-8250-
Sq-ft-Builder-Floor-Apartment-FOR-Sale-Chanakyapuri-in-New-
Delhi&id=4d423633393234363137"
>
<img src="flat1.jpg" style="width:425px; height: 325px;"
/></a>
<p>₹35.0 Cr<br> 4 BHK Builder Floor For Sale in Chanakyapuri, New
Delhi
</p>
<a
href="https://www.magicbricks.com/propertyDetails/4-BHK-6400-
Sq-ft-Builder-Floor-Apartment-FOR-Sale-Jor-Bagh-in-New-Delhi-
r18&id=4d423135343732343333"
><img src="flat2.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹32.0 Cr <br>4 BHK Builder Floor For Sale in Jor Bagh, New
Delhi
</p>
<a
href="https://www.magicbricks.com/propertyDetails/5-BHK-10000-
Sq-ft-Penthouse-FOR-Sale-Greater-Kailash-2-in-New-
Delhi&id=4d423634303538373433"
>
<img src="flat3.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹31.50 Cr<br> 5 BHK For Sale in DLF Kings Court, GK II, New
Delhi
</p>
<a
href="https://www.magicbricks.com/propertyDetails/10-plus-BHK-
16000-Sq-ft-Multistorey-Apartment-FOR-Sale-Punjabi-Bagh-East-in-New-
Delhi&id=4d423633353731373537"
><img src="flat4.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹29.0 Cr<br> 16,000 Sq-ft 10 BHK Flat For Sale in Punjabi
Bagh East, New Delhi
</p>
<a
href="https://www.magicbricks.com/propertyDetails/5-BHK-5400-
Sq-ft-Builder-Floor-Apartment-FOR-Sale-Jor-Bagh-in-New-Delhi-
r1&id=4d423635323236313231"
><img src="flat5.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹27.99 Cr<br> 5 BHK Builder Floor For Sale in Jor Bagh, New
Delhi
</p>
</div>
<div class="houses">
<h1><u>Ready to move Houses</u></h1>
<a
href="https://www.magicbricks.com/south-delhi-luxury-floors-
greater-kailash-1-new-delhi-pdpid-4d4235333337323339/prjDtId-
4d42313536363737"
><img src="house1.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹ 4.0 Cr - ₹ 9.30 Cr<br> Properties in South Delhi Luxury
Floors
</p>
<a
href="https://www.magicbricks.com/skyom-apartment-mahavir-
enclave-new-delhi-pdpid-4d4235333332303835/prjDtId-4d42313531323935"
><img src="house2.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹ 55.0 Lac - ₹ 85.0 Lac<br> Properties in Skyom Apartment
</p>
<a
href="https://www.magicbricks.com/propertyDetails/3-BHK-1700-Sq-
ft-Multistorey-Apartment-FOR-Sale-Alaknanda-in-New-
Delhi&id=4d423634353334353839"
><img src="house3.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹2.25 Cr<br>3 BHK Flat For Sale in DDA Tara Apartment,
Alaknanda, New Delhi
</p>
<a
href="https://www.magicbricks.com/propertyDetails/4-BHK-2560-Sq-ft-
Multistorey-Apartment-FOR-Sale-Kewal-Park-in-New-
Delhi&id=4d423635323932343135"
><img src="house4.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹2.0 Cr<br>2560 Sq-ft 4 BHK Flat For Sale in Kewal Park, New Delhi
</p>
<a
href="https://www.99acres.com/paradigm-the-hermitage-park-zirakpur-
chandigarh-npxid-r204673"
><img src="house5.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹ 82.57 <br>2, 3, 4 BHK ApartmentParadigm The Hermitage Park
Zirakpur, Chandigarh
</p>
</div>
</body>
</html>
Buying.css:
*{
background-image: url('wood.jpg');
background-size: cover;
}
h1{
font-style: italic;
color:gold;
font-family: 'Times New Roman', Times, serif;
text-align: left;
}
p{
color: aqua;
font-family: 'Times New Roman', Times, serif;
}
.flats{
float: left;
width: 25%;
padding: 10px;
}
.houses{
float: right;
width: 25%;
padding:10px;
}
.flats img:before{
content:' ';
position: absolute;
top: 0%;
left: 0%;
width:0% ;
height: 100%;
transition: 0.4s linear;
.flats img:hover{
opacity: 0.5;
width: 80%;
border-bottom:2px solid gold;
}
.houses img:before{
content:' ';
position: absolute;
top: 0%;
left: 0%;
width:0% ;
height: 100%;
transition: 0.4s linear;
}
.houses img:hover{
opacity: 0.5;
width: 80%;
border-bottom:2px solid gold;
}
Login.html:
<html>
<head>
<title>Flat book Login page</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<section class="wrapper">
<div class="form login">
<header>Login </header>
<form action="#">
<input type="text" placeholder="E mail address"
Required />
<input type="password" placeholder="Password"
Required />
<a href="#">Forgot Password?</a>
<input type="submit" value="login"/>
</form>
</div>
</section>
</body>
</html>
Login.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: white;
}
.wrapper{
position: relative;
max-width: 470px;
width:100%;
border-radius: 12px;
padding:20px 30px 120px;
background:blue;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.form.login{
position: absolute;
left: 50%;
bottom: -86%;
transform: translate(-50%);
width:calc(100%+220px);
padding:20px 140px;
border-radius: 50%;
height:100%;
background: white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
.wrapper.active .form.login{
bottom:-15%
}
.form.login input{
border:1px solid black;
}
.form.login.input:focus{
box-shadow: 0 1px 0 #aaa;
}
.form header{
font-size: 30px;
text-align: center;
color:#fff;
font-weight: 600;
cursor: pointer;
}
.form.login header{
color:#333;
opacity:0.6;
}
.wrapper form{
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px;
}
.form input{
height: 60px;
outline: none;
border: none;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
color: #333;
border-radius: 8px;
}
form .checkbox{
display: flex;
align-items: center;
gap: 10px;
}
.checkbox input[type="checkbox"]{
height: 16px;
width: 16px;
accent-color: white;
cursor: pointer;
}
form .checkbox label{
cursor: pointer;
color:white;
}
form a{
color:#333;
text-decoration: none;
}
form a:hover{
text-decoration: underline;
}
form input[type="submit"]{
margin-top: 15px;
padding:none;
font-size: 18px;
font-weight: 500;
cursor: pointer;
}
form.login input[type="submit"]{
background: blue;
color:#fff;
border:none;
}
Register.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Flat Book Login page</title>
<link rel="stylesheet" href="register.css">
</head>
<body style="background-image: url('header.jpg');">
<section class="wrapper">
<div class="form signup">
<header>Signup </header>
<form action="#">
<input type="text" placeholder="Full Name" Required
/>
<input type="text" placeholder="E mail address"
Required />
<input type="password" placeholder="Password"
Required />
<div class="checkbox">
<input type="checkbox" id="signup" />
<label for="signup ">I accept all the terms and
conditions</label>
</div>
<input type="submit" value="Signup"/>
<a href="login.html" style="text-decoration: none;
background-color: antiquewhite; width: 20%; height: 90%; border-radius:
5px;">Login</a>
</form>
</div>
<script>
const wrapper = document.querySelector("wrapper"),
signupHeader=document.querySelector(".signup header"),
loginHeader=document.querySelector(".login header");
loginHeader.addEventListener("click", () =>{
wrapper.classList.add("active")
});
signupHeader.addEventListener("click", () =>{
wrapper.classList.remove("active")
});
</script>
</section>
</body>
</html>
Register.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: white;
}
.wrapper{
position: relative;
max-width: 470px;
width:100%;
border-radius: 12px;
padding:20px 30px 120px;
background:blue;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.form.login{
position: absolute;
left: 50%;
bottom: -86%;
transform: translate(-50%);
width:calc(100%+220px);
padding:20px 140px;
border-radius: 50%;
height:100%;
background: white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
.wrapper.active .form.login{
bottom:-15%
}
.form.login input{
border:1px solid black;
}
.form.login.input:focus{
box-shadow: 0 1px 0 #aaa;
}
.form header{
font-size: 30px;
text-align: center;
color:#fff;
font-weight: 600;
cursor: pointer;
}
.form.login header{
color:#333;
opacity:0.6;
}
.wrapper form{
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px;
}
.form input{
height: 60px;
outline: none;
border: none;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
color: #333;
border-radius: 8px;
}
form .checkbox{
display: flex;
align-items: center;
gap: 10px;
}
.checkbox input[type="checkbox"]{
height: 16px;
width: 16px;
accent-color: white;
cursor: pointer;
}
form .checkbox label{
cursor: pointer;
color:white;
}
form a{
color:#333;
text-decoration: none;
}
form a:hover{
text-decoration: underline;
}
form input[type="submit"]{
margin-top: 15px;
padding:none;
font-size: 18px;
font-weight: 500;
cursor: pointer;
}
form.login input[type="submit"]{
background: blue;
color:#fff;
border:none;
}
Renting.html:
<!DOCTYPE html>
<html>
<head>
<title>Buying</title>
<link rel="stylesheet" href="renting.css" />
</head>
<body>
<div class="flats">
<h1><u>Ready to move Flats</u></h1>
<a
href=""
>
<img src="1.jpg" style="width:425px; height: 325px;"
/></a>
<p>₹75,000<br> 3 BHK 1350 Sq-ft Flat/Apartment For Rent in Dhaval
Sunrise Orlem, Orlem, Mumbai
</p>
<a
href=""
><img src="12.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹32.0 Cr <br>4 BHK Builder Floor For Sale in Jor Bagh, New
Delhi
</p>
<a
href=""
>
<img src="13.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹31.50 Cr<br> 5 BHK For Sale in DLF Kings Court, GK II, New
Delhi
</p>
<a
href=""
><img src="14.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹29.0 Cr<br> 16,000 Sq-ft 10 BHK Flat For Sale in Punjabi
Bagh East, New Delhi
</p>
<a
href=""
><img src="15.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹27.99 Cr<br> 5 BHK Builder Floor For Sale in Jor Bagh, New
Delhi
</p>
</div>
<div class="houses">
<h1><u>Ready to move Houses</u></h1>
<a
href="https://www.magicbricks.com/propertyDetails/3-BHK-1350-
Sq-ft-Multistorey-Apartment-FOR-Rent-Orlem-in-
Mumbai&id=4d423632333433323937"
><img src="1.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹ 4.0 Cr - ₹ 9.30 Cr<br> Properties in South Delhi Luxury
Floors
</p>
<a
href=""
><img src="2.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹ 55.0 Lac - ₹ 85.0 Lac<br> Properties in Skyom Apartment
</p>
<a
href=""
><img src="3.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹2.25 Cr<br>3 BHK Flat For Sale in DDA Tara Apartment,
Alaknanda, New Delhi
</p>
<a
href=""
><img src="4.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹2.0 Cr<br>2560 Sq-ft 4 BHK Flat For Sale in Kewal Park, New Delhi
</p>
<a
href=""
><img src="5.jpg"style="width:425px; height: 325px;"
/></a>
<p>₹ 82.57 <br>2, 3, 4 BHK ApartmentParadigm The Hermitage Park
Zirakpur, Chandigarh
</p>
</div>
</body>
</html>
Renting.css:
*{
background-image: url('wood.jpg');
background-size: cover;
}
h1{
font-style: italic;
color:gold;
font-family: 'Times New Roman', Times, serif;
text-align: left;
}
p{
color: aqua;
font-family: 'Times New Roman', Times, serif;
}
.flats{
float: left;
width: 25%;
padding: 10px;
}
.houses{
float: right;
width: 25%;
padding:10px;
}
.flats img:before{
content:' ';
position: absolute;
top: 0%;
left: 0%;
width:0% ;
height: 100%;
transition: 0.4s linear;
}
.flats img:hover{
opacity: 0.5;
width: 80%;
border-bottom:2px solid gold;
}
.houses img:before{
content:' ';
position: absolute;
top: 0%;
left: 0%;
width:0% ;
height: 100%;
transition: 0.4s linear;
}
.houses img:hover{
opacity: 0.5;
width: 80%;
border-bottom:2px solid gold;
}
Output:
Home Page:
Login/Signup:
Buying Page:
Renting Page:
Conclusion:
In conclusion, the House Finding Webpage project is an example of how to design and
develop a functional and attractive web page using HTML and CSS. The project
demonstrates the importance of user experience, planning, organization, and attention to
detail in the web development process. By providing an easy-to-use interface for users to
search for houses, and view detailed information such as images, floor plans, amenities, and
prices, the project serves as a valuable resource for users searching for houses. Overall, the
project highlights the technical and creative abilities of the project team, while also
emphasizing the importance of meeting user needs and delivering a high-quality user
experience.
