Scribd
Upload
26 views

!DOCTYPE HTML

f4

Uploaded by

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

!DOCTYPE HTML

f4

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products</title>
<link rel="stylesheet" href="styles.css">
<style>
.products {
text-align: center; /* Center the content inside the products div */
}

.product {
margin-bottom: 20px; /* Add some space between each product */
}

.product img {
display: block;
margin: 0 auto; /* Center the product images */
}

.product p {
margin-bottom: 10px; /* Add space below the description */
}

.buy-button {
display: block;
margin: 0 auto; /* Center the buy button */
background-color: green; /* Set the background color to green */
color: white; /* Set text color to white */
border: none; /* Remove default button border */
padding: 10px 20px; /* Add padding */
font-size: 16px; /* Adjust font size */
cursor: pointer; /* Change cursor to pointer on hover */
transition: background-color 0.3s; /* Add smooth transition */
}

.buy-button:hover {
background-color: darkgreen; /* Darken the background color on hover */
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="C:\Users\rit\Downloads\home.html">Home</a></li>
<li><a href="C:\Users\rit\Downloads\products.html">Products</a></li>
<li><a href="C:\Users\rit\Downloads\about.html">About</a></li>
</ul>
</nav>
</header>
<div class="products">
<h2>Our Products</h2> <!-- Centered heading -->
<!-- Add your products here -->
<div class="product">
<img src="chocolate.jpg" alt="Product 1">
<h3>Chocolate</h3>
<p>this is very sweet</p>
<button class="buy-button" onclick="buy()">BUY</button>
</div>
<div class="product">
<img src="biscuit.jpg" alt="Product 2">
<h3>Biscuit</h3>
<p>this is very sweet</p>
<button class="buy-button" onclick="buy()">BUY</button>
</div>
<!-- Add more products as needed -->
</div>
<footer>
<p>&copy; 2024 Departmental Store</p>
</footer>

<script>
function buy() {
alert("Product added to cart!"); // For demonstration, you can replace this
with actual cart functionality
}
</script>
</body>
</html>
home:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Departmental Store</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="C:\Users\rit\Downloads\home.html">Home</a></li>
<li><a href="C:\Users\rit\Downloads\products.html">Products</a></li>
<li><a href="C:\Users\rit\Downloads\about.html">About</a></li>
</ul>
</nav>
</header>
<div class="hero">
<h1>Welcome to Our Departmental Store</h1>
<p>Explore our wide range of products and find what you need.</p>
</div>
<footer>
<p>&copy; 2024 Departmental Store</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="C:\Users\rit\Downloads\home.html">Home</a></li>
<li><a href="C:\Users\rit\Downloads\products.html">Products</a></li>
<li><a href="C:\Users\rit\Downloads\about.html">About</a></li>
</ul>
</nav>
</header>
<div class="about">
<h2>About Us</h2>
<p>Welcome to our departmental store. We have been serving our customers for
many years, offering a wide range of products at affordable prices. Our mission is
to provide high-quality products and exceptional customer service.
In addition to retail products, department stores may offer additional
services such as alterations, gift wrapping, personal shopping assistance, and in-
store pickup for online orders.</p>
</div>
<footer>
<p>&copy; 2024 Departmental Store</p>
</footer>
</body>
</html>

css:
/* Global Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
padding: 10px 0;
}

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

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

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

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

/* Page-specific Styles */
.hero {
background-color: #f4f4f4;
text-align: center;
padding: 100px 0;
}

.about {
padding: 20px;
}

You might also like