Scribd Logo
Upload

Welcome to Scribd!

  • Simple Web Pages Using Standard HTML Tags Like Head, Title, Body

    Uploaded by

    raagavird7
    12 views6 pages
    This document demonstrates how to create a simple webpage using HTML tags like HEAD, TITLE, and BODY. It includes two product cards for chocolate and vanilla cake with images, names, prices, and add to cart buttons. Styling is applied using CSS for layout, colors, borders, and positioning of elements.

    Original Description:

    Original Title

    Simple Web Pages Using Standard HTML Tags Like Head,Title,Body

    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
    This document demonstrates how to create a simple webpage using HTML tags like HEAD, TITLE, and BODY. It includes two product cards for chocolate and vanilla cake with images, names, prices, and add to cart buttons. Styling is applied using CSS for layout, colors, borders, and positioning of elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    12 views6 pages

    Simple Web Pages Using Standard HTML Tags Like Head, Title, Body

    Uploaded by

    raagavird7
    This document demonstrates how to create a simple webpage using HTML tags like HEAD, TITLE, and BODY. It includes two product cards for chocolate and vanilla cake with images, names, prices, and add to cart buttons. Styling is applied using CSS for layout, colors, borders, and positioning of elements.

    Copyright:

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

    Simple Web Pages using standard HTML tags like,

    HEAD, TITLE, BODY.


    <html>
    <head>
    <title>Simple Webpage</title>
    </head>
    <body>

    <div class="card product-card" id="product-card">


    <br>
    <div class="card" id="header">
    <h1>Cake Images</h1>
    </div>
    <br>

    <div class="card chocolate-card">


    <img class="choco-img"
    src="https://mrbrownbakery.com/image/images/GJ7uCwGiteTF24HTWB
    clkziVTdhpQeZWH23MvQfq.jpeg?p=full">
    <br>

    <h3>Chocolate Cake</h3>
    <h4>From ₹350</h4>
    <button class="chocobtn" id="chocobtn">Add to cart</button>
    </div>
    <div class="card vanilla-card">
    <img class="vanilla-img" src="https://cdn-
    media.indiacakes.com/media/catalog/product/cache/0b945dd31857d9e2e2
    ef055978ab9981/l/o/lovely-red-roses-around-chocolate-cake-half-kg-
    625.jpg">
    <br>
    <h3>Vanilla Cake</h3>
    <h4>From ₹250</h4>
    <button class="vanillabtn" id="vanillabtn">Add to cart</button>
    </div>
    </div>

    <style>
    .product-card
    {
    border: 1px solid aqua;
    background: linear-gradient(181.2deg, rgb(181, 239, 249) 10.5%,
    rgb(254, 254, 254)86.8%);
    border-radius: 8px;
    padding: 20px;
    margin: 20px;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    width: 700px;
    height: 540px;
    justify-content: center;
    margin-left: -400px;
    }

    .card
    {
    border: 1px solid #52D3D8;
    border-radius: 8px;
    padding: 10px;
    margin: 10px;
    text-align: center;
    justify-content: center;
    margin-left: 370px;
    }

    .chocolate-card
    {
    background-color: rgb(6, 200, 244);
    width: 250px;
    color: white;
    margin-left: 50px;
    text-align: center;
    }

    .choco-img
    {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    border: 2px solid white;
    }

    .chocobtn
    {
    width: 120px;
    height: 35px;
    text-align: center;
    justify-content: center;
    color: white;
    background-color: rgb(6, 104, 140);
    border-radius: 15px;
    border: 2px solid white;
    }

    .vanilla-card
    {
    background-color: rgb(6, 200, 244);
    width: 250px;
    color: white;
    margin-left: 370px;
    margin-top: -370px;
    text-align: center;
    }
    .vanilla-img
    {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    border: 2px solid white;
    }

    .vanillabtn
    {
    width: 120px;
    height: 35px;
    text-align: center;
    justify-content: center;
    color: white;
    background-color: rgb(6, 104, 140);
    border-radius: 15px;
    border: 2px solid white;
    }

    #header
    {
    border: 1px solid #52D3D8;
    border-radius: 8px;
    padding: 10px;
    margin: 10px;
    text-align: center;
    justify-content: center;
    margin-left: -1px;
    background: #79E0EE;
    }
    </style>

    </body>
    </html>

    You might also like