Scribd Logo
Upload

Welcome to Scribd!

  • Tugas 01

    Uploaded by

    Vome
    22 views5 pages

    Original Title

    TUGAS 01.docx

    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
    22 views5 pages

    Tugas 01

    Uploaded by

    Vome

    Copyright:

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

    TUGAS 01

    Kode CSS dari TryItYourself


    1. TryITYourself 1

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color: grey;
    font-family: elephant;
    }

    h1 {
    color: pink;
    text-align: center;
    }

    p{
    color: pink;
    font-family: monotype corsiva;
    font-size: 20px;
    text-allign: left;
    }
    </style>
    </head>
    <body>

    <h1>bibi</h1>
    <p>I'm a student of Information System Department Batch 2020.</p>
    <p>I was born on 2001.</p>
    <p>I really hope thati can make my own WEB and be a professional WEB
    developer</p>

    </body>
    </html>

    2. TryITYourself 2

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color:grey;
    font-family: spooky cat
    }
    h2 { color: pink;
    text-align: center;
    font-size: 30px;
    }
    p { color:pink;
    font-size: 17px
    }
    p.dotted {border-style: dotted;}
    p.solid {border-style: solid;}
    p.solid {border-style: solid;}
    p.solid {border-style: solid;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    </style>
    </head>
    <body>

    <h2>Organizations</h2>
    <p>Let me know what your interest by your organization!</p>
    <p> Fill the dotted border for your past organization</p>
    <p> Fill the solid border for your current organization</p>
    <p> Fill the double border for organization you want! </p>

    <p class="dotted">Kelompok Ilmiah Remaja SMA.</p>


    <p class="solid">Intern ITS Student Choir 2020.</p>
    <p class="solid">Intern of HMSI Berani Berarti 2020</p>
    <p class="solid">Staff in regeneration divison of KISI KREASI 2020</p>
    <p class="solid">Staff in ICON divison of ISE! 2020</p>
    <p class="double">Part of HMSI</p>

    </body>
    </html>

    3. TryItYourself 3

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.gallery {
    margin: 30px;
    border: 1px solid #ccc;
    float: left;
    width: 250px;
    }

    div.gallery:hover {
    border: 5px solid #777;
    }

    div.gallery img {
    width: 100%;
    height: 75%;
    }

    div.desc {
    padding: 20px;
    text-align: center;
    font-family: miss clara;
    }
    </style>
    </head>
    <body>

    <div class="gallery">
    <a target="_blank"
    href="https://asset.kompas.com/crops/P0Mw312vss2xwMbJNV_SCZ_UE80=/
    0x1:3500x2334/750x500/data/photo/2019/11/26/5ddce810a7f64.jpg">
    <img
    src="https://asset.kompas.com/crops/P0Mw312vss2xwMbJNV_SCZ_UE80=/0x1:350
    0x2334/750x500/data/photo/2019/11/26/5ddce810a7f64.jpg" alt="Raisa's Picture"
    width="600" height="400">
    </a>
    <div class="desc">Raisa is my favourite indonesia's female singer</div>
    </div>

    <div class="gallery">
    <a target="_blank"
    href="https://i.guim.co.uk/img/media/6eb75415deecb3c1fa1b008b3f6c812e9fba5e6b/
    0_135_5391_3235/master/5391.jpg?
    width=1200&height=900&quality=85&auto=format&fit=crop&s=04e0b2a52f964e53
    9d3f8227850dd28c">
    <img
    src="https://i.guim.co.uk/img/media/6eb75415deecb3c1fa1b008b3f6c812e9fba5e6b/
    0_135_5391_3235/master/5391.jpg?
    width=1200&height=900&quality=85&auto=format&fit=crop&s=04e0b2a52f964e53
    9d3f8227850dd28c" alt="Oxford Campus" width="600" height="400">
    </a>
    <div class="desc">This is my dream!!!</div>
    </div>

    </body>
    </html>

    4. TryItYourself 4

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color: PaleTurquoise;
    }
    p {
    color:Deeppink;
    text-align: center;
    font-family: verdana;
    fomt-sixe 30px;
    }
    input {
    width: 100%;
    }
    </style>
    </head>
    <body>

    <p>Put Your Full Name Here!</p>

    <form>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname">
    <label for="fname">Middle Name</label>
    <input type="text" id="fname" name="fname">
    <label for="fname">Last Name</label>
    <input type="text" id="fname" name="fname">
    </form>

    </body>
    </html>

    5. TryItYourself 5

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
    color : Brown;
    font-family:rage italic;
    font-size: 50px;
    }
    p{
    font size: 30px;
    font-family : tw cen mt;
    }
    #example1 {
    background-image:
    url(https://media3.s-nbcnews.com/j/newscms/2019_33/2203981/171026-better-
    coffee-boost-se-329p_67dfb6820f7d3898b5486975903c2e51.fit-1240w.jpg),
    url(paper.gif);
    background-position: right bottom, left bottom;
    background-repeat: no-repeat, repeat;
    padding: 100px;
    }
    </style>
    </head>
    <body>

    <h1>K's</h1>
    <p>Get to know me through my WEB</p>

    <div id="example1">
    <h1>Mari Bercerita</h1>
    <p> Dalam Web ini akan diceritakan bagaimana kisah perkuliahan yangterkadang
    bahagia, sedih, dan seru. </p>
    <p>Semoga perjalanan yang akan didokumentasikan di sini, akan menjadi kenangan
    manis untuk dibukakembali ketika aku sudah menjadi sesuatu:)</p>
    </div>

    </body>
    </html>

    You might also like