Latest News
» » » Cara Menciptakan Form Login Seolah-Olah Adf.Ly

Cara Menciptakan Form Login Seolah-Olah Adf.Ly

Hold
Add Comment
Programming, Tips And Trik
Sunday, 3 September 2017

Pada artikel ini saya akan mmebritahu sebuah trik dan juga membagikan Source Code sebuah HTML dan CSS menyerupai form login adf.ly menyerupai di https://login.adf.ly/login memang enggak 100% menyerupai sih tapi ya namanya juga tiruan artikel ini hanya untuk mencar ilmu semata atau hanya untuk memahami sintaks sintaks HTML dan CSS nya saja saya akan mencoba menjelaskanya dsini sedikit.
Untuk membuatnya saya memiliki wangsit bagaimana saya memerlukan sebuah wadah yang di berinama wrapper saya disini tidak memakai footer, melaikan saya memakai sebuah perintah form dan didalam form disini table untuk sintak HTMLnya menyerupai 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 bertahap 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 menyerupai 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 terang pas dikala mengkoneksikanya, kalau anda kebingungan silahkan download sja file saya melalui akun dropbox saya disini


0 Response to "Cara Menciptakan Form Login Seolah-Olah Adf.Ly"

Subscribe to: Post Comments (Atom)