Scribd Logo
Upload

Welcome to Scribd!

  • Anshul 4

    Uploaded by

    Ritik Chauhan
    6 views5 pages
    The document describes an experiment to design a cart page that displays book details added to the cart. It includes HTML and CSS code to create the basic structure and styling of the cart page, with a table to list books currently in the cart including title, author, price, quantity and total for each item. It also includes a "Proceed to Checkout" button to allow completing the purchase.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes an experiment to design a cart page that displays book details added to the cart. It includes HTML and CSS code to create the basic structure and styling of the cart page, with a table to list books currently in the cart including title, author, price, quantity and total for each item. It also includes a "Proceed to Checkout" button to allow completing the purchase.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views5 pages

    Anshul 4

    Uploaded by

    Ritik Chauhan
    The document describes an experiment to design a cart page that displays book details added to the cart. It includes HTML and CSS code to create the basic structure and styling of the cart page, with a table to list books currently in the cart including title, author, price, quantity and total for each item. It also includes a "Proceed to Checkout" button to allow completing the purchase.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Experiment -04

    Name: Anshul Raj

    Roll No.: 2200270100037

    Objec ve:
    Design Cart Page with following op on
    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, ini al-scale=1.0">

    < tle>Cart</ tle>

    <style>

    body {

    font-family: Arial, sans-serif;

    background-color: #f2f2f2;

    margin: 0;

    padding: 0;

    header {

    background-color: #333;

    color: # f;

    text-align: center;

    padding: 10px;

    }
    ti
    ti
    ff
    ti
    ti
    ti
    h1 {

    margin: 0;

    .container {

    max-width: 800px;

    margin: 20px auto;

    padding: 20px;

    background-color: # f;

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

    table {

    width: 100%;

    border-collapse: collapse;

    th, td {

    text-align: le ;

    padding: 10px;

    border-bo om: 1px solid #ddd;

    th {

    background-color: #f2f2f2;

    .checkout-bu on {
    tt
    tt
    ft
    ff
    display: block;

    width: 100%;

    padding: 10px;

    background-color: #333;

    color: # f;

    text-align: center;

    text-decora on: none;

    font-weight: bold;

    .checkout-bu on: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>Quan ty</th>

    <th>Total</th>

    </tr>
    ff
    tt
    ti
    ti
    <!-- 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-bu on">Proceed to Checkout</a>

    </div>

    </body>

    </html>

    Experiment- 04 ( Output)
    tt

    You might also like