Scribd
Upload
5 views9 pages

6 TH

The document outlines the creation of a shopping webpage using HTML and CSS. It includes the structure of the webpage, such as the header, navigation, product sections, and footer, along with the corresponding CSS styles for layout and design. The result indicates that the webpage was successfully created and verified.

Uploaded by

manojkumar.2201128
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
5 views9 pages

6 TH

The document outlines the creation of a shopping webpage using HTML and CSS. It includes the structure of the webpage, such as the header, navigation, product sections, and footer, along with the corresponding CSS styles for layout and design. The result indicates that the webpage was successfully created and verified.

Uploaded by

manojkumar.2201128
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/ 9

EX.

NO: 6
SHOPPING WEB PAGE USING CSS

DATE:10.09.24

AIM:
To create the webpage for shopping using CSS.

SHOPING WEB PAGE:

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- Header -->


<header>
<h1>Shop With Us</h1>
</header>

<!-- Navigation -->


<nav>
<a href="#home">Home</a>
<a href="#shop">Shop</a>
<a href="#featured">Featured</a>
<a href="#contact">Contact</a>
</nav>

<!-- Hero Section -->


<section class="hero">
<div>Welcome to the Best Shopping Experience</div>
</section>

<!-- Product Section -->


<div class="content" id="shop">
HARIHARAN A 71812201054
<h2>Our Products</h2>
<div class="product-grid">
<!-- Product Card 1 -->
<div class="product-card">
<img src="c:/Users/USER/Desktop/OIP.jpeg" alt="Product 1" class="product-image">
<div class="product-title">Stylish Sneakers</div>
<div class="product-price">$59.99</div>
<button>Add to Cart</button>
</div>

<!-- Product Card 2 -->


<div class="product-card">
<img src="c:/Users/USER/Desktop/download.jpeg" alt="Product 2" class="product-
image">
<div class="product-title">Modern Headphones</div>
<div class="product-price">$89.99</div>
<button>Add to Cart</button>
</div>

<!-- Product Card 3 -->


<div class="product-card">
<img src="c:/Users/USER/Desktop/OIP (1).jpeg" alt="Product 3" class="product-
image">
<div class="product-title">Smart Watch</div>
<div class="product-price">$129.99</div>
<button>Add to Cart</button>
</div>
</div>
</div>

<!-- Featured Products Section -->


<section class="featured-section" id="featured">
<h2>Featured Products</h2>
<div class="featured-products">
<div class="product-card">
<img src="https://via.placeholder.com/300" alt="Product 4" class="product-image">
<div class="product-title">Exclusive Laptop</div>
<div class="product-price">$999.99</div>
<button>Add to Cart</button>
</div>

<div class="product-card">
<img src="https://via.placeholder.com/300" alt="Product 5" class="product-image">

HARIHARAN A 71812201054
<div class="product-title">Luxury Bag</div>
<div class="product-price">$299.99</div>
<button>Add to Cart</button>
</div>
</div>
</section>

<!-- Footer -->


<footer class="footer">
<p>© 2024 Shop With Us. All rights reserved.</p>
</footer>

</body>
</html>

CSS CODE:

@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

body {

margin: 0;

padding: 0;

font-family: 'Poppins', sans-serif;

background-color: #f5f7fa;

color: #333;

header {

background-color: #282c34;

padding: 20px;

color: white;

HARIHARAN A 71812201054
text-align: center;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

header h1 {

margin: 0;

font-size: 2.5em;

letter-spacing: 2px;

nav {

display: flex;

justify-content: center;

gap: 30px;

background-color: #333;

padding: 15px;

position: sticky;

top: 0;

z-index: 10;

nav a {

color: white;

text-decoration: none;

font-size: 1.2em;

HARIHARAN A 71812201054
transition: color 0.3s;

nav a:hover {

color: #ffcb05;

.hero {

background-image: url('OIP (2).jpeg');

background-size: cover;

background-position: center;

height: 400px;

display: flex;

justify-content: center;

align-items: center;

color: white;

text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

font-size: 2.5em;

.content {

padding: 40px;

max-width: 1200px;

margin: auto;

HARIHARAN A 71812201054
.product-grid {

display: flex;

flex-wrap: wrap;

gap: 30px;

.product-card {

background-color: white;

border-radius: 10px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

padding: 20px;

width: calc(33% - 20px);

transition: transform 0.3s, box-shadow 0.3s;

position: relative;

.product-card:hover {

transform: translateY(-10px);

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

.product-image {

width: 100%;

border-radius: 10px;

HARIHARAN A 71812201054
margin-bottom: 20px;

.product-title {

font-size: 1.5em;

margin-bottom: 10px;

font-weight: 600;

color: #333;

.product-price {

font-size: 1.2em;

color: #ff5722;

margin-bottom: 15px;

.product-card button {

background-color: #ffcb05;

border: none;

padding: 10px 20px;

cursor: pointer;

font-size: 1em;

border-radius: 5px;

transition: background-color 0.3s;

position: absolute;

HARIHARAN A 71812201054
bottom: 20px;

.product-card button:hover {

background-color: #ffb800;

.featured-section {

background-color: #282c34;

padding: 60px 20px;

color: white;

text-align: center;

.featured-section h2 {

font-size: 2.5em;

margin-bottom: 40px;

.featured-products {

display: flex;

justify-content: space-around;

gap: 30px;

HARIHARAN A 71812201054
.footer {

background-color: #333;

color: white;

text-align: center;

padding: 20px;

.footer p {

margin: 0;

font-size: 1.2em;

OUTPUT:

RESULT:
Thus the shopping web page is created and verified successfully.

HARIHARAN A 71812201054

You might also like