Scribd
Upload
5 views

HTML ^0 CSS

Uploaded by

junedalam8357
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

HTML ^0 CSS

Uploaded by

junedalam8357
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 31

HTML (Home Page)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<title>PG-Life || Juned Alam</title>

<!-- <link href="css/bootstrap.min.css" rel="stylesheet" /> -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/6.0.0-beta3/css/all.min.css">

<link rel="stylesheet" href="/Common Section/signup&login.css">

<link rel="stylesheet" href="/Common Section/commonFooter.css">

<link rel="stylesheet" href="style.css">

</head>

<body>

<!-- home page -->

<!-- navigation bar -->

<header>

<nav class="nav-bar">

<div class="logo">

<a href="/index.html">

<img src="img_folder_assignment_2/img/logo.png" alt="logo-


image">

</a>

</div>
<div class="nav-items">

<a href="#signup-modal" target="_parent">

<i class="fa-solid fa-user"></i>

<span>Singup</span>

</a>

<a href="#login-modal" target="_parent">

<i class="fa-solid fa-right-to-bracket"></i>

<span>Login</span>

</a>

</div>

</nav>

</header>

<!-- hero section -->

<main>

<div class="hero-section">

</div>

<div class="background">

</div>

<div class="content">

<h1>Happiness per Square Feet</h1>

<div class="search">

<input type="text" placeholder="Enter your city to search for PGs">

<button type="submit">

<i class="fa-solid fa-magnifying-glass"></i>


</button>

</div>

</div>

<div class="citys">

<p>Major Cities</p>

<div class="city-img">

<a href="/Property_list//Property_list_html/Delhi_PG.html"
target="_parent">

<div>

<img src="img_folder_assignment_2/img/delhi.png" alt="India


Gate image">

</div>

</a>

<a href="/Property_list/Property_list_html/Mumbai_PG.html"
target="_parent">

<div>

<img src="img_folder_assignment_2/img/mumbai.png"
alt="Gateway of India">

</div>

</a>

<a href="/Property_list/Property_list_html/Bangalore_PG.html"
target="_parent">

<div>

<img src="img_folder_assignment_2/img/bangalore.png"
alt="Vidhana Soudha">

</div>

</a>

<a href="/Property_list/Property_list_html/Hydrabad_PG.html"
target="_parent">

<div>
<img src="img_folder_assignment_2/img/hyderabad.png"
alt="Char Minar">

</div>

</a>

</div>

</div>

<!-- signup page section -->

<div class="signup-modal-section" id="signup-modal">

<div class="signup-section">

<div class="heading-adjusment">

<div class="heading">

<h2>Signup with PGLife</h2>

<a href="#" class="login-overlay"></a>

<a href="#" class="close">&times;</a>

</div>

</div>

<form class="form">

<div class="form-group">

<i class="fa-solid fa-user"></i>

<input type="text" name="name" placeholder="Full Name"


required>

</div>

<div class="form-group">

<i class="fa-solid fa-phone"></i>

<input type="tel" name="phone" placeholder="Phone Number"


required>

</div>

<div class="form-group">

<i class="fa-solid fa-envelope"></i>


<input type="email" name="email" placeholder="Email"
required>

</div>

<div class="form-group">

<i class="fa-solid fa-lock"></i>

<input type="password" name="password"


placeholder="Password" required>

</div>

<div class="form-group">

<i class="fa-solid fa-graduation-cap"></i>

<input type="text" name="college" placeholder="College Name"


required>

</div>

<div class="form-gender-group">

<span>I'm a</span>

<input type="radio" name="gender" value="male" required>

<label for="male">Male</label>

<input type="radio" name="gender" value="female" required>

<label for="female">Female</label>

</div>

<button>Create Account</button>

<div class="login-btn">

<span>

Already have an account? <a href="#login-modal"


target="_parent">Login</a>

</span>

</div>
</form>

</div>

</div>

<!-- Loginpage section -->

<div class="login-modal-container" id="login-modal">

<div class="login-section">

<div class="heading-adjusment">

<div class="heading">

<h2>Login with PGLife</h2>

<a href="#" class="login-overlay"></a>

<a href="#" class="close">&times;</a>

</div>

</div>

<form class="form">

