Scribd Logo
Upload

Welcome to Scribd!

  • 04 LabExer2

    Uploaded by

    ace.subwatan18
    2 views8 pages
    Web System Technologies

    Original Title

    04_LabExer2 - Copy

    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
    Web System Technologies

    Copyright:

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

    04 LabExer2

    Uploaded by

    ace.subwatan18
    Web System Technologies

    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 8

    “04_LaboratoryExercise_2 - Web Systems and Technologies”

    Website Output:
    Responsive Output:
    Source Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04_Laboratory Exercise</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?
    family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?
    family=Marcellus&display=swap" rel="stylesheet">

    <style>
    .navbar{
    padding-left: 50%;
    }

    a{
    margin-right: 15px;
    font-family: "Marcellus", serif;
    color: white;
    text-decoration: none;
    }
    h1, h4, p{
    font-family: "Vollkorn", serif;
    color:white ;
    margin: 0%;
    padding-top: 0px;
    }

    .container{
    display: grid;
    padding-left: 5%;
    padding-right: 5%;
    grid-template-columns: repeat(3, auto)
    }
    .puzzle{
    width: 100%;
    height: 100%;
    padding: 0%;
    }
    .wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: auto;
    }
    .anitaPic{
    flex: 1;
    width: 500px;
    margin-left: 50px;
    margin-right: 50px;
    }
    .anitaPic img{
    width: 500px;
    height: auto;

    }
    .text{
    flex: 1;
    width: 50%;
    margin-left: 20px;
    margin-right: 20px;
    }
    @media (max-width: 768px) {
    .wrapper {
    flex-direction: column;
    }
    .anitaPic,
    .text {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    }
    }

    .vidContainer {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    }

    .vidContainer video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    </style>

    </head>

    <body style="background-color: black;">

    <header>
    <h1 >Leon Gallery</h1>
    <h4 >Fine Art & Antiques</h4>

    <nav class="navbar">
    <a href="">Home</a>
    <a href="">About Us</a>
    <a href="">Private Sales</a>
    <a href="">Auctions</a>
    <a href="">Blogs</a>
    <a href="">News</a>
    <a href="">Videos</a>
    <a href="">Contacts</a>
    </nav>
    </header>
    <hr>

    <div class="container">
    <div>
    <img class="puzzle" src="4.jpg">
    </div>
    <div>
    <img class="puzzle" src="3.jpg">
    </div>
    <div>
    <img class="puzzle" src="1.jpg">
    </div>
    <div>
    <img class="puzzle" src="6.jpg">
    </div>
    <div>
    <img class="puzzle" src="2.jpg">
    </div>
    <div>
    <img class="puzzle" src="5.jpg">
    </div>
    </div>

    <hr>
    <br>

    <div class="wrapper">

    <div class="anitaPic">
    <img src="anita.jpg">
    </div>

    <div class="text">
    <h2 class="anita" style="text-align: center; text-size-adjust:
    250px; color: white;"> Aninta Magsaysay-Ho</h2>
    <p>Anita Magsaysay-Ho was a Filipino painter best known for her
    Social Realist and post-Cubist portrayals of Filipino life and culture, notably
    and frequently portraying groups of women engaged in labor. Born on May 25, 1914
    in Manila, the Philippines, Magsaysay-Ho studied under Fernando Amorsolo at the
    University of the Philippines' School of Fine Arts before moving to the United
    States to study at the Cranbrook Academy in Michigan. Her work centered around
    the central tenets of Modernism, garnering her inclusion in the Filipino artist
    group the Thirteen Moderns—the only woman to do so. Magsaysay-Ho received
    significant critical acclaim and recognition for her work before her death on May
    5, 2012, including first prize at the Philippine Art Association in 1952. Her
    work can be found among the collections of institutions like the Metropolitan
    Museum of Manila, and the Ateneo Art Gallery in Manila, Philippines.</p>
    </div>
    </div>

    <br>
    <hr>
    <br>

    <div class="vidContainer">
    <video controls>
    <source src="Anita.mp4" type="video/mp4">
    </video>
    </div>
    </body>
    </html>

    You might also like