Scribd Logo
Upload

Welcome to Scribd!

  • 31 views

    Jean Pauline S. Mabini Bsis 1A: Activity #2, #3, #4

    Uploaded by

    Jean Pauline Mabini
    The document contains code for 4 activities. Activity #2 creates a page with 5 sections of different colors and text labels. Activity #3 creates a page for an online learning website with images and text. Activity #4 creates a simple page with green background and text promoting a tutorials website, including social media links at the bottom.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Jean Pauline S. Mabini Bsis 1A: Activity #2, #3, #4

    Uploaded by

    Jean Pauline Mabini
    31 views11 pages
    The document contains code for 4 activities. Activity #2 creates a page with 5 sections of different colors and text labels. Activity #3 creates a page for an online learning website with images and text. Activity #4 creates a simple page with green background and text promoting a tutorials website, including social media links at the bottom.

    Original Title

    PROGRAMMING

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document contains code for 4 activities. Activity #2 creates a page with 5 sections of different colors and text labels. Activity #3 creates a page for an online learning website with images and text. Activity #4 creates a simple page with green background and text promoting a tutorials website, including social media links at the bottom.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    31 views11 pages

    Jean Pauline S. Mabini Bsis 1A: Activity #2, #3, #4

    Uploaded by

    Jean Pauline Mabini
    The document contains code for 4 activities. Activity #2 creates a page with 5 sections of different colors and text labels. Activity #3 creates a page for an online learning website with images and text. Activity #4 creates a simple page with green background and text promoting a tutorials website, including social media links at the bottom.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 11

    Jean Pauline S.

    Mabini BSIS 1A

    Activity #2, #3, #4

    #2
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.
    0">
    <title>Document</title>

    <style>
    body{
    background-color: lightgray;
    }
    .first{
    top: 1%;
    position: absolute;
    background-color: green;
    width: 99%;
    height: 90px;
    }
    .rec1{
    position: absolute;
    top: -26%;
    left: 1%;
    font-family: 'Arial Unicode MS';
    color: white;
    font-size: 50px;
    }
    .rec2{
    position: absolute;
    top: -26%;
    left: 17%;
    font-family: 'Arial Unicode MS';
    font-size: 50px;
    color: rgb(165, 247, 165);
    }
    .second{
    position: absolute;
    background-color:rgb(144, 194, 45);
    top: 21%;
    width: 99%;
    height: 90px;
    }
    .pr1{
    position: absolute;
    top: -26%;
    left: 1%;
    font-family: 'Arial Unicode MS';
    color: white;
    font-size: 50px;
    }
    .pr2{
    position: absolute;
    top: -26%;
    left: 17%;
    font-family: 'Arial Unicode MS';
    font-size: 50px;
    color: rgb(200, 243, 151);
    }
    .third{
    position: absolute;
    background-color:rgb(216, 216, 3);
    top: 42%;
    width: 99%;
    height: 90px;
    }
    .cr1{
    position: absolute;
    top: -26%;
    left: 1%;
    font-family: 'Arial Unicode MS';
    color: white;
    font-size: 50px;
    }
    .cr2{
    position: absolute;
    top: -26%;
    left: 17%;
    font-family: 'Arial Unicode MS';
    font-size: 50px;
    color: rgb(223, 221, 139);
    }
    .fourth{
    position: absolute;
    background-color:orangered;
    top: 63%;
    width: 99%;
    height: 90px;
    }
    .wd1{
    position: absolute;
    top: -26%;
    left: 1%;
    font-family: 'Arial Unicode MS';
    color: white;
    font-size: 50px;
    }
    .wd2{
    position: absolute;
    top: -26%;
    left: 17%;
    font-family: 'Arial Unicode MS';
    font-size: 50px;
    color:rgb(218, 168, 77);
    }
    .fifth{
    position: absolute;
    background-color:red;
    top: 84%;
    width: 99%;
    height: 90px;
    }
    .fpwd1{
    position: absolute;
    top: -26%;
    left: 1%;
    font-family: 'Arial Unicode MS';
    color: white;
    font-size: 50px;
    }
    .fpwd2{
    position: absolute;
    top: -26%;
    left: 17%;
    font-family: 'Arial Unicode MS';
    font-size: 50px;
    color:rgb(240, 183, 183);
    }
    </style>
    </head>
    <body>
    <div class="first">
    <h1 class="rec1">REC</h1>
    <h1 class="rec2">RECOMMENDATION</h1>
    </div>
    <div class="second">
    <h1 class="pr1">PR</h1>
    <h1 class="pr2">PROPOSED RECOMMENDATION</h1>
    </div>
    <div class="third">
    <h1 class="cr1">CR</h1>
    <h1 class="cr2">CANDIDATE RECOMMENDATION</h1>
    </div>
    <div class="fourth">
    <h1 class="wd1">WD</h1>
    <h1 class="wd2">WORKING DRAFT</h1>
    </div>
    <div class="fifth">
    <h1 class="fpwd1">FPWD</h1>
    <h1 class="fpwd2">FIRST PUBLIC WORKING DRAFT</h1>
    </div>
    </body>
    </html>
    #3
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.
    0">
    <title>Document</title>

    <style>
    body{
    background-color: rgb(217, 226, 243);
    }
    .rocket{
    top: 5%;
    position: absolute;
    width: 99%;
    height: 90px;
    }
    .in{
    position: absolute;
    top: -26%;
    left: 25%;
    font-family: 'Arial light';
    font-size: 100px;
    }
    .dot{
    position: absolute;
    top: 30%;
    left: 56%;
    font-family: 'Arial';
    color: rgba(141, 139, 139, 0.973);
    font-size: 70px;
    }
    .learn{
    position: absolute;
    font-size: 28.5px;
    font-family: 'Yu Gothic UI';
    top: 129%;
    left: 25%;
    }
    .time{
    position: absolute;
    top: 50%;
    }
    .logo1{
    position: relative;
    width: 35%;
    height: 35%;
    left: 35%;
    }
    .respect{
    position: absolute;
    top: 90%;
    left: 37%;
    font-family: 'Calibri';
    color: rgb(81, 81, 145);
    }
    .blah{
    position: absolute;
    top: 110%;
    left: 25%;
    font-size: 18px;
    font-family: 'Arial';
    color: rgb(81, 81, 145);
    text-align: center;
    }
    .foot{
    position: absolute;
    top: 50%;
    left: 45%;
    }
    .logo2{
    position: relative;
    width: 35%;
    height: 35%;
    }
    .guides{
    position: absolute;
    top: 90%;
    font-family: 'Calibri';
    color: rgb(81, 81, 145);
    }
    .clear{
    position: absolute;
    top: 110%;
    left: -15%;
    font-size: 18px;
    font-family: 'Arial';
    color: rgb(81, 81, 145);
    text-align: center;
    }
    .code{
    position: absolute;
    top: 53%;
    left: 75%;
    }
    .ready{
    position: relative;
    width: 67%;
    height: 67%;
    }
    .end{
    position: absolute;
    top: 93%;
    left: 2%;
    font-family: 'Calibri';
    color: rgb(81, 81, 145);
    }
    .real{
    position: absolute;
    top: 115%;
    left: -15%;
    font-size: 18px;
    font-family: 'Arial';
    color: rgb(81, 81, 145);
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div class="rocket">
    <h1 class="in">inarocket</h1>
    <h1 class="dot">.com</h1>
    <p class="learn">Learn front-end development at <i> rocket spee
    d</i></p>
    </div>
    <div class="time">
    <img class="logo1" src="time.webp" alt="">
    <h3 class="respect">We respect your time</h3>
    <p class="blah">No more blah blah videos. Just straight to <br>
    the point sides with relevant information.</p>
    </div>
    <div class="foot">
    <img class="logo2" src="step.webp" alt="">
    <h3 class="guides">Step by step guides</h3>
    <p class="clear">Clear and concise steps to build real use <br>
    solutions. No missed points.</p>
    </div>
    <div class="code">
    <img class="ready" src="end.png" alt="">
    <h3 class="end">Ready to use code</h3>
    <p class="real">Real code you can just copy and paste into your
    real projects.</p>
    </div>
    </body>
    </html>
    #4
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.
    0">
    <title>Document</title>
    </head>

    <style>
    body{
    background-color: green;
    }
    .point{
    top: 5%;
    left: 0%;
    position: absolute;
    background-color: white;
    width: 100%;
    height: 150px;
    }
    .green1{
    position: absolute;
    top: -55%;
    left: 28%;
    font-family: 'Calibri';
    font-size: 105px;
    }
    .green2{
    position: absolute;
    top: -55%;
    left: 55%;
    color: rgb(1, 82, 1);
    font-family: 'Calibri';
    font-size: 105px;
    }
    .simply{
    position: absolute;
    top: 48%;
    left: 28.5%;
    font-family: 'Calibri';
    font-size: 30px;
    letter-spacing: 19px;
    }
    .bottom{
    bottom: 0%;
    left: 0%;
    position: absolute;
    background-color: white;
    width: 100%;
    height: 130px;
    }
    .site{
    position: absolute;
    top: -5%;
    left: 37%;
    font-family: 'Arial';
    font-size: 30px;
    }
    .fb{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 10%;
    bottom: 10%;
    }
    .fbsite{
    position: absolute;
    left: 15%;
    font-size: 20px;
    font-family: 'Arial';
    bottom: 5%;
    }
    .twitter{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 55%;
    bottom: 10%;
    }
    .twittersite{
    position: absolute;
    left: 60%;
    font-size: 20px;
    font-family: 'Arial';
    bottom: 5%;
    }
    </style>
    <body>
    <div class="point">
    <h1 class="green1">tutorials</h1>
    <h1 class="green2">point</h1>
    <p class="simply">SIMPLYEASYLEARNING</p>
    </div>
    <div class="bottom">
    <h1 class="site">www.tutorialspoint.com</h1>
    <img class="fb" src="facebook.png" alt="">
    <p class="fbsite"><strong> https://www.facebook.com/tutorialspo
    intindia </strong></p>

    <img class="twitter" src="twitter.png" alt="">


    <p class="twittersite"><strong> https://twitter.com/tutorialpoi
    nt </strong></p>
    </div>
    </body>
    </html>

    You might also like