cara membuat halaman login dengan HTML+CSS

halaman login adalah suatu halaman yang sangat memiliki banyak fungsi selain sebagai login user halam login juga berguna untuk membuat user maupun mempercantik tampilan web, memang banyak cara membuat halaman login entah itu menggunakan HTML, LARAVEL, maupun bahasa pemrograman yg lainya. namun pada kesempatan ini kita akan cara membuat halaman login dengan HTML+CSS.

ini termasuk bahasa pemrograman dasar yang mana HTML digunakan untuk Mendesign LAYOUT sebuah web kemudian di percantik dengan CSS yang mana kedua ini saling melengkapi. oke tanpa lama-lama lagi kita akan membuat sebuah halaman login kurang lebih seperti ini :

mengapa menggunakan HTML + CSS

disini saya menggunkan html dan css karena pada tutorial ini saya tujukan pada anda yang masih mendalami html dan css secara dasar jadi disini saya menggunakan html dan CSS namun insyalah kedepan bakal lebih ditingkatkan

membuat halaman login dengan HTML+CSS

baik berikut ini akan saya sampaikan cara membuat halaman loginya silahkan anda simak secara baik-baik:

  • silahkan anda gunakan aplikasi editor untuk koding yang biasa anda gunakan disini saya menyarankan SUBLIME TEXT
  • buat folder pada komputer contoh disini saya membuat folder dengan nama SIGN in

  • setelah anda masuk ke sublime text langkah berikutnya silahkan anda bisa mengcopy source code index.html berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login Minto.ID</title>
<link rel="stylesheet" href="style.css">
<link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body>
<div class="signin">
<div class="signin-header">
<h1><i class="ion-md-log-in"></i> Sign In</h1>
</div>
<div class="signin-body">
<form action="">
<div class="icon">
<input type="text" placeholder="Email or username" autofocus>
<i class="ion-md-person ion-icon"></i>
</div>
<div class="icon">
<input type="password" placeholder="Password">
<i class="ion-md-lock ion-icon"></i>
</div>
<button type="submit">Submit <i class="ion-md-send"></i></button>
</form>
</div>
<div class="signin-footer">
<p>&copy; minto.id 2020</p>
</div>
</div>
</body>
</html>
  • simpan di direktory SIGN IN yang anda buat tadi dengan nama index.html 
  • kemudian silahkan anda buat lembar kerja baru pada text editor anda, anda bisa menggunkan CTRL+N
  • dan kemudian silahkan pastekan STYLE.CSS berikut
*{
box-sizing: border-box;
font-family: 'Sofia Pro';
margin: 0;
padding: 0;
}
body{
background-color: #004f74;
}
.signin{
color: #fff;
margin: 100px auto;
width: 400px;
}
.signin-header{
padding: 10px 0;
}
.signin-body{
margin: 15px 0;
}
.signin-body input::placeholder{
color: #fff;
}
.signin-body input{
background: none;
border: none;
border-bottom: 2px soild #fff;
color: #fff;
font-size: 18px;
margin-bottom: 18px;
padding: 10px 0 10px 50px;
width: 100%;
}
.signin-body button{
background: none;
border: 2px solid #fff;
color: #fff;
cursor: pointer;
font-size: 18px;
margin-top: 20px;
padding: 10px; 
width: 100%;
}
.signin-body button:hover{
background-color: #fff;
color: #004f74;
}
.signin-footer{
padding: 7px;
text-align: center;
}
.icon{
position: relative;
}
.ion-icon{
font-size: 20px;
position: absolute;
top: 10px;
left: 15px;
}
.signin-body input:focus,
.signin-body button:focus{
outline: none;
}
  • simpan di direktory SIGN IN yang anda buat tadi dengan nama STYLE.CSS bebarengan dengan index.html
  • kurang lebih anda simpan pada direktori seperti ini

  • kemudian anda bisa membuka file index.html pada chrome atau anda bisa melakukanya dengan mengklik 2 kali pada file index.html maka taraaa tampilan login berhasil dibuat

mungkin itu saja tutorial cara membuat halaman login dengan HTML+CSS silahkan share ke temen-temen agan agar bisa bermanfaat terimkasih sudah berkunjung semoga bisa bermanfaat untuk website agan

BACA JUGA :

75 thoughts on “cara membuat halaman login dengan HTML+CSS”