Membuat Form Login Keren : Blue Electro

Posted by   on Pinterest

Membuat Form Login Keren : Blue Electro sangatlah mudah hanya saja perlu pemahaman yang lebih agar bisa membuatnya sendiri dan selain itu dengan memahami coding apa yang kita ketik, kita tidak perlu lagi yang namanya googling. kan sudah hafal dengan code tersebut.

nah langsung saja kita buat form loginnya dan berikut codingnya :
1. kita harus buat yang namanya index.php / index.html dengan script di bawah
<html>
<head>
<title>Blue Electro Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
  <br>
       <form action="" method="post">
   <h2>BLUE ELECTRO</h2><br>

   <label>Username :</label>
   <input id="name" name="username" placeholder="username" type="text">

   <label>Password :</label>
   <input id="password" name="password" placeholder="**********" type="password">

   <center><input type="submit" name="submit" id="submit" value="Login"></center><br>
      <center><input type="submit1" name="daftar" id="daftar" value="Sing-Up"></center>
    </form>
   </div>
</body>
</html>

2. selanjutnya kalian buat file style.css dengan script dibawah ini
body{
background: url('img/1.jpg');
background-repeat:no-repeat;
background-size:cover;
color: #fff;
}
.container {
width: 30%;
margin-top: 10%;
border-radius:15px;
margin-left: 35%;
background: url('img/2.jpg');
  background-repeat:no-repeat;
background-size:cover;
padding: 20px 25px;
opacity:0.9;filter:alpha(opacity=5);
box-shadow: 6px 8px 8px 6px #DCDCDC;
}
h2{
 background-color: #F0FFFF;
 padding: 10px 10px;
 margin: -10px -50px;
 text-align:center;
 color: BLUE;
 font-family: arial;
}


input[type=text]{
 width: 100%;
 height: 50px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: grey;
 font-size: 16px;
 font-family: arial;
}
input[type=password]{
 width: 100%;
height: 50px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: grey;
 font-size: 16px;
}

label{
 color: #00FFFF;
 text-shadow: 0 1px 0 BLACK;
 font-size: 15px;
 font-weight: bold;
 font-family: arial;
}

input[type=submit]{
 font-size: 16px;
 color: BLACK;
 font-weight: bold;
 cursor: pointer;
 width: 100%;
 padding: 10px 0;
 outline:none;
}
input[type=submit1]{
text-align:center;
 font-size: 16px;
 color: BLACK;
 font-weight: bold;
 cursor: pointer;
 width: 50%;
 padding: 10px 0;
 outline:none;
}

3. kalian buat folder img lalu download gambar dibawah ini

beri nama "1.jpg" dan "2.jpg" pada gambar di atas tanpa petik taruh di dalam foldernya

4. kumpulkan jadi satu semua file yang sudah di buat tadi, seperti gambar di bawah ini


lalu kalian bisa test deh di firefox kalian
dan hasilnya bisa kalian lihat seperti gambar di postingan ini

Tidak ada komentar:
Write komentar