Scribd Logo
Upload

Welcome to Scribd!

  • Listing Program

    Uploaded by

    Siti
    2 views8 pages

    Original Title

    LISTING PROGRAM

    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
    2 views8 pages

    Listing Program

    Uploaded by

    Siti

    Copyright:

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

    LISTING PROGRAM

    HTML Website LPM


    <!DOCTYPE html>
    <html>
    <head>
    <title>Lembaga Penjaminan Mutu Istnuba</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <header>
    <nav>
    <div class="brand">
    <a href="">LPM ISTNUBA</a>
    </div>
    <ul class="menu">
    <li><a href="">Beranda</a></li>
    <li>
    <a href="">Profile</a>
    <ul class="dropdown">
    <li><a href="profile LPM Istnuba/Visi, Misi/visi misi
    LPM.html">Visi, Misi</a></li>
    <li><a href="">Struktur Organisasi</a></li>
    </ul>
    </li>
    <li>
    <a href="">Layanan</a>
    <ul class="dropdown">
    <li><a href="">Audit Mutu Internal(AMI)</a></li>
    <li><a href="">TIM AMI</a></li>
    </ul>
    </li>
    <li>
    <a href="">Akreditasi</a>
    <ul class="dropdown">
    <li><a href="Akreditasi/SI.jpeg">Prodi SI</a></li>
    <li><a href="Akreditasi/TL.jpeg">Prodi TL</a></li>
    <li><a href="Akreditasi/ST.jpeg">Prodi STAT</a></li>
    <li><a href="Akreditasi/Kampus.jpeg">ISTNUBA</a></li>
    </ul>
    </li>
    <li>
    <a href="">Dokumen</a>
    <ul class="dropdown">
    <li><a href="">Kebijakan Mutu</a></li>
    <li><a href="">Standar Mutu</a></li>
    <li><a href="">Manual Mutu</a></li>
    <li><a href="">SOP</a></li>
    <li><a href="">FORM</form></a></li>
    </ul>
    </li>
    </ul>
    </nav>
    <div class="button">
    <a href="#" class="btn1">Sistem Informasi</a>
    <a href="#" class="btn1">Statistika</a>
    <a href="#" class="btn1">Teknik Lingkungan</a>
    </div>
    <div class="title">
    <h2>Lembaga Penjaminan Mutu ISTNUBA</h2>
    </div>
    </header>
    </body>
    </html>

    Css Website LPM


    {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    }
    header{
    background-image: url(web\ background.jpeg);
    height: 100vh;
    background-size: cover;
    background-position: center;
    }
    nav {
    display: flex;
    background-color: #33cc33;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    height: 60px
    }

    .menu{
    display: flex;
    }
    .menu li a{
    padding: 10px 25px;
    }

    nav .brand {
    font-size: xx-large;
    font-weight: bold;
    }

    nav .brand a{
    color: white;
    text-decoration: none;
    }

    nav .menu li a{
    color: white;
    text-decoration: none;
    font-weight: 600;
    }

    nav .menu li {
    list-style: none;
    padding: 10px;
    }

    nav .menu .dropdown {


    display: none;
    }
    nav .menu li:hover {
    background-color: #996633;
    }

    nav ul li:hover .dropdown{


    display: block;
    background-color:blue;
    position:absolute;
    margin-top: 10px;
    padding: 5px;
    border-radius: 4px;
    }

    /responsisive Breakpoint/
    @media screen and ( max-width: 768px) {
    nav ul{
    width: 50%;
    }
    }

    /* ukuran mobile */
    @media screen and (max-width: 576px) {
    nav ul {
    display: none;
    }
    }
    .title{
    position: absolute;
    top: 40%;
    left: 30%;
    transform: translate(-50%;-50%);
    }
    .title h2{
    display: flex;
    font-family: sans-serif;
    color: #0033cc;
    font-size: 35px;
    }
    .button{
    position: absolute;
    top: 55%;
    left: 35%;
    transform: translate(-100%-100%);
    }
    .btn1{
    border: 1px solid #00ff00;
    padding: 10px 30px;
    color: #00ff00;
    text-decoration: none;
    transition: 0.6s ease;
    border-radius: 5px;
    margin: 10px;
    }
    .btn1:hover{
    background-color: #00ff00;
    color: black;
    }

    <div class="button">
    <a href="#" class="btn1">Sistem Informasi</a>
    <a href="#" class="btn1">Statistika</a>
    <a href="#" class="btn1">Teknik Lingkungan</a>
    </div>
    <div class="title">
    <h2>Lembaga Penjaminan Mutu ISTNUBA</h2>
    </div>

    You might also like