Scribd
Upload
17 views

Web Design Assignment 2

Uploaded by

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

Web Design Assignment 2

Uploaded by

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

WEB DESIGN

ASSIGNMENT – 2 - UNIT-2
Design a simple UI for an online shopping page with structure pages
using semantic tags
SIMPLE UI.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Online Shopping</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header for site navigation and logo -->
<header>
<div class="logo">
<h1>VADIVELAN</h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Cart</a></li>
</ul>
</nav>
</header>
<!-- Main content section -->
<main>
<!-- Featured products section -->
<section class="featured-products">
<h2>Featured Products</h2>
<article class="product">
<img src="Realme_7_Pro.jpg" alt="Product 1">
<h3>Realme 7 Pro</h3>
<p>₹21,999.00</p>
<button>Add to Cart</button>
</article>
<article class="product">
<img src="Realme_5_Pro.jpg" alt="Product 2">
<h3>Realme 5 Pro</h3>
<p>₹17,999.0</p>
<button>Add to Cart</button>
</article>
<!-- Add more products here -->
</section>

<!-- Product categories section -->


<section class="product-categories">
<h2>Categories</h2>
<article class="category">
<h3>Electronics</h3>
<p>Find the latest gadgets</p>
</article>
<article class="category">
<h3>Clothing</h3>
<p>Explore new fashion trends</p>
</article>
<!-- Add more categories here -->
</section>
</main>

<!-- Footer with additional links -->


<footer>
<section>
<h4>Customer Service</h4>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Order Tracking</a></li>
</ul>
</section>
<section>
<h4>About Us</h4>
<p>Your one-stop shop for the best products.</p>
</section>
</footer>
</body>
</html>
STYLES.CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #ff0000;
color: white;
padding: 10px 0;
text-align: center;
}

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

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}

.featured-products, .product-categories {
margin-bottom: 40px;
}

.product, .category {
border: 1px solid #ddd;
padding: 15px;
margin: 10px;
text-align: center;
background-color: white;
border-radius: 5px;
}

.product img {
max-width: 100px;
display: block;
margin: 0 auto 10px;
}

footer {
background-color: #ff0000;
color: white;
text-align: center;
padding: 20px;
}

footer section {
margin-bottom: 20px;
}

footer ul {
list-style: none;
padding: 0;
}

footer ul li {
margin: 5px 0;
}

footer ul li a {
color: white;
text-decoration: none;
}
OUTPUT:

You might also like