<div class="form-group">

<i class="fa-solid fa-envelope"></i>

<input type="text" name="email" placeholder="Email" required>

</div>

<div class="form-group">

<i class="fa-solid fa-lock"></i>

<input type="password" name="password"


placeholder="Password" required>

</div>

<button>Login</button>

<div class="signup-btn">
<a href="#signup-modal" target="_parent">Click
here</a><span>to Ragister a new account

</span>

</div>

</form>

</div>

</div>

</main>

<!-- footer section -->

<!-- <footer>

<div class="footer">

<div class="footer-content">

<a href="/Property_list/Property_list_html/Delhi_PG.html"
target="_parent">PG in Delhi</a>

<a href="/Property_list/Property_list_html/Mumbai_PG.html"
target="_parent">PG in Mumbai</a>

<a href="/Property_list/Property_list_html/Bangalore_PG.html"
target="_parent">PG in Bangalore</a>

<a href="/Property_list/Property_list_html/Hydrabad_PG.html"
target="_parent">PG in Hyderabad</a>

</div>

<div class="cr-icon">

<i class="fa-regular fa-copyright"></i>

<p>2024 Copyright PG-Life</p>

</div>

</div>

</footer> -->

<footer>

<div class="footer-links">

<ul>
<li><a href="/index.html" target="_parent">Home Page</a></li>

<li><a href="/Property_list/Property_list_html/Delhi_PG.html"
target="_parent">PG in Delhi</a></li>

<li><a href="/Property_list/Property_list_html/Mumbai_PG.html"
target="_parent">PG in Mumbai</a></li>

<li><a href="/Property_list/Property_list_html/Bangalore_PG.html"
target="_parent">PG in Bangalore</a></li>

<li><a href="/Property_list/Property_list_html/Hydrabad_PG.html"
target="_parent">PG in Hyderabad</a></li>

</ul>

<div class="sci">

<a href="https://www.linkedin.com/feed/"><i class="fa-brands fa-


linkedin"></i></a>

<a href="https://github.com/junedalam00"><i class="fa-brands fa-


github"></i></a>

<a href="https://www.facebook.com/profile.php?
id=100046577055940"><i class="fa-brands fa-facebook"></i></a>

<a href="https://www.instagram.com/reels/DD3lHHkqRJK/"><i
class="fa-brands fa-instagram"></i></a>

</div>

</div>

<div class="contact-info">

<h1>Contact Us</h1>

<form class="form">

<input type="text" placeholder="Name" required>

<input type="email" placeholder="Email" required>

<button id="click_me" onclick="alert('Thanks')">Send


Massege</button>

</form>

</div>

<div class="cr-icon">

<div class="copy-right">
<i class="fa-regular fa-copyright"></i>

<p>2024 Copyright PG-Life</p>

</div>

</div>

</footer>

</body>

</html>

HTML (Cities)
<body>

<header>

<nav class="nav-bar">

<div class="logo">

<a href="/index.html">

<img src="/img_folder_assignment_2/img/logo.png" alt="logo-


image">

</a>

</div>

<div class="nav-items">

<a href="#signup-modal" target="_parent">

<i class="fa-solid fa-user"></i>

<span>Singup</span>

</a>

<a href="#login-modal" target="_parent">

<i class="fa-solid fa-right-to-bracket"></i>

<span>Login</span>
</a>

</div>

</nav>

<div class="mini-nav">

<div class="mini-nav-content">

<span><a href="/index.html">Home</a></span>

<span>/</span>

<span>Delhi</span>

<span>/</span>

<span><a
href="/Property_list/Property_list_html/Mumbai_PG.html">Mumbai</a></
span>

<span>/</span>

<span><a
href="/Property_list/Property_list_html/Bangalore_PG.html">Bangalore</
a></span>

<span>/</span>

<span><a
href="/Property_list/Property_list_html/Hydrabad_PG.html">Hyderabad</
a></span>

</div>

</div>

</header>

<main>

<div class="hero-section">

<div class="filter-section">

<div class="filter">
<img src="/img_folder_assignment_2/img/filter.png" alt="filter-
image">

<span>Filter</span>

</div>

<div class="filter">

<img src="/img_folder_assignment_2/img/desc.png" alt="filter-


