Advertisement
wildanfuady

Login Form

Dec 8th, 2019
634
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.78 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Login</title>
  5. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  6. <style>
  7. body{
  8. background: #14214d;
  9. }
  10. .left{
  11. margin-left: 200px;
  12. margin-top: 200px;
  13. width: 500px;
  14. height: 400px;
  15. background: #44c7f5;
  16. float: left;
  17. color: white;
  18. font-family: Arial, Helvetica, sans-serif;
  19. padding-left: 50px;
  20. padding-top: 100px;
  21. }
  22. .left h1{
  23. font-size: 40px;
  24. }
  25. .left input[type=radio] {
  26. border: 0px;
  27. width: 30px;
  28. height: 2em;
  29. border: none;
  30. outline: none;
  31. }
  32. .left span{
  33. font-size: 30px;
  34. margin-top: 0px;
  35. }
  36. .right{
  37. padding-left: 50px;
  38. padding-top: 100px;
  39. margin-top: 200px;
  40. width: 500px;
  41. height: 400px;
  42. background: #ffffff;
  43. float: left;
  44. }
  45. .right h1{
  46. color: #44c7f5;
  47. font-family: Arial, Helvetica, sans-serif;
  48. }
  49. .right input[type=text]{
  50. width: 300px;
  51. padding: 20px;
  52. border-left: transparent;
  53. border-right: transparent;
  54. border-top: transparent;
  55. border-bottom: 1px solid #8a8686;
  56. }
  57. .btn-login{
  58. margin-top: 100px;
  59. background: transparent;
  60. border: none;
  61. padding: 15px 30px;
  62. border-radius: 20px;
  63. border: 2px solid aqua;
  64. color: aqua;
  65. float: left;
  66. }
  67. .btn-login:hover{
  68. border: 2px solid black;
  69. color: black;
  70. }
  71. .or-login{
  72. margin-top: 115px;
  73. margin-left:80px;
  74. margin-right:30px;
  75. font-size: 20px;
  76. color: grey;
  77. float: left
  78. }
  79. .social-media{
  80. margin-top: 110px;
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <div class="left">
  86. <h1>Login Static Form</h1>
  87. <input type="radio"> <span>Pilihan 1</span>
  88. <br>
  89. <input type="radio"> <span>Pilihan 1</span>
  90. <br>
  91. <input type="radio"> <span>Pilihan 1</span>
  92. </div>
  93. <div class="right">
  94. <h1>Login</h1>
  95. <input type="text" placeholder="Email">
  96. <br>
  97. <input type="text" placeholder="Password">
  98. <br>
  99. <button class="btn-login">LOGIN</button>
  100. <div class="or-login">Or Login with </div>
  101. <div class="social-media">
  102. <i class="fab fa-facebook" style="color: blue;font-size: 35px"></i>
  103. <i class="fab fa-twitter-square" style="color: aqua;font-size: 35px"></i>
  104. <i class="fab fa-google-plus" style="color: red;font-size: 35px"></i>
  105. </div>
  106. </div>
  107. </body>
  108. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement