Scribd
Upload
15 views14 pages

Web 8

The document contains HTML code for an OLX Clone website, including a home page, sign-up page, and login page. Each page features a structured layout with sections for navigation, search, categories, featured listings, and user forms. The design utilizes CSS for styling, ensuring a user-friendly interface for buying and selling items online.

Uploaded by

akkireddydinesh87
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
15 views14 pages

Web 8

The document contains HTML code for an OLX Clone website, including a home page, sign-up page, and login page. Each page features a structured layout with sections for navigation, search, categories, featured listings, and user forms. The design utilizes CSS for styling, ensuring a user-friendly interface for buying and selling items online.

Uploaded by

akkireddydinesh87
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/ 14

VU21CSEN0600129

VU21CSEN0600143
VU21CSEN0600157
VU21CSEN0600116
VU21CSEN0600060

Home page
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=d
evice-width,
initial-
scale=1.0">
<title>OLX
Clone</title>
<style>
body {
font-family:
Arial, sans-serif;
margin: 0;
padding: 0;

background-color:
#f0f0f0; /* Set
background color
*/
}

header {

background-color:
#333;
color: #fff;
text-align:
center;
padding:
20px 0;
}
nav {

background-color:
#444;
padding:
10px 0;
}

nav ul {
list-style-
type: none;
margin: 0;
padding: 0;
text-align:
center;
}

nav ul li {
display:
inline;
margin-
right: 20px;
}

nav ul li a {
color: #fff;
text-
decoration: none;
}

.search-
section {

background-color:
#ddd;
padding:
20px;
text-align:
center;
}

.categories-
section {

background-color:
#ccc;
padding:
20px;
}

.featured-
listings {

background-color:
#bbb;
padding:
20px;
}

.listing-card {

background-color:
#fff;
padding:
20px;
border:
1px solid #ddd;
border-
radius: 8px;
margin-
bottom: 20px;
}

.sell-section {

background-color:
#aaa;
padding:
20px;
}

.about-
section {

background-color:
#999;
padding:
20px;
}

.footer {

background-color:
#333;
color: #fff;
text-align:
center;
padding:
10px 0;
position:
absolute;
bottom: 0;
width:
100%;
}
</style>
</head>
<body>
<header>

<h1>Welcome to
OLX Clone</h1>
</header>
<nav>
<ul>
<li><a
href="#">Home<
/a></li>
<li><a
href="login.html"
>Login</a></li>
<li><a
href="signup.html
">Sign
Up</a></li>
</ul>
</nav>
<section
class="search-
section">
<form
id="searchForm"
>
<input
type="text"
id="searchInput"
placeholder="Sea
rch for items...">
<button
type="submit">S
earch</button>
</form>
</section>
<section
class="categories
-section">

<h2>Categories<
/h2>
<ul>
<li><a
href="#">Electro
nics</a></li>
<li><a
href="#">Vehicle
s</a></li>
<li><a
href="#">Real
Estate</a></li>
<!-- Add
more categories --
>
</ul>
</section>
<section
class="featured-
listings">

<h2>Featured
Listings</h2>
<div
class="listing-
card">
<img
src="item-
image.jpg"
alt="Item
Image">
<h3>Item
Title</h3>

<p>Description of
the item.</p>
<p>Price:
$100</p>
<button
class="view-
details">View
Details</button>
</div>
<!-- Add
more listing cards
-->
</section>
<section
class="sell-
section">
<h2>Sell
Your Items</h2>
<form
id="sellForm">
<label
for="itemName">
Item
Name:</label>
<input
type="text"
id="itemName"
name="itemName
" required>

<label
for="itemDescript
ion">Description:
</label>
<textarea
id="itemDescripti
on"
name="itemDescr
iption" rows="4"
required></textar
ea>

<label
for="itemPrice">P
rice:</label>
<input
type="number"
id="itemPrice"
name="itemPrice"
required>

<label
for="itemImage">
Upload
Image:</label>
<input
type="file"
id="itemImage"
name="itemImag
e"
accept="image/*"
required>

<button
type="submit">S
ubmit</button>
</form>
</section>
<section
class="about-
section">
<h2>About
OLX Clone</h2>
<p>This
website is a clone
of OLX, allowing
users to buy and
sell various items
online.</p>
</section>
<footer
class="footer">
<p>&copy;
2024 OLX Clone.
All rights
reserved.</p>
</footer>
<script
src="script.js"></
script>
</body>
</html>
Sign up page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}

section {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 50px;
}

form {
display: grid;
grid-gap: 10px;
}
label {
font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

button {
width: 100%;
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #555;
}

.error-message,
.success-message {
color: #f00;
}
</style>
</head>
<body>
<header>
<h1>Sign Up</h1>
</header>
<section>
<div style="text-align: center; margin-bottom: 20px;" id="successMessage"
class="success-message"></div>
<div style="text-align: center; margin-bottom: 20px;" id="errorMessage"
class="error-message"></div>
<form id="signupForm">
<label for="signupUsername">Username:</label>
<input type="text" id="signupUsername" name="username" required>

<label for="signupEmail">Email:</label>
<input type="email" id="signupEmail" name="email" required>

<label for="signupPhone">Phone Number:</label>


<input type="tel" id="signupPhone" name="phone" required>

<label for="signupPassword">Password:</label>
<input type="password" id="signupPassword" name="password" required>

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword" name="confirmPassword"
required>

<label for="signupDate">Date:</label>
<input type="date" id="signupDate" name="signupDate" required>

<button type="submit">Sign Up</button>


</form>
</section>
</body>
</html>
Login page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0; /* Set background color */
}

header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}

section {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 50px;
}

form {
display: grid;
grid-gap: 10px;
}

label {
font-weight: bold;
}

input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

button {
width: 100%;
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #555;
}

.error-message,
.success-message {
color: #f00;
}
</style>
</head>
<body>
<header>
<h1>Login</h1>
</header>
<section>
<div style="text-align: center; margin-bottom: 20px;" id="successMessage"
class="success-message"></div>
<div style="text-align: center; margin-bottom: 20px;" id="errorMessage"
class="error-message"></div>
<form id="loginForm">
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" name="username" required>

<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" name="password" required>

<button type="submit">Login</button>
</form>
</section>

<script src="./script.js"></script>
</body>
</html>

You might also like