Skip to main content
Home Programming Tips And Trik Cara Membuat Form Login Mirip Adf.ly

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>

  13. </header>
  14. <div class="info">
  15. <h2>Log in to your account...</h2>
  16. </div>
  17. <div class="login">
  18. <div class="fb">
  19. <button><img width="350" height="50" src="loginfacebook.png"></button>
  20. </div>
  21. <form>
  22. <table >
  23. <tr>
  24. <td><input placeholder="Your Email" type="text" name=""></td>
  25. </tr>
  26. <tr>
  27. <td><input  placeholder="Password" type="Password" name=""></td>
  28. </tr>
  29. </table>
  30. <button type="submit">Login</button>
  31. <div class="lupa">
  32. <input type="checkbox" name="">
  33. <p></p>
  34. <label>  Remember Me?</label>
  35. <h5> <a href="#" style="color: brown" > Forgot yor password</a></h5>
  36. </div>
  37. </form>
  38. </div>
  39. <div class="need" >
  40. <label>
  41. <a href="#" style="color: white">Need an account?<strong>Sign up for one now.</strong></a> /label>
  42. </div>
  43. </div>

  45. </body>
  46. </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
  2. body{
  3. background-color: #21588b;
  4.     font-family: Arial,sans-serif;
  5. }
  6. .wrapper{
  7. width: 400px;
  8. height: 1000px;
  9. margin: 0 auto;
  10. margin-top: 100px;
  11. height: 500px;
  12. }
  13. header{
  14. width: 300px;
  15. margin-left: 50px;
  16. height: auto;
  17. }
  18. header h1{
  19. margin-top: 0px;
  20. color: white;
  21. }
  22. header img{
  23. width: 50px;margin-left: 60px;
  24. }
  25. .info{
  26. background-color: #ffedb2;
  27. height: 50px;
  28. height: 40px;
  29. padding: 5px;
  30. }
  31. .info h2{
  32. margin-left: 20px;
  33. color: #59564c;
  34. }
  35. .login{
  36. background-color: white;
  37. height: auto;
  38. width: 360px;
  39. padding: 20px;
  40. }
  41. .fb{
  42. width: 400px;
  43. margin-top: 0px;
  44. width: auto;
  45. padding: 0px 0px 15px 0px;
  46. }
  47. .fb h1{
  48. margin-top: 0px;
  49. }
  50. .fb button {
  51. width: 360px;
  52. height: 60px;
  53. cursor: pointer;
  54. }
  55. .fb{
  56. border-bottom: 1px solid;
  57. }
  58. form{
  59. margin-top: 20px;
  60. }
  61. input{
  62. width: 350px;
  63. border: 1px solid;
  64. border-color: #59564c;
  65. height: 40px;
  66. }
  67. button[type="submit"] {
  68. background-color: #ffdc70;
  69. height: 50px;
  70. width: 200px;
  71. margin-top: 10px;
  72. cursor: pointer;
  73. }
  74. .lupa{
  75. width: 150px;
  76. height: 50px;
  77. float: right;
  78. margin-top: 8px;

  80. }
  81. .lupa label{
  82. width: 100px;
  83. line-height: initial;
  84. font-size: 12px;
  85. margin-left: 2px;
  86. }
  87. .lupa input[type="checkbox"]{
  88. margin-left: 0px;
  89. width: 0px;
  90. margin-top: 0px;
  91. float: left;
  92.     padding: 0;
  93. }
  94. h5{
  95. margin-top: 0px;
  96. width: auto;
  97. border: 1px solid
  98. margin-top:10px;

  100. }
  101. h5 a{
  102. text-decoration: none;
  103. margin-top: 20px;
  104. font-size: 10px;
  105. } 
  106. .need{
  107. font-size: 15px;
  108. margin-top: 5px;
  109. }
  110. .need a{
  111. text-decoration: none;
  112. }
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


You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar