Scribd Logo
Upload

Welcome to Scribd!

  • Web Lab Da

    Uploaded by

    ruthika.j2021
    6 views5 pages
    The document is an HTML advertisement for upcoming events. It includes headings announcing upcoming events and a photo gallery event. It also includes images, text describing the events, and contact information at the bottom. There are hyperlinks to register for events and a fashion show. It also includes code for an alert pop-up message box with JavaScript and CSS.

    Original Description:

    code

    Original Title

    WEB LAB DA

    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 is an HTML advertisement for upcoming events. It includes headings announcing upcoming events and a photo gallery event. It also includes images, text describing the events, and contact information at the bottom. There are hyperlinks to register for events and a fashion show. It also includes code for an alert pop-up message box with JavaScript and CSS.

    Copyright:

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

    Web Lab Da

    Uploaded by

    ruthika.j2021
    The document is an HTML advertisement for upcoming events. It includes headings announcing upcoming events and a photo gallery event. It also includes images, text describing the events, and contact information at the bottom. There are hyperlinks to register for events and a fashion show. It also includes code for an alert pop-up message box with JavaScript and CSS.

    Copyright:

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

    WEB LAB DA

    RUTHIKA.J
    21MIS0359

    ADVERTISEMENT (HTML) :
    <!DOCTYPE html>
    <html>
    <head>
    <title>
    Events
    </title>
    </head>

    <body bgcolor="black" style="color:white">


    <center>
    <h1>Upcoming Events 📅</h1>
    <p>
    Don't miss out any important events. Register them now!
    </p>
    </center>
    <hr>
    <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse
    culpa, saepe nostrum, ipsa ducimus veniam laudantium fugit qui eaque modi
    facere consectetur recusandae quis nulla possimus. Earum, aut repudiandae
    pariatur officia illo nemo nulla consequatur explicabo reiciendis sed dolore
    aperiam obcaecati, velit quis facilis sequi excepturi ad culpa nesciunt?
    Consequuntur, eum? Soluta dolorem dignissimos ea alias quo eius delectus
    debitis explicabo. Consectetur cupiditate ut nostrum ullam quibusdam nihil
    nobis est delectus, dolor provident natus magni dolorum eum tenetur sint
    minima rem quidem totam? Cupiditate necessitatibus, ad quo voluptatem ea dicta
    ipsa quidem maiores ex sed, esse odio sunt, distinctio delectus.
    </p>
    <center>
    <img src="nFHfkA.jpg" alt="nature image" width="500px">
    <h2>Photo Gallery Event</h2>
    <h2>Free entry | free food | pets are not allowed</h2>
    </center>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
    dolorum aperiam animi! Reprehenderit est molestiae ut nemo molestias minima
    consectetur ipsa! Quas natus quam atque laudantium doloribus commodi facere
    voluptatibus odio provident similique modi maxime illo molestiae aliquid,
    alias molestias! Culpa a tempore, ex totam quae nostrum ipsum! Excepturi,
    impedit!</p>
    <center>
    <img src="nFHfkA.jpg" alt="nature image" width="500px">
    <h1>
    <a href="https://www.myntra.com/">Fashion show</a>
    </h1>
    <h2>Free entry | free food | pets are not allowed</h2>
    </center>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
    dolorum aperiam animi! Reprehenderit est molestiae ut nemo molestias minima
    consectetur ipsa! Quas natus quam atque laudantium doloribus commodi facere
    voluptatibus odio provident similique modi maxime illo molestiae aliquid,
    alias molestias! Culpa a tempore, ex totam quae nostrum ipsum! Excepturi,
    impedit!</p>
    <hr>
    <center>
    <h1>Contact</h1>
    <h2>+91 9360529032 | eventcollab@gmail.com</h2>
    <h3>9th ABC street,chennai,tn 632602</h3>
    </center>
    </body>
    </html>

    OUTPUT :
    FASHION SHOW LINK :
    ALERT MESSAGE (CSS AND JAVA SCRIPT) :
    <style>
    .overlay{
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.8;
    z-index: 1;
    }

    .popupbox{
    background-color: lightblue;
    width: 40%;
    position: absolute;
    color: black;
    padding: 20px;
    border-radius: 10px;
    left: 30%;
    z-index: 3;
    }
    </style>

    <button onclick="change()">show</button>
    <div class="overlay"></div>
    <div class="popupbox">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum,
    voluptatibus magnam! Nostrum praesentium, quia quos vitae illum laudantium
    blanditiis. Perspiciatis minima est repudiandae alias sit animi quae non magni
    quis.</p>
    <button onclick="deletepopup()">close</button>
    </div>

    <script>
    var pen=document.querySelector(".popupbox")
    var pen1=document.querySelector(".overlay")

    function change()
    {
    pen.style.display="block"
    pen1.style.display="block"

    function deletepopup()
    {
    pen.style.display="none"
    pen1.style.display="none"
    }
    </script>

    OUTPUT :

    You might also like