Scribd Logo
Upload

Welcome to Scribd!

  • 22 views

    Coding Web Sederhana

    Uploaded by

    FEBRIYANTO L. HASAN
    The document is a website for learning technology that includes sections for the home page, courses, instructors and contact information. The home page features an image and text promoting learning technology easily and enjoyably. The courses section lists programing, networking, operating systems and graphic design as potential fields of study. The instructors section displays profiles of multiple instructors with their names and photos.

    Copyright:

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

    Coding Web Sederhana

    Uploaded by

    FEBRIYANTO L. HASAN
    22 views6 pages
    The document is a website for learning technology that includes sections for the home page, courses, instructors and contact information. The home page features an image and text promoting learning technology easily and enjoyably. The courses section lists programing, networking, operating systems and graphic design as potential fields of study. The instructors section displays profiles of multiple instructors with their names and photos.

    Original Title

    coding web sederhana

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document is a website for learning technology that includes sections for the home page, courses, instructors and contact information. The home page features an image and text promoting learning technology easily and enjoyably. The courses section lists programing, networking, operating systems and graphic design as potential fields of study. The instructors section displays profiles of multiple instructors with their names and photos.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    22 views6 pages

    Coding Web Sederhana

    Uploaded by

    FEBRIYANTO L. HASAN
    The document is a website for learning technology that includes sections for the home page, courses, instructors and contact information. The home page features an image and text promoting learning technology easily and enjoyably. The courses section lists programing, networking, operating systems and graphic design as potential fields of study. The instructors section displays profiles of multiple instructors with their names and photos.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 6

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>web sederhana.</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <div class="wrapper">
                <!--untuk Home-->
                <div class="logo"><a href=''>AYOK BELAJAR TEKNOLOGI.</a></div>
                <div class="menu">
                    <ul>
                        <li><a href="#home">home</a></li>
                        <li><a href="#jurusan">Jurusan</a></li>
                        <li><a href="#Pembimbing">Pembimbing</a></li>
                        <li><a href="contact">contact</a></li>
                        <li><a href=""class="tbl-biru">sign up</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="wrapper">
            <section id="home">
            <img src="https://img.freepik.com/free-vector/business-people-working-
    laptop-development_1262-18907.jpg?
    size=626&ext=jpg&ga=GA1.2.993652732.1669833071&semt=sph"/>
            <div class="kolom">
                <p class="deskripsi">Belajar Teknologi MUDAH dan MENYENANGKAN</p>
                <h2>Ayok Semangat Pantang Menyerah</h2>
                <p>Menuju Revolusi Industri 5.0 #Indonesia Hebat</p>
                <p><a href="" class="tbl-pink">Pelajari Lebih Lanjut...</a></p>
            </div>
            </section>
            <!--untuk Jurusan-->
            <section id="jurusan">
                <div class="kolom">
                    <p class="deskripsi">You Will Need This</p>
                    <h2>Pilih Jurusan</h2>
                    <p>Kamu bisa memilih jurusan keahlian dalam memperlajari teknologi
    diantaranya:</p>
                    <p>Programing, Networking Operatin System, Desain Grafis,
    Cinematography...</p>
                    <p><a href="" class="tbl-biru">Pelajari Lebih Lanjut</a></p>
                </div>
                <img src="https://img.freepik.com/free-vector/programmer-concept-
    illustration_114360-2284.jpg?
    size=338&ext=jpg&ga=GA1.2.993652732.1669833071&semt=sph"/>
            </section>

            <!--untuk Pembimbing-->
            <section id="Pembimbing">
                <div class="tengah">
                   <div class="kolom">
                    <p class="deskripsi">Profil Pembimbing</p>
                    <h2>Pembimbing</h2>
                    <p>Daftar Pembimbing</p>
                   </div>

                <div class="pembimbing-list">
                    <div class="kartu-pembimbing">
                      <img src="https://img.freepik.com/free-photo/stylish-black-
    american-male-dressed-suit-grey-background_613910-1548.jpg?w=2000" />
                        <p>prof. samsudin</p>
                    </div>
                    <div class="kartu-pembimbing">
                        <img src="https://encrypted-tbn0.gstatic.com/images?
    q=tbn:ANd9GcQMQSKjgA-GAyF3UWI3qyATYai3S3lDOAOo7V1-5Lfc5PjnGTblDBbF-
    1P_Eq6porro5TQ&usqp=CAU" />
                          <p>Prof. samsudin</p>
                      </div>
                      <div class="kartu-pembimbing">
                        <img
    src="https://media.istockphoto.com/id/618348040/photo/shot-of-a-young-entrepreneur-
    using-a-mobile-phone.jpg?s=612x612&w=0&k=20&c=0ffLBdyOXXxhiQDuZU6RsT8QvTynZKza-
    eayevE7oDI=" />
                          <p>prof. samsudin</p>
                      </div>
                      <div class="kartu-pembimbing">
                        <img
    src="https://media.istockphoto.com/id/1161827713/photo/headshot-of-guy-wearing-
    spectacles-looking-at-camera-with-smile-isolated-on-background.jpg?
    s=612x612&w=0&k=20&c=Z4kNSUCpeSik03Dw0jdtl6bXzmqqR6K8L1PHl4jjKLo=" />
                          <p>prof. samsudin</p>
                      </div>
                </div>
                </div>
            </section>

        </div>
    </body>
    </html>

    Css
    * {
        text-decoration:none;
        margin: 0px;
        padding: 0px;;
    }
    body{
        margin: 0px;
        padding: 0px;
        font-family: 'open sans',sans-serif;
    }

    .wrapper {
       width: 1100px;
       margin: auto;
       position: relative;
    }
    .logo a {
        font-size: 50px;
        font-weight: bold;
        float: leaf;
        font-family: Courier;
        color:#2A3990;

    .menu{
        float:right;

    }
    nav {
        width: 100%;
        margin: auto;
        display: flex;
        line-height: 80px;
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        background: #fffff;
        z-index: 1;

    nav ul{
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    nav ul li {
        float: left;
    }
    nav ul li a{
        color: black;
        font-weight: bold;
        text-align: center;
        padding: 0px 16px 0px 16px;
        text-decoration: none;

    }
    nav ul li a:hover{
        text-decoration: underline;
    }
    section{
        margin: auto;
        display: flex;
        margin-bottom: 50px;
    }
    .kolom {
        margin-top: 50px;
        margin-bottom: 50px;

    }
    .kolom .deskripsi{
        font-size: 20px;
        font-weight: bold;
        font-family: 'comic sans ms';
        color: #2A3990;

    }
    h2{
        font-family: 'comic sans ms';
        font-weight: 800px;
        font-size: 45px;
        margin-bottom: 20px;
        color: #2A3990;
        width: 100%;
        line-height: 50px;
    }
    a.tbl-biru{
        background: #0023ea;
        border-radius: 20px;
        margin-top: 20px;
        padding:15px 20px 15px 20px ;
        color: #FFFFFF;
        cursor: pointer;
        font-weight: bold;
    }
    a.tbl-biru:hover{
        background: #f81a9f;
        text-decoration: none;
    }
    a.tbl-pink{
        background: #f81a9f;
        border-radius: 20px;
        margin-top: 20px;
        padding:15px 20px 15px 20px ;
        color: #FFFFFF;
        cursor: pointer;
        font-weight: bold;
    }
    a.tbl-pink:hover{
        background: #0023ea;
        text-decoration: none;
    }
    p {
        margin: 10px 0px 10px 0px;
        padding: 10px 0px 10px 0px;
    }
    .tengah{
        text-align: center;
        width: 100%;
    }

    .pembimbing-list{
        width: 100%;
        position: relative;
        display: flex;
        flex-wrap: wrap;

    .kartu-pembimbing{
        width: 20%;
        margin: 0 auto;

    }
    .kartu-pembimbing img{
        width: 80%;
        border-radius: 50%;
    }
    .kartu-pembimbing{
        font-family: 'comic sans ms';
        font-weight: 800;
        font-size: 25px;
        text-align: center;
        color: #2A3990;

    You might also like