image">

<span>Highest rent first</span>

</div>

<div class="filter">

<img src="/img_folder_assignment_2/img/asc.png" alt="filter-


image">

<span>Lowest rent first</span>

</div>

</div>

<div class="properties-list">

<div class="img-container">

<img
src="/img_folder_assignment_2/img/Properties_img_list/p1.jpg"
alt="property image">

</div>

<div class="content-container">

<div class="rating">

<div class="stars">

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>


<i class="fa-solid fa-star"></i>

<i class="fa-regular fa-star"></i>

</div>

<div class="reaction">

<i class="fa-regular fa-heart"></i>

<span>5 intrested</span>

</div>

</div>

<h2>Saxena's Paying Guest</h2>

<p>H.No. 3958 Kaseru Walan, Pahar Ganj, New Delhi, Delhi


110055</p>

<img src="/img_folder_assignment_2/img/male.png" alt="Gents-


Img">

<div class="rent">

<p>₹ 5,000/-<span>per month</span></p>

<a href="/Property_details/Delhi Property/Property_1/property-


details.html">

<button>View</button>

</a>

</div>

</div>

</div>

<div class="properties-list">

<div class="img-container">

<img
src="/img_folder_assignment_2/img/Properties_img_list/p2.jpg"
alt="property image">

</div>
<div class="content-container">

<div class="rating">

<div class="stars">

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-regular fa-star-half-stroke"></i>

<i class="fa-regular fa-star"></i>

</div>

<div class="reaction">

<i class="fa-regular fa-heart"></i>

<span>3 intrested</span>

</div>

</div>

<h2>Navrang PG Home</h2>

<p>644-C,Mohalla Baoli 6 Tooti Chowk, Paharganj, New Delhi, Delhi


110055</p>

<div class="gents-ladies-img">

<img src="/img_folder_assignment_2/img/male.png" alt="Gents-


Img">

<img src="/img_folder_assignment_2/img/female.png"
alt="Ladies-Img" id="img-2">

</div>

<div class="rent">

<p>₹ 6,000/-<span>per month</span></p>

<a href="/Property_details/Delhi Property/Property_2/property-


details.html">
<button>View</button>

</a>

</div>

</div>

</div>

<div class="properties-list">

<div class="img-container">

<img
src="/img_folder_assignment_2/img/Properties_img_list/p1.jpg"
alt="property image">

</div>

<div class="content-container">

<div class="rating">

<div class="stars">

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

</div>

<div class="reaction">

<i class="fa-regular fa-heart"></i>

<span>6 interested</span>

</div>

</div>

<h2>Greenwood Stay</h2>

<p>11, Saket Road, Delhi 110017</p>

<img src="/img_folder_assignment_2/img/male.png" alt="Gents-


Img">
<div class="rent">

<p>₹ 7,000/-<span>per month</span></p>

<a href="/Property_details/Delhi Property/Property-3/property-


details.html">

<button>View</button>

</a>

</div>

</div>

</div>

<div class="properties-list">

<div class="img-container">

<img
src="/img_folder_assignment_2/img/Properties_img_list/p2.jpg"
alt="property image">

</div>

<div class="content-container">

<div class="rating">

<div class="stars">

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star-half-stroke"></i>

<i class="fa-regular fa-star"></i>

</div>

<div class="reaction">

<i class="fa-regular fa-heart"></i>

<span>8 interested</span>

</div>

</div>
<h2>Modern PG</h2>

<p>25, Hauz Khas, Delhi 110016</p>

<img src="/img_folder_assignment_2/img/female.png"
alt="Ladies-Img">

<div class="rent">

<p>₹ 6,500/-<span>per month</span></p>

<a href="/Property_details/Delhi Property/Property-4/property-


details.html">

<button>View</button>

</a>

</div>

</div>

</div>

<div class="properties-list">

<div class="img-container">

<img
src="/img_folder_assignment_2/img/Properties_img_list/p3.jpg"
alt="property image">

</div>

<div class="content-container">

<div class="rating">

<div class="stars">

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star-half-stroke"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-regular fa-star"></i>

</div>

<div class="reaction">
<i class="fa-regular fa-heart"></i>

<span>5 interested</span>

</div>

