Scribd
Upload
31 views5 pages

Ritik 4

The document describes an experiment to design a cart page that displays book details added to the cart. It includes the student's name, roll number, and objective to create a cart page that shows book title, author, price, quantity, and total for each added book. The code provided creates an HTML page with header, container, table, and checkout button to display sample book entries meeting the objective.

Uploaded by

Ritik Chauhan
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
31 views5 pages

Ritik 4

The document describes an experiment to design a cart page that displays book details added to the cart. It includes the student's name, roll number, and objective to create a cart page that shows book title, author, price, quantity, and total for each added book. The code provided creates an HTML page with header, container, table, and checkout button to display sample book entries meeting the objective.

Uploaded by

Ritik Chauhan
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/ 5

Experiment -04

Name: Rupak Kaushik


Roll No.: 2200271690043
Objective:
Design Cart Page with following option
a. CART PAGE: The cart page should contain the details of added books in cart

Code:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Cart</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f2f2f2;

margin: 0;

padding: 0;

header {

background-color: #333;

color: #fff;

text-align: center;

padding: 10px;

}
h1 {

margin: 0;

.container {

max-width: 800px;

margin: 20px auto;

padding: 20px;

background-color: #fff;

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

table {

width: 100%;

border-collapse: collapse;

th, td {

text-align: left;

padding: 10px;

border-bottom: 1px solid #ddd;

th {

background-color: #f2f2f2;

}
.checkout-button {

display: block;

width: 100%;

padding: 10px;

background-color: #333;

color: #fff;

text-align: center;

text-decoration: none;

font-weight: bold;

.checkout-button:hover {

background-color: #555;

</style>

</head>

<body>

<header>

<h1>Shopping Cart</h1>

</header>

<div class="container">

<table>

<tr>

<th>Title</th>

<th>Author</th>

<th>Price</th>

<th>Quantity</th>
<th>Total</th>

</tr>

<!-- Sample book entries -->

<tr>

<td>Book Title 1</td>

<td>Author 1</td>

<td>100 Rupee</td>

<td>2</td>

<td>200 rupee</td>

</tr>

<tr>

<td>Book Title 2</td>

<td>Author 2</td>

<td>200 Rupee</td>

<td>1</td>

<td>200 Rupee</td>

</tr>

<!-- Add more book entries dynamically if needed -->

</table>

<a href="#" class="checkout-button">Proceed to Checkout</a>

</div>

</body>

</html>
Experiment- 04 ( Output)

You might also like