Cara Membuat Form Login Mirip Adf.ly

Pada artikel ini saya akan mmebritahu sebuah trik dan juga membagikan Source Code sebuah HTML dan CSS seperti form login adf.ly seperti di https://login.adf.ly/login memang enggak 100% mirip sih tapi ya namanya juga tiruan artikel ini hanya untuk belajar semata atau hanya untuk memahami sintaks sintaks HTML dan CSS nya saja saya akan mencoba menjelaskanya dsini sedikit.
Untuk membuatnya saya mempunyai ide bagaimana saya memerlukan sebuah wadah yang di berinama wrapper saya disini tidak menggunakan footer, melaikan saya menggunakan sebuah perintah form dan didalam form disini table untuk sintak HTMLnya seperti diabawah ini:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>AdFly – The URLShorten </title>
  5. </head>
  6. <link rel=”stylesheet” type=”text/css” href=”style.css”>
  7. <body>
  8. <div class=”wrapper”>
  9. <header>
  10. <h1><img src=”favicon.ico”> 
  11.    <span style=”color: yellow”> adf</span>.ly</h1>
  12. </header>
  13. <div class=”info”>
  14. <h2>Log in to your account…</h2>
  15. </div>
  16. <div class=”login”>
  17. <div class=”fb”>
  18. <button><img width=”350″ height=”50″ src=”loginfacebook.png”></button>
  19. </div>
  20. <form>
  21. <table >
  22. <tr>
  23. <td><input placeholder=”Your Email” type=”text” name=””></td>
  24. </tr>
  25. <tr>
  26. <td><input  placeholder=”Password” type=”Password” name=””></td>
  27. </tr>
  28. </table>
  29. <button type=”submit”>Login</button>
  30. <div class=”lupa”>
  31. <input type=”checkbox” name=””>
  32. <p></p>
  33. <label>  Remember Me?</label>
  34. <h5> <a href=”#” style=”color: brown” > Forgot yor password</a></h5>
  35. </div>
  36. </form>
  37. </div>
  38. <div class=”need” >
  39. <label>
  40. <a href=”#” style=”color: white”>Need an account?<strong>Sign up for one now.</strong></a> /label>
  41. </div>
  42. </div>

  43. </body>
  44. </html>
Meski dikatakan terbilang cukup sulit bagi saya tapi sedikit demi sedikit maka saya cukup udah deh berhasil dan sayapun menggunkan CSS Eksternal atau dengan kata lain tidak menyisipkan CSS dalam 1 tab ddn HTML dan CSS nyapun seperti dibawah ini
  1. body{
  2. background-color: #21588b;
  3.     font-family: Arial,sans-serif;
  4. }
  5. .wrapper{
  6. width: 400px;
  7. height: 1000px;
  8. margin: 0 auto;
  9. margin-top: 100px;
  10. height: 500px;
  11. }
  12. header{
  13. width: 300px;
  14. margin-left: 50px;
  15. height: auto;
  16. }
  17. header h1{
  18. margin-top: 0px;
  19. color: white;
  20. }
  21. header img{
  22. width: 50px;margin-left: 60px;
  23. }
  24. .info{
  25. background-color: #ffedb2;
  26. height: 50px;
  27. height: 40px;
  28. padding: 5px;
  29. }
  30. .info h2{
  31. margin-left: 20px;
  32. color: #59564c;
  33. }
  34. .login{
  35. background-color: white;
  36. height: auto;
  37. width: 360px;
  38. padding: 20px;
  39. }
  40. .fb{
  41. width: 400px;
  42. margin-top: 0px;
  43. width: auto;
  44. padding: 0px 0px 15px 0px;
  45. }
  46. .fb h1{
  47. margin-top: 0px;
  48. }
  49. .fb button {
  50. width: 360px;
  51. height: 60px;
  52. cursor: pointer;
  53. }
  54. .fb{
  55. border-bottom: 1px solid;
  56. }
  57. form{
  58. margin-top: 20px;
  59. }
  60. input{
  61. width: 350px;
  62. border: 1px solid;
  63. border-color: #59564c;
  64. height: 40px;
  65. }
  66. button[type=”submit”] {
  67. background-color: #ffdc70;
  68. height: 50px;
  69. width: 200px;
  70. margin-top: 10px;
  71. cursor: pointer;
  72. }
  73. .lupa{
  74. width: 150px;
  75. height: 50px;
  76. float: right;
  77. margin-top: 8px;
  78. }
  79. .lupa label{
  80. width: 100px;
  81. line-height: initial;
  82. font-size: 12px;
  83. margin-left: 2px;
  84. }
  85. .lupa input[type=”checkbox”]{
  86. margin-left: 0px;
  87. width: 0px;
  88. margin-top: 0px;
  89. float: left;
  90.     padding: 0;
  91. }
  92. h5{
  93. margin-top: 0px;
  94. width: auto;
  95. border: 1px solid
  96. margin-top:10px;
  97. }
  98. h5 a{
  99. text-decoration: none;
  100. margin-top: 20px;
  101. font-size: 10px;
  102. .need{
  103. font-size: 15px;
  104. margin-top: 5px;
  105. }
  106. .need a{
  107. text-decoration: none;
  108. }
Baca Juga:  Cara ROOT dan install TWRP di Samsung J2 Prime SM-G532G

Untuk nama css dan htmlnya terserah saja asalkan harus jelas pas saat mengkoneksikanya, bila anda kebingungan silahkan download sja file saya melalui akun dropbox saya disini

Check Also

Custom ROM AEX/AOSP EXTENDED Nougat untuk Andromax A (A16C3H)

Custom ROM AEX/AOSP EXTENDED Nougat untuk Andromax A (A16C3H) Hallo guys lama nih gak update …