</div>

<h2>Luxury Living</h2>

<p>45, Vasant Kunj, Delhi 110070</p>

<img src="/img_folder_assignment_2/img/male.png" alt="Gents-


Img">

<div class="rent">

<p>₹ 7,500/-<span>per month</span></p>

<a href="/Property_details/Delhi Property/Property-5/property-


details.html">

<button>View</button>

</a>

</div>

</div>

</div>

</div>

<!-- signup page section -->

<div class="signup-modal-section" id="signup-modal">

<div class="signup-section">

<div class="heading-adjusment">

<div class="heading">

<h2>Signup with PGLife</h2>

<a href="#" class="login-overlay"></a>

<a href="#" class="close">&times;</a>

</div>

</div>
<form class="form">

<div class="form-group">

<i class="fa-solid fa-user"></i>

<input type="text" name="name" placeholder="Full Name"


required>

</div>

<div class="form-group">

<i class="fa-solid fa-phone"></i>

<input type="tel" name="phone" placeholder="Phone Number"


required>

</div>

<div class="form-group">

<i class="fa-solid fa-envelope"></i>

<input type="email" name="email" placeholder="Email"


required>

</div>

<div class="form-group">

<i class="fa-solid fa-lock"></i>

<input type="password" name="password"


placeholder="Password" required>

</div>

<div class="form-group">

<i class="fa-solid fa-graduation-cap"></i>

<input type="text" name="college" placeholder="College Name"


required>

</div>

<div class="form-gender-group">

<span>I'm a</span>

<input type="radio" name="gender" value="male" required>

<label for="male">Male</label>
<input type="radio" name="gender" value="female" required>

<label for="female">Female</label>

</div>

<button>Create Account</button>

<div class="login-btn">

<span>

Already have an account? <a href="#login-modal"


target="_parent">Login</a>

</span>

</div>

</form>

</div>

</div>

<!-- Loginpage section -->

<div class="login-modal-container" id="login-modal">

<div class="login-section">

<div class="heading-adjusment">

<div class="heading">

<h2>Login with PGLife</h2>

<a href="#" class="login-overlay"></a>

<a href="#" class="close">&times;</a>

</div>

</div>

<form class="form">

<div class="form-group">

<i class="fa-solid fa-envelope"></i>


<input type="text" name="email" placeholder="Email" required>

</div>

<div class="form-group">

<i class="fa-solid fa-lock"></i>

<input type="password" name="password"


placeholder="Password" required>

</div>

<button>Login</button>

<div class="signup-btn">

<a href="#signup-modal">Click here</a><span>to Ragister a


new account</span>

</div>

</form>

</div>

</div>

</main>

<!-- <footer>

<div class="footer">

<div class="footer-content">

<a href="/Property_list/Property_list_html/Delhi_PG.html">PG in
Delhi</a>

<a href="/Property_list/Property_list_html/Mumbai_PG.html">PG in
Mumbai</a>

<a href="/Property_list/Property_list_html/Bangalore_PG.html">PG in
Bangalore</a>
<a href="/Property_list/Property_list_html/Hydrabad_PG.html">PG in
Hyderabad</a>

</div>

<div class="cr-icon">

<i class="fa-regular fa-copyright"></i>

<p>2024 Copyright PG-Life</p>

</div>

</div>

</footer> -->

<footer>

<div class="footer-links">

<ul>

<li><a href="/index.html" target="_parent">Home Page</a></li>

<li><a href="/Property_list/Property_list_html/Delhi_PG.html"
target="_parent">PG in Delhi</a></li>

<li><a href="/Property_list/Property_list_html/Mumbai_PG.html"
target="_parent">PG in Mumbai</a></li>

<li><a href="/Property_list/Property_list_html/Bangalore_PG.html"
target="_parent">PG in Bangalore</a></li>

<li><a href="/Property_list/Property_list_html/Hydrabad_PG.html"
target="_parent">PG in Hyderabad</a></li>

</ul>

<div class="sci">

<a href="https://www.linkedin.com/feed/"><i class="fa-brands fa-


linkedin"></i></a>

<a href="https://github.com/junedalam00"><i class="fa-brands fa-


github"></i></a>

