Oleh : pandu
Kategori : Tips dan Trik

Hai Semuanya,
Ditulisan ini saya ingin memberikan Tutorial Membuat Form Login Standar Dengan HTML5 Dan CSS3.
Nah saya akan menjelaskan dulu apa itu HTML5,HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
 

Oke Lanjut Ke Tutorial Membuat Form Login Dengan HTML5 Dan CSS3.
  1. Mendownload Software Text Editor
Disinih Saya Memakai Software Text Editornya Sublime Text Editor 3, Yang Ingin Mendownload nya bisa
klik link ini https://www.sublimetext.com/3.​​​​​

      2. Coding HTML5
 

Form Login





    

        
        
    
 

 

Save dengan nama login.html

      3. Script Coding CSS3
*{
    margin: 0;
    padding: 0;
}

body{
    background-color: gray;
}

#kotak-login{
    margin:0 auto;
    margin-top: 50px;
    width:500px;
}

.judul-login{
    color:white;
    background-color: crimson;
    text-align: center;
    font-family: arial;
    font-size: 30px;
    padding: 10px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px
}

.input-login{
    background-color: white;
    height: 230px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.text-login{
    margin-top: 15px;
    width: 400px;
    padding: 10px;
}

.btn-login{
    color: white;
    background-color: crimson;
    padding: 10px;
    width: 425px;
    margin-top: 10px;
    font-size: 20px;
    font-family: arial;
    border:none;
}
.btn-login:hover{
    color: crimson;
    background-color: white;
    border:2px solid crimson;
    transition-duration: 1s;
    cursor: pointer;
}

.btn-create{
    color: crimson;
    background-color: white;
    border:2px solid crimson;
    padding: 10px;
    margin-top: 10px;
    margin-right: 37px;
    float: right;
}

.btn-create:hover{
    color: white;
    background-color: crimson;
    transition-duration: 1s;
    cursor: pointer;
}

 

Save Dengan Nama login.css

Selesai, Dan Buka File login.html, 

Sekian dari saya,
Semoga bisa dipahami dan bermanfaat bagi teman-teman,
Jika ada pertanyaan bisa komentar.

Terima Kasih
 

SHARE!

pandu

"Anak muda yang suka bikin suatu yang menarik,pengurus ekskul robotika53 , hobynya baca buku"

Follow


3 Mading


Cara Menjadi Orang Pintar

Kategori : Tips dan Trik

Kunci Sukses Presentasi

Kategori : Tips dan Trik