Scribd Logo
Upload

Welcome to Scribd!

  • Prac3 FSWD 22bce157

    Uploaded by

    Krupa Vyas
    4 views5 pages

    Original Title

    prac3_fswd_22bce157

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    4 views5 pages

    Prac3 FSWD 22bce157

    Uploaded by

    Krupa Vyas

    Copyright:

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

    Date: 24/1/24

    ROLL NO: 22BCE157


    PRACTICAL -3: FSWD
    AIM: RESPONSIVE WEB PAGE
    CODE:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Page Example</title>
    <style>
    body {
    font-family: 'Arial';

    header {
    background-color: #ab36b1;
    color: #fff;
    text-align: center;
    padding: 1em;
    }

    section {
    padding: 2em;
    display: flex;
    }

    .column {
    flex: 1;
    margin-bottom: 2em;
    }

    img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display:block;
    border-radius:25px;

    h1 {
    font-size: 4vw;
    text-align: center;
    }

    h2 {
    font-size: 3vw;
    }

    p {
    font-size: 2vw;
    line-height: 1.5;
    }

    @media screen and (max-width: 800px) {


    h1 {
    font-size: 6vw;
    }

    p, h2 {
    font-size: 3vw;
    }

    section {
    flex-direction: column;
    }

    .column {
    flex: 1;
    }
    }

    @media screen and (min-width: 1200px) {


    h1 {
    font-size: 3vw;
    }

    p, h2 {
    font-size: 1.5vw;
    }
    }
    @media print{
    h1 {
    font-size: 6vw;
    }

    p, h2 {
    font-size: 3vw;
    }
    section {
    flex-direction: row;
    }

    .column {
    flex: 1;
    }
    }
    </style>
    </head>
    <body>
    <header>
    <h1>Responsive Web Page Example</h1>
    </header>

    <section>
    <div class="column">
    <!-- <img src="jellyfish.jpg" alt="Responsive Image"> -->
    <picture>
    <source srcset="jellfish2.jpg" media="(max-width:300px)">
    <source srcset="jellyfish.jpg" media="(min-width:1200px)">
    <img src="jellyfish2.jpg" alt="jellyfish" style="width:auto">
    </picture>
    </div>
    <div class="column">
    <h2>About Jellyfish</h2>
    <p>
    Jellyfish are fascinating creatures that inhabit all the
    world's oceans. They are found from the surface to the deep sea and come in a
    variety of shapes and sizes. Jellyfish have been around for millions of years
    and play a crucial role in marine ecosystems.
    </p>
    </div>
    <div class="column">
    <h2>Jellyfish Species</h2>
    <p>
    There are thousands of species of jellyfish, each with unique
    characteristics. Some are bioluminescent, while others have vibrant colors.
    Despite their delicate appearance, jellyfish are efficient predators, using
    their tentacles to capture prey.
    </p>
    </div>
    </section>
    </body>
    </html>
    WEB PAGE: in laptop screen

    WEB PAGE : mobile screen

    PRINT SCREEN LAYOUT:

    You might also like