Scribd Logo
Upload

Welcome to Scribd!

  • makalah pro

    Uploaded by

    nani82346
    1 views7 pages

    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

    Copyright:

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

    makalah pro

    Uploaded by

    nani82346

    Copyright:

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

    PRAKTIKUM HTML DAN CSS DASAR

    WEB PROGRAMING
    INDEX.HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Web TI-B 2024</title>
    </head>
    <body>
    <!-- header -->
    <header>
    <div class="logo">
    <img src="images/logo.png" alt="" width="30px">
    </div>
    <div class="dropdown">
    <button class="dropbtn">
    <img src="images/gambar.jpeg" alt="" width="30px" class="avatar">
    </button>
    <div class="dropdown-content">
    <a href="#">profil</a>
    <a href="#">setting</a>
    <a href="#">keluar</a>
    </div>
    </div>
    </header>

    <!-- bagian navbar -->


    <nav>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#tentang">Tentang Kami</a></li>
    <li><a href="#pelayanan">Pelayanan</a></li>
    <li><a href="#kontak">kontak</a></li>
    <li><a href="https://youtube.com" target="_blank">YouTube</a></li>
    </ul>
    </nav>

    <!-- bagian main -->


    <main>

    <!-- bagian hero section -->


    <section class="hero">
    <div class="hero-content">
    <h2>Selamat Datang Di Web Kelas TI-B</h2>
    <p>Ini adalah website resmi kelas TI-B 2024</p>
    <a href="#" class="btn">selengkapnya >></a>
    </div>
    </section>

    <!-- bagian tentang kami -->


    <section id="tentang">
    <h2>Tentang Kami</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi officiis
    velit fugit quis. Suscipit, voluptatum vel omnis quidem perferendis amet et. Similique
    repellendus saepe fugit, corrupti sed asperiores ad ratione.</p>
    </section>

    <!-- bagian layanan -->


    <section id="pelayanan">
    <h1>Layanan</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, magni
    repellendus tenetur, incidunt enim id reprehenderit ipsum ad minus, aut molestiae
    maxime! Omnis officia ad, architecto beatae adipisci iusto aliquam.</p>
    <!-- contoh list -->
    <ul>
    <li>Web Devlopment</li>
    <li>Mobile App Devlopment</li>
    <li>Grhapic Design</li>
    </ul>
    <!-- contoh gambar -->
    <div>
    <h3>Contoh Gambar</h3>
    <img src="images/gambar.jpeg" alt="gambar" width="300">
    </div>
    <!-- contoh vidio -->
    <div>
    <h3>Contoh Vidio</h3>
    <video width="320" height="240" controls>
    <source src="images/vidio.mp4" type="video/mp4">
    browser anda tidak mendukung
    </video>
    </div>

    <!-- CONTOH TABEL -->


    <!-- PADA BAGIAN INI SILAHKAN KALIAN TAMBAHKAN TABEL -->

    </section>

    <!-- bagian kontak -->


    <section id="kontak">

    <!-- PADA BAGIAN INI SILAHKAN TAMBAHKAN FORM KONTAK SESUAI YANG TELAH
    KALIAN PELAJARI-->

    </section>

    </main>

    <!-- bagian Footer -->


    <footer>
    <p>Hak cipta &copy; Web Kelas Ti-B</p>
    </footer>

    </body>
    </html>
    STYLE.CSS

    body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #ddd;
    }

    header{
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #003285;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    }

    .avatar{
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 10px;
    }

    .dropbtn{
    background-color: #003285;
    color: #fff;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    }

    .dropdown{
    position: relative;
    display: inline-block;
    }

    .dropdown-content{
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    .dropdown-content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    }

    .dropdown-content a:hover{
    background-color: #f1f1f1f1;
    }
    .dropdown:hover .dropdown-content{
    display: block;
    }

    nav ul{
    position: sticky;
    top: 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #ffbb3e;
    overflow: hidden;
    }

    nav ul li{
    float: left;
    }

    nav ul li a{
    display: block;
    padding: 20px;
    text-decoration: none;
    color: #fff;
    }

    nav ul li a:hover{
    background-color: #99b4e0d3;
    }

    /* hero */
    .hero{
    background-image: url('images/gambar.jpeg');
    background-size: cover;
    background-position: center;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    }

    .hero-content{
    max-width: 800px;
    padding: 20px;
    }

    .hero-content h2{
    font-size: 3em;
    margin-bottom: 20px;
    }

    .hero-content p{
    font-size: 1.2em;
    margin-bottom: 20px;
    }

    .hero-content .btn{
    display: inline-block;
    padding: 10px 20px;
    background-color: #003285;
    color: #fff;
    border-radius: 25px;
    transition: background-color 0.3s;
    }

    .hero-content a{
    text-decoration: none;
    }

    .hero-content .btn:hover{
    background-color: #ffbb3e;
    }

    /* bagian main */
    main{
    padding: 20px;
    }

    section{
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #ccc;
    background-color: #fff;
    }

    footer{
    background-color: #003285;
    color: #fff;
    text-align: center;
    padding: 20px;
    }

    img{
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    }

    video{
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    }

    You might also like