Scribd
Upload
3 views

FET 43

The document outlines the steps to design a webpage for an e-commerce application focused on electronics. It includes a sample HTML code that features a header, product listings, and a shopping cart. The program is confirmed to execute successfully with the expected output displayed in a web browser.

Uploaded by

sridhanishtha
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
3 views

FET 43

The document outlines the steps to design a webpage for an e-commerce application focused on electronics. It includes a sample HTML code that features a header, product listings, and a shopping cart. The program is confirmed to execute successfully with the expected output displayed in a web browser.

Uploaded by

sridhanishtha
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/ 6

EX.

NO : DESIGN A WEBPAGE ABOUT E-COMMERCE APPLICATION


DATE : FOR ELECTRONICS

AIM :
Design a webpage about E-commerce application for electronics .

DESCRIPTION:
1. Open a notepad in your pc .
2. Then open a new document to write a code .
3. Write a code for the meta tag in that document.
4. Save the file with extension (.html) .
5. Check your code by running it in your browser .

SCRIPT :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electronics E-Commerce</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.header {
background-color: #333;
color: white;
padding: 8px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
font-size: x-large;
}
.product {
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
margin: 10px;
padding: 20px;
width: 200px;
text-align: center;
font-size: x-large;
}
.product img {
width: 100%;
height: auto;
}
.product button {
background-color: #333;
color: white;
border: none;
padding: 10px;
margin-top: 10px;
cursor: pointer;
font-size: x-large;
}
.product button:hover {
background-color: #555;
}
.cart {
margin: 20px;
padding: 20px;
background-color: white;
border: 1px solid #1d0d0d;
border-radius: 5px;
font-size:x-large;
}
.cart h2 {
text-align: center;
}
.cart ul {
list-style-type: none;
padding: 0;
}
.cart ul li {
padding: 10px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>

<div class="header">
<h1>Electronics E-Commerce</h1>
</div>

<div class="container">
<div class="product">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQxwTKgp4RBIKMaJqekkSes75UdmS5vMAgAyg
&s" alt="Product 1" height="200px" width="133px">
<h3>Smartphone</h3>
<p>₹30,000</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://gizmodo.com/app/uploads/2024/10/surface-laptop-7th-edition-
sapphire-13-compare-render-copilot-copy.jpg" height="200px" width="240px">
<h3>Laptop</h3>
<p>₹60,000</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://m.media-amazon.com/images/I/61+R5rOj9+L.jpg" alt="Product 3"
height="200px" width="250px">
<h3>Headphones</h3>
<p>₹5,000</p>
<button>Add to Cart</button>
</div>
</div>

<div class="cart">
<h2>Shopping Cart</h2>
<ul>
<li>Smartphone - ₹30,000</li>
<li>Laptop - ₹60,000</li>
</ul>
<p style="text-decoration: underline overline;">Total: ₹90,000</p>
</div>

</body>
</html>

OUTPUT :
CLASS PERFORMANCE
RECORD
VIVA
TOTAL

RESULT:

Thus , The program executed successfully and the output is verified .

You might also like