Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS / HTML / Source Code

Halaman Login : Membuat halaman login dengan HTML5 dan CSS3

Oleh Fauzi Pnd 1 komentar
Assalammualikum wr wb
Halaman Login

 Pada kesempatan kali ini, saya akan membagikan tutorial tentang HTML dan CSS, dan ini juga postan pertama blog ini heheh :),di post ini saya akan memberikan tutorial cara membuat halaman login, disini kita akan membuat halaman login menggunakan css internal.

Pertama-tama kalian buka di text editor kalian,saya sendiri menggunakan sublime text dan kedua siapkan browser kesayangann kalian.

Kira-kira Demo Tampilannya seperti ini



okeh langsung saja...

saya tidak menyarankan untuk mengcopynya,kenapa ? , agar kalian terbisa coding sendiri dan tidak menjiplak karysa orang lain tapi kalau kalian ingin mengcopynya silahkan karena source code ini admin yang buat  dan gratis hehehe :)

untuk style diatas kita bisa memangilnya mengunakan atribut link, untuk kalian yang sudahh mengenal css pastinya tidak akan kebingguan. langsung tulis css dibawah ini :
<!-- Style By codingpolitan.blogspot.com -->
 <style type="text/css">
 /* Style untuk semua elemen yang berada di dalam body */ body { background-color: #ddd; } /* Elemen yang digunakan untuk membungkus Laman Login */ .container { margin: 50px auto; width: 300px; height: auto; margin-top: 100px; } /*Elemen yang digunakan untuk memberi style pada judul */ .judul{ background-color: salmon; text-align: center; padding: 20px; font-size: 24px; font-weight: bold; font-family: sans-serif; border-bottom: 2px solid red; border-top-right-radius: 10px; border-top-left-radius: 10px; color: rgba(255,255,255,0.5); transition: 1s; cursor: pointer; } .judul:hover{ color: rgba(255,255,255,1); } /* Isi style untuk tempat inputan */ .isi{ background-color: #eee; padding: 20px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } /* Style untuk Edit inputan */ .user,.pass{ width: 240px; padding: 10px; font-size: 16px; } /* Style dari button */ .btn{ padding: 10px; border-radius: 10px; background-color: #336699; font-size: 16px; font-weight: bold; cursor: pointer; } .btn:hover{ background-color: #339966; } </style>


dan yang kedua kita membuat sturkut HTML nya agar css kita jalan,Copy Script Dibawah ini
<!DOCTYPE html>
<html>
 <head>
 <title>Halaman Login</title>
 </head>
 <body>
 <!-- Kunjungi Codingpolitan.blogspot.com -->
<div class="container">
 <div class="judul"> Halaman Login </div>
 <div class="isi">
 <form action="" method="">
 <div> <input type="text" name="user" class="user" placeholder="Username" title="Username" required> </div>
 <div style="margin-top: 10px;"> <input type="password" name="pass" class="pass" placeholder="Password" title="Password" required> </div>
 <div style="margin-top: 10px;"> <input type="submit" name="login" title="Lo-gin" class="btn" value="Lo-gin"> </div>
 </form>
 </div>
 </div>
</body>
</html>
Catatan : Seharusnya kita tadi membuat sturktu HTML dulu kemudai CSS nya hehehe.


Untuk demonya kalian bisa lihat dari gambar yang diatas atau jika kalian ingin mencoba nya kali bisa mencobanya. copy script diatas dan save dengan format (dot).html kemudian buka dengan browser...

Dowbload Source Code

Nah mudah bukan untuk membuat halaman login menggunakan HTML5 dan CSS 3,jika kalian ingin bertanya atau ada code yang tidak di mengerti bisa tinngalan komentar dibawah
~Selamat Mencoba....

Happy Coding :)
Fauzi Pnd
Fauzi Pnd Adalah seorang pemuda yang suka mempelajari hal-hal yang baru sambil nyari duid.

1 komentar untuk "Halaman Login : Membuat halaman login dengan HTML5 dan CSS3"