Ayo Belajar HTML CSS | Membuat Portal Sekolah Sistem Informasi Sederhana

on
A.Pendahuluan
Assaalamu’ alaikum Wr.Wb. Selamat malam teman-teman, apa kabar hari ini ? Baik kan ?. Kembali lagi di blog saya , terima kasih sebelumnya karena sudah mampir di blog saya, Nah kali ini saya akan memberikan tutorial kepada kalian bagaimana cara membuat portal sekolah sederhana. 

B.Latar Belakang
Bagi saya membuat portal sekolah ini agar menjadi sarana sistem iinformasi yang ada dalam sekolah untuk menjadi bekal di kemudian hari.

C.Maksud dan Tujuan
Maksud dan tujuan saya sebernya hampir sama dengan latar belakangnya yaitu membuat sarana sistem informasi local sekolah. 

D.Pembahasan
Baiklah semua langsung saja saya menunjukkan scriptnya. Pertama siapa kan dulu folder HTML dan CSS , setelah selesai lanjut ke pada script dari HTML nya terlebih dahulu.
File HTML

<!DOCTYPE html>
<html>
<head>
    <title>Portal</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>PORTAL LOCAL AREA</h1>
    <div class="satu w3-mobile">
        <div class="natas"><h2 style="margin-top: 10px;">TKJ</h2></div>
        <div class="btengah">
            <center>
            <img src="profil.png" width="200" height="200" style="display: block;">
            <div class="overvlay">
                <div class="text">Hellow World</div>
            </div>
        </center>
        </div>
        <div class="bbawah">
            <button type="submit" class="clik"><h3>Click Disini</h3></button>
        </div>
    </div>
   
    <div class="satu w3-mobile">
        <div class="natas"><h2 style="margin-top: 10px;">AK</h2></div>
        <div class="btengah">
            <center>
            <img src="profil.png" width="200" height="200" style="display: block;">
            <div class="overvlay">
                <div class="text">Hellow World</div>
            </div>
        </center>
        </div>
        <div class="bbawah">
            <button type="submit" class="clik"><h3>Click Disini</h3></button>
        </div>
    </div>
    <div class="satu w3-mobile">
        <div class="natas"><h2 style="margin-top: 10px;">AP</h2></div>
        <div class="btengah">
            <center>
            <img src="profil.png" width="200" height="200" style="display: block;">
            <div class="overvlay">
                <div class="text">Hellow World</div>
            </div>
        </center>
        </div>
        <div class="bbawah">
            <button type="submit" class="clik"><h3>Click Disini</h3></button>
        </div>
    </div>
    <div class="satu w3-mobile">
        <div class="natas"><h2 style="margin-top: 10px;">TB</h2></div>
        <div class="btengah">
            <center>
            <img src="profil.png" width="200" height="200" style="display: block;">
            <div class="overvlay">
                <div class="text">Hellow World</div>
            </div>
        </center>
        </div>
        <div class="bbawah">
            <button type="submit" class="clik"><h3>Click Disini</h3></button>
        </div>
    </div>

    <div class="satu w3-mobile">
        <div class="natas"><h2 style="margin-top: 10px;">TKR</h2></div>
        <div class="btengah">
            <center>
            <img src="profil.png" width="200" height="200" style="display: block;">
            <div class="overvlay">
                <div class="text">Hellow World</div>
            </div>
        </center>
        </div>
        <div class="bbawah">
            <button type="submit" class="clik"><h3>Click Disini</h3></button>
        </div>
    </div>
    <div class="satu w3-mobile">
        <div class="natas"><h2 style="margin-top: 10px;">AK</h2></div>
        <div class="btengah">
            <center>
            <img src="profil.png" width="200" height="200" style="display: block;">
            <div class="overvlay">
                <div class="text">Hellow World</div>
            </div>
        </center>
        </div>
        <div class="bbawah">
            <button type="submit" class="clik"><h3>Click Disini</h3></button>
        </div>
    </div>
    <div class="satu w3-mobile">
        <div class="natas"><h2 style="margin-top: 10px;">RPL</h2></div>
        <div class="btengah">
            <center>
            <img src="profil.png" width="200" height="200" style="display: block;">
            <div class="overvlay">
                <div class="text">Hellow World</div>
            </div>
        </center>
        </div>
        <div class="bbawah">
            <button type="submit" class="clik"><h3>Click Disini</h3></button>
        </div>
    </div>
    <div class="satu w3-mobile">
        <div class="natas"><h2 style="margin-top: 10px;">BB</h2></div>
        <div class="btengah">
            <center>
            <img src="profil.png" width="200" height="200" style="display: block;">
            <div class="overvlay">
                <div class="text">Hellow World</div>
            </div>
        </center>
        </div>
        <div class="bbawah">
            <button type="submit" class="clik"><h3>Click Disini</h3></button>
        </div>
    </div>

</body>
</html>
File CSS
body {
    font-family: Arial, Helvatica, sans-serif;
    background: linear-gradient(-45deg,#06f900,#40A7C2,#895EEC,#23D5AB);
}
.satu {
    width: 300px;
    height: 350px;
    background-color: aqua;
    float: left;
    margin-left: 15px;
    margin-top: 10px;
    border-radius: 2px;
    box-shadow: 5px 5px 5px black;
}
/*Bagian Atas*/
.natas {
    width: 100%;
    height: 70px;
    background-color:#778882;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    float: left;
}
h1 {
    margin: 0;
    padding: 0;
    text-align: center;
}

h2 {
    margin: 0;
    padding: 0;
    text-align: center;

}

/*Bagian Tengah*/

.btengah {
    width: 100%;
    height: 220px;
    background-color: #c9c9e6;
    float: left;
    position: relative;
}

.overvlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: aqua;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
    opacity: 0.8;
}

.btengah:hover .overvlay{
    bottom: 0;
    height: 100%;
}

.text {
    color: white;
    font-height: bold;
    position: absolute;
    font-size: 30px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/*Bagian Bawah*/

.bbawah {
    width: 100%;
    height: 60px;
    background-color: grey;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    float: left;
}

.clik {
    width: 95%;
    height: 50px;
    background-color: blue;
    margin-top: 5px;
    margin-left: 7px;
}

.clik:hover {
    background-color: aqua;
    cursor: pointer;
    box-shadow: 0 2px 5px 2px red;
}


Hasil Codingan Dari HTML dan CSS


Nah bisa kalian lihat dari tampilan diatas adalah hasil codingan dari file HTML dan CSSnya.

E.Kesimpulan
Nah inilah hasil sharingan saya yang saya lakukan hari ini semoga apa yang saya sharingkan dapat bermanfaat.
Berikut ini merupakan dokumentasi dari kegiatan saya hari ini.
Documentasi
F.Penutup
Terima Kasih sudah menjadi pengikut setia dari blog saya mudah”an apa yang saya sharingkan diblog saya dapat bermanfaat bagi kalian.

G.Referensi
-

Comments

  1. Elvin AbelMarch 12, 2020 at 12:42 AM

    Bagus kak terima kasih atas informasinya, sangat berguna dan bermanfaat sekali, semoga kedepan nya lebih bermanfaat lagi
    NIM : 1922500134
    NAMA : Elvin Abel
    Kelompok :SI2K
    Link kampus : https://www.atmaluhur.ac.id

    ReplyDelete

Post a Comment