HOUSE RENT WEBSITE
Creating a house rent website using HTML, CSS, and JavaScript is a fantastic project that can be a valuable learning experience and a useful tool for property seekers and landlords. Here's a breakdown of how you can build such a website with these technologies:
HTML for Structure:
Start by creating the basic structure of your web page using HTML. This includes elements like headers, navigation menus, search forms, and sections for property listings.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>house rent website</title>
</head>
<body>
<div class="background">
<!-- <img src="https://cdn.loewshotels.com/loewshotels.com-2466770763/cms/cache/v2/5f5a6e0d12749.jpg/1920x1080/fit/80/86e685af18659ee9ecca35c465603812.jpg" alt=""> -->
<div class="navbar">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Taj_Hotels_logo.svg/1200px-Taj_Hotels_logo.svg.png" alt="">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">facility</a></li>
<li><a href="#">house</a></li>
</ul>
</div>
<div class="contant">
<h1>choose your house</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum blanditiis fugiat <br> nulla cupiditate. Similique voluptas temporibus, aliquam velit fuga <br> necessitatibus modi quisquam officia?</p>
<div class="btn">
<button type="button"><span></span>more house</button>
<button type="button"><span></span>rate us</button>
</div>
</div>
</div>
</body>
</html>
CSS for Styling:
Apply CSS to style your website and make it visually appealing. You can define colors, fonts, layout, and responsive design to ensure that your site looks good on various devices.
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.background{
position: relative;
background-image: url(https://cdn.loewshotels.com/loewshotels.com-2466770763/cms/cache/v2/5f5a6e0d12749.jpg/1920x1080/fit/80/86e685af18659ee9ecca35c465603812.jpg);
/* background-color: rgb(188, 226, 226); */
height: 100vh;
width: 100%;
background-size: cover;
background-position: center;
overflow: hidden;
/* opacity: 0.5; */
}
.navbar img{
position: relative;
width: 5%;
margin: 0 50px;
cursor: pointer;
}
.navbar{
position: relative;
/* background-color: white; */
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
/* opacity: 0.5; */
/* background: transparent; */
}
.navbar ul li{
position: relative;
display: inline-block;
margin: 0 20px;
/* color: black; */
/* z-index: -1; */
/* opacity: 10; */
font-weight: bold;
/* overflow: hidden; */
}
.navbar ul li a{
text-decoration: none;
list-style: none;
color: rgb(249, 64, 3);
/* overflow: hidden; */
/* position: relative; */
}
.navbar ul li::after{
position: absolute;
content: " ";
height: 4px;
width: 0;
background-color: rgb(0, 229, 255);
left:0;
bottom: -6px;
transition: 0.5s;
}
.navbar ul li:hover::after{
width: 100%;
border-radius: 100%;
}
.contant{
width: 100%;
/* align-items: center; */
/* justify-content: center; */
position: absolute;
top: 30vh;
text-align: center;
/* margin: 20px 10px; */
/* padding: 20px 10px; */
/* z-index: -1; */
}
.contant h1{
font-size: 3.5rem;
margin: 15px 0px;
color: brown;
cursor: pointer;
/* z-index: -1; */
}
.contant p{
font-weight: 100;
/* font-style: oblique; */
/* font-size: 20px; */
line-height: 20px;
font-weight: bold;
/* z-index: -1; */
color: rgb(251, 181, 3);
cursor: pointer;
}
button{
width: 200px;
padding: 10px 0;
margin: 20px 5px;
color: rgb(10, 252, 26);
/* background-color: aqua; */
text-align: center;
border: 2px solid black;
border-radius: 25px;
font-weight: bold;
font-size:15px;
cursor: pointer;
background: transparent;
position: relative;
overflow: hidden;
}
span{
background: rgb(1, 248, 248);
height: 100%;
width: 0%;
border-radius: 25px;
position: absolute;
left: 0;
bottom: 0;
/* z-index: -1; */
/* opacity: 0.5; */
/* z-index: -1; */
transition: 0.5s;
}
button:hover span{
width: 100%;
}
</style>
JavaScript for Interactivity:
Use JavaScript to add interactivity and functionality to your website. Here are some key features you can implement:
Property Listings: Use JavaScript to dynamically load property listings from a database or API. You can create a template for each listing and use JavaScript to populate it with property information.
Search and Filter Options: Create interactive search and filter forms that allow users to refine their property search. Use JavaScript to handle user input and update the displayed listings accordingly.
User Accounts: Implement user registration and login functionality. JavaScript can help manage user sessions and store user-specific data.
<script src="https://unpkg.com/scrollreveal"></script>
<script>
const sr = ScrollReveal ({
distance: '65px',
duration:2600,
delay:250,
reset: true
});
sr.reveal('.contant', {delay:300, origin:'top'});
sr.reveal('.navbar img', {delay:100, origin:'bottom'});
sr.reveal('.navbar ul', {delay:500, origin:'left'});
</script>
Rent Payment: Integrate payment gateways or services for online rent payment. JavaScript can facilitate this transaction process.
Backend Development:
While HTML, CSS, and JavaScript can create the front end of your website, you'll likely need a server-side language (e.g., Python, Ruby, Node.js) to handle backend operations like user authentication, database management, and API integrations.
Database:
Use a database (such as MySQL, PostgreSQL, or MongoDB) to store property listings, user data, reviews, and other relevant information. Your backend language will interact with the database to retrieve and store data.
Hosting and Domain:
Choose a hosting provider to deploy your website and obtain a domain name to make it accessible on the internet.
Hello everyone this side Debasish If my code is usefull for you then you also comment and share to your friends.
ReplyDelete