Membuat Form Daftar Keren : Blue Electro


Setelah pembuatan form login blue electro sekarang kita membahas tentang pembuatan form pendaftaran blue electro bahannya hampir sama hanya saja perbedaan ada pada background body dan background containernya, saya menukarnya gambar 1 saya ganti menjadi gambar 2 hanya itu saja sih perbedaannya. terus perunahan yang lain adalah pada input text yang mana disana bertambah label email dan label re-type password.
seperti halnya yang kemarin kita membuat filenya lagi seperti awal yaitu dengan cara :
1. membuat file index.html/php lalu copykan script yang di bawah ini.
<html>
<head>
<title>Blue Electro Sign Up</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>Email :</label>
   <input id="name" name="username" placeholder="username" type="text">
 
      <label>Password :</label>
   <input id="password" name="password" placeholder="**********" type="password">
 
      <label>Re-Type Password :</label>
   <input id="password" name="password" placeholder="**********" type="password">

   <center><input type="submit" name="submit" id="submit" value="Create Account"></center><br>
      <center><input type="submit1" name="login" id="login" value="Login"></center>
    </form>
   </div>
</body>
</html>
2. selanjutnya buatlah file style.css lalu copy scriptnya.
body{
background: url('img/2.jpg');
  background-repeat:no-repeat;
background-size:cover;
color: #fff;
}
.container {
width: 30%;
margin-top: 5%;
border-radius:15px;
margin-left: 35%;
background: url('img/1.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: #000080;
 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. buat foldernya dan berinama img lalu isi dengan gambar yang ada pada pembuatan form login atau pada postingan yang disini

4. setelah kalian pastikan semuanya sudah ada pada posisinya kalian bisa langsung mencobanya menggunakan browser.

selesai deh, semoga bermanfaat.
Load disqus comments

0 komentar