<a href="https://www.facebook.com/profile.php?
id=100046577055940"><i class="fa-brands fa-facebook"></i></a>

<a href="https://www.instagram.com/reels/DD3lHHkqRJK/"><i
class="fa-brands fa-instagram"></i></a>

</div>
</div>

<div class="contact-info">

<h1>Contact Us</h1>

<form class="form">

<input type="text" placeholder="Name" required>

<input type="email" placeholder="Email" required>

<button id="click_me" onclick="alert('Thanks')">Send


Massege</button>

</form>

</div>

<div class="cr-icon">

<div class="copy-right">

<i class="fa-regular fa-copyright"></i>

<p>2024 Copyright PG-Life</p>

</div>

</div>

</footer>

</body>

</html>
CSS
@import url(https://www.scribd.com/'https://fonts.googleapis.com/css2?%3Cbr/%20%3Efamily=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Noto Sans", sans-serif;

body{

padding-top: 66px;

}
.nav-bar {

background-color: #fff;

position: fixed;

top: 0;

left: 0;

right: 0;

z-index: 1000;

display: flex;

justify-content: space-between;

align-items: center;

width: 100%;

height: 66px;

.logo img {

width: 108px;

margin-left: 16px;

margin-top: 5.2px;

.nav-items {

margin-right: 25px;

.nav-items a {

text-decoration: none;

color: #969494;

font-size: 13px;
}

.nav-items a:hover {

color: #383737;

transform: scale(1.0);

.nav-items a i {

color: #7d7c7c;

font-size: 13px;

margin-left: 50px;

.nav-items a i:hover {

color: #383737;

transform: scale(1.0);

.hero-section {

position: fixed;

top: 66;

z-index: -1;

background-image: url(https://www.scribd.com/img_folder_assignment_2/img/bg.png);

width: 100%;

height: 70vh;

text-align: center;

filter: brightness(100%);

}
.background {

position: relative;

top: 0;

left: 0;

background-color: rgba(0, 0, 0, 0.4);

width: 100%;

height: 70vh;

.content {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: #fff;

/* filter: brightness(100%); */

.content .search {

display: flex;

.content h1 {

margin-left: 60px;

margin-bottom: 20px;

font-weight: 600;

.content input {
width: 490px;

height: 38px;

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

border: none;

transition: transform 0.4s ease;

.content input:hover {

border: 1px solid #908d8d;

transform: scale(1.01);

.content input::placeholder {

font-size: 16px;

padding-left: 10px;

.content button {

height: 38px;

width: 40px;

background-color: #767474;

border: none;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

transition: transform 0.4s ease;

}
.content button:hover {

border: 1px solid #908d8d;

background-color: #646464;

transform: scale(1.05);

.content button i {

text-align: center;

font-size: 16px;

color: #fff;

.citys {

position: relative;

top: 0;

left: 0;

right: 0;

width: 100%;

height: 90vh;

text-align: center;

background-color: #fff;

.citys p {

font-size: 35px;

font-weight: 600;

padding-top: 80px;

color: #383737;

}
.city-img {

display: flex;

align-items: center;

justify-content: center;

margin-top: 100px;

margin-bottom: 80px;

.city-img a {

padding-left: 15px;

padding-right: 15px;

.city-img a div {

padding: 20px;

margin-left: 15px;

margin-right: 15px;

border-radius: 50%;

box-shadow: 0 0 3px #7d7c7c;

.city-img a div:hover {

box-shadow: 0 4px 6px #828181;

transform: scale(1.0);

.city-img img {

width: 100px;
height: 100px;

/* .footer {

position: relative;

bottom: 0;

width: 100%;

height: 17.8vh;

background-color: #383737;

.footer-content {

display: flex;

justify-content: center;

align-items: center;

width: 100%;

.footer-content a {

text-decoration: none;

color: #fff;

padding: 0 30px;

margin: 25px 30px 0 30px;

font-size: 13px;

.footer-content a:hover {

text-decoration: underline;

transform: scale(1.0);
}

.cr-icon {

display: flex;

align-items: center;

justify-content: center;

font-size: 13px;

margin-top: 35px;

color: #cbcaca;

.cr-icon i {

font-size: 9px;

margin-top: 2px;

margin-right: 3px;

} */

You might also like