Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    task5 20BCI0121

    Uploaded by

    sahaj jain

    Copyright:

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

    You might also like

    task5 20BCI0121

    Uploaded by

    sahaj jain
    3 views6 pages

    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
    3 views6 pages

    task5 20BCI0121

    Uploaded by

    sahaj jain

    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 6

    CSE3002 Internet and Web Programming

    (Lab) Summer 2023-24 (L21+L22+L51+L52)


    Exersice 5: Webpage Creation
    Name: Sahaj Jain
    Reg No: 20BCI0121

    Code:

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="page">

    <div class="nav">

    <ul class="nav-items">
    <li>Home</li>
    <li>About</li>
    <li>Home</li>
    <li>Portfolio</li>
    <li>Contact</li>
    </ul>

    </div>

    <div class="starter">

    <div class="content">
    <h2>Welcome to my e-Portfolio</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam sapiente
    perspiciatis corrupti earum numquam. Reiciendis blanditiis voluptas nisi est mollitia quis aut,
    ipsam consectetur quidem ipsa, dolor repellat inventore, voluptatum ex labore placeat cupiditate
    commodi et corrupti! Consectetur magnam corporis totam minus reprehenderit accusamus officia
    quis magni distinctio, autem non!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis sapiente dolorum
    voluptatibus minima velit, ex alias? Minus voluptates libero, molestias numquam nostrum impedit
    itaque. Neque quasi, odit officia inventore nihil corrupti eos sequi quo at? Perspiciatis molestias
    beatae aliquam accusamus vitae? Ratione ex molestias odio minus voluptatum quod pariatur,
    temporibus reprehenderit illo praesentium ut excepturi corrupti quidem expedita magnam
    reiciendis!</p>
    </div>

    <div class="image">
    <img src="earth.png" alt="">
    </div>

    </div>

    <div class="cards">
    <div class="card">
    <h2>See my Portfolio</h2>
    <img src="port.png" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat necessitatibus
    consectetur non harum dolor corrupti incidunt provident, unde earum explicabo accusantium
    quisquam, similique perferendis asperiores qui, distinctio cupiditate magni iusto.</p>
    <a href="#">More</a>
    </div>
    <div class="card">
    <h2>Checkout my Classwork</h2>
    <img src="classwork.png" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat necessitatibus
    consectetur non harum dolor corrupti incidunt provident, unde earum explicabo accusantium
    quisquam, similique perferendis asperiores qui, distinctio cupiditate magni iusto.</p>
    <a href="#">More</a>
    </div>
    <div class="card">
    <h2>Read more about me</h2>
    <img src="me.png" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat necessitatibus
    consectetur non harum dolor corrupti incidunt provident, unde earum explicabo accusantium
    quisquam, similique perferendis asperiores qui, distinctio cupiditate magni iusto.</p>
    <a href="#">More</a>
    </div>
    </div>

    <div class="line">
    </div>

    <div class="container">

    <div class="box1">

    <h2>Why i Love Web Design</h2>


    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus eius quod officiis
    suscipit, sequi numquam repellat, temporibus dolores, vitae doloremque blanditiis odio atque.
    Voluptate amet velit obcaecati dicta laborum cumque atque suscipit excepturi earum? Tenetur
    atque quis incidunt nobis dignissimos facere nam laudantium quisquam repellendus dolores?
    Nemo sapiente obcaecati provident numquam culpa. Fugit amet sed tempora eos asperiores
    numquam saepe, minus aliquam recusandae hic aspernatur nesciunt quam, aliquid cupiditate
    ipsam enim dignissimos. Obcaecati aperiam quae fuga eveniet, suscipit iure perspiciatis, qui
    quasi magnam ducimus distinctio est officia doloremque nihil sunt veritatis debitis amet dicta
    nobis quam, nulla necessitatibus! Officiis, et? Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Minus eius quod officiis suscipit, sequi numquam repellat, temporibus dolores, vitae
    doloremque blanditiis odio atque. Voluptate amet velit obcaecati dicta laborum cumque atque
    suscipit excepturi earum? Tenetur atque quis incidunt nobis dignissimos facere nam laudantium
    quisquam repellendus dolores? Nemo sapiente obcaecati provident numquam culpa. Fugit amet
    sed tempora eos asperiores numquam saepe, minus aliquam recusandae hic aspernatur nesciunt
    quam, aliquid cupiditate ipsam enim dignissimos. Obcaecati aperiam quae fuga eveniet, suscipit
    iure perspiciatis, qui quasi magnam ducimus distinctio est officia doloremque nihil sunt veritatis
    debitis amet dicta nobis quam, nulla necessitatibus! Officiis, et? ipsam enim dignissimos.
    Obcaecati aperiam quae fuga eveniet, suscipit iure perspiciatis, qui quasi magnam ducimus
    distinctio est officia doloremque nihil sunt veritatis debitis amet dicta nobis quam, nulla
    necessitatibus! Officiis, et?</p>

    </div>

    <div class="box2">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos numquam cum,
    exercitationem saepe</p>
    <div class="line"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos numquam cum,
    exercitationem saepe</p>
    <div class="line"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos numquam cum,
    exercitationem saepe</p>
    </div>

    </div>

    <div class="footer">
    <span>Site Designed by Sahaj Jain(20BCI0121)</span>
    <span>Summer sem 2024</span>
    <span>VIT University</span>
    </div>

    </div>
    </body>
    </html>

    style.css

    *{
    margin:0;
    padding:0;
    box-sizing: border-box;
    }

    body{
    background-color: rgb(250, 234, 88)
    }

    .nav{
    width: 100%;
    height: 100px;
    background-color: green;

    .nav-items{
    display: flex;
    justify-content: flex-end;
    }

    .nav-items li{
    text-decoration: none;
    list-style-type: none;
    margin: 10px;
    padding: 2px;
    border: 2px solid black;
    }

    .starter{
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
    }

    .content{
    width: 70%;
    }

    .content h2{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    color: green;
    text-decoration: underline;
    }

    .content p{
    margin: 4px;
    }

    .cards{
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
    }

    .card{

    width: 20%;
    display: flex;
    flex-direction: column;
    border: 2px solid black;
    padding: 10px;
    border-radius: 5%;
    background-color: antiquewhite;
    }
    .card img{
    width: 90%;
    height: 140px;
    margin: auto;
    }
    .card p{
    width: 100%;
    margin-top: 10px;
    margin-bottom: 6px;
    }

    .line{
    margin: auto;
    width: 95%;
    height: 5px;
    background-color: gray;
    border-radius: 30px;
    margin-top: 10px;
    }

    .container{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
    }

    .box1{
    padding: 10px;
    width: 60%;
    display: flex;
    flex-direction: column;
    background-color: antiquewhite;
    border-radius: 2px;
    }

    .box2{
    padding: 50px;
    width: 25%;
    display: flex;
    flex-direction: column;
    background-color: antiquewhite;
    border: 2px solid green;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 2px;
    align-items: center;
    }

    .footer{
    width: 95%;
    margin: auto;
    margin-top: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background-color: green;
    color: antiquewhite;
    }

    Output Screenshot:

    You might also like