Cara Membuat Template Login dengan HTML + CSS

Template merupakan suatu hal yang familiar di bidang web. Banyak orang menggunakan template sebagai media latar belakang yang dapat mempercantik web mereka. Pada artikel kali ini saya akan mencoba membagikan ilmu tentang bagaimana cara membuat template login sendiri menggunakan kombinasi script HTML dan CSS.

Sekedar mengingatkan, script CSS tentu saja dapat digabung kedalam file HTML. Namun, untuk kerapian dari susunan script kebanyakan orang memisahkan script tersebut dan menghubungkannya dengan media sebuah link. Pada artikel kali ini saya akan menyelipkan script CSS kedalam file HTML dengan pemisah :

<style> disini script CSS-nya </style>

Langkah pertama
Ketikkan script HTML seperti dibawah ini :

<h1>Template Login By : duasatuberbagi.blogspot.com</h1>
<div class="stand">
<div class="outer-screen">
<div class="inner-screen">
<div class="form">
<input type="text" class="zocial-dribbble" placeholder="Username" />
<input type="text" placeholder="Password"/>
<input type="submit" value="Masuk" />
<a href="">Lupa Password?</a>
</div> 
</div> 
</div> 
</div>

Langkah Kedua
Setelah tag </div> yang bercetak tebal diatas ketikkan script CSS berikut :

<style>
body{
  margin: 0px;
  padding: 0px;
  background: #31b6f4;
}
h1{
  color: #fff;
  text-align: center;
  font-family: Arial;
  font-weight: normal;
  margin: 2em auto 0px;
}
.outer-screen{
  background: #13202c;
  width: 900px;
  height: 540px;
  margin: 50px auto;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  position: relative;
  padding-top: 35px;
}

.outer-screen:before{
  content: "";
  background: #3e4a53;
  border-radius: 50px;
  position: absolute;
  bottom: 20px;
  left: 0px;
  right: 0px;
  margin: auto;
  z-index: 9999;
  width: 50px;
  height: 50px;
}
.outer-screen:after{
  content: "";
  background: #ecf0f1;
  width: 900px;
  height: 88px;
  position: absolute;
  bottom: 0px;
  border-radius: 0px 0px 20px 20px;
  -moz-border-radius: 0px 0px 20px 20px;
  -webkit-border-radius: 0px 0px 20px 20px;
}

.stand{
  position: relative;  
}

.stand:before{
  content: "";
  position: absolute;
  bottom: -150px;
  border-bottom: 150px solid #bdc3c7;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  width: 200px;
  left: 0px;
  right: 0px;
  margin: auto;
}
.stand:after{
  content: "";
  position: absolute;
  width: 260px;
  left: 0px;
  right: 0px;
  margin: auto;
  border-bottom: 30px solid #bdc3c7;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  bottom: -180px;
  box-shadow: 0px 4px 0px #7e7e7e
}
.inner-screen{
  width: 800px;
  height: 340px;
  background: #31b6f4;
  margin: 0px auto;
  padding-top: 80px;
}
.form{
  width: 400px;
  height: 230px;
  background: #edeff1;
  margin: 0px auto;
  padding-top: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
input[type="text"]{
  display: block;
  width: 309px;
  height: 35px;
  margin: 15px auto;
  background: #fff;
  border: 0px;
  padding: 5px;
  font-size: 16px;
   border: 2px solid #fff;
  transition: all 0.3s ease;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
input[type="text"]:focus{
  border: 2px solid #31b6f4
}
input[type="submit"]{
  display: block;
  background: #31b6f4;
  width: 314px;
  padding: 12px;
  cursor: pointer;
  color: #fff;
  border: 0px;
  margin: auto;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  font-size: 17px;
  transition: all 0.3s ease;
}
input[type="submit"]:hover{
  background: #09cca6
}
a{
  text-align: center;
  font-family: Arial;
  color: gray;
  display: block;
  margin: 15px auto;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 12px;
}
a:hover{
  color: #31b6f4;
}
::-webkit-input-placeholder {
   color: gray;
}
:-moz-placeholder { /* Firefox 18- */
   color: gray;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: gray;  
}
:-ms-input-placeholder {  
   color: gray;  
}
</style>

Langkah Ketiga

Setelah semua script anda ketik, sekarang saatnya anda menyimpan hasil ketikan tersebut dengan nama "login.html".

Silahkan jalankan file .html tersebut dengan browser. Maka hasilnya akan sama seperti gambar diatas.

Cukup sekian artikel saya tentang Cara Membuat Template Login dengan HTML + CSS.
Untuk kemajuan blog ini, please Subscribe and Share, Terimakasih.