Creating Login Form In CSS

Here, we will use a few tags of HTML and some properties of CSS which are-
HTML tags
  • div
  • label
  • form etc
CSS property
  • margin
  • padding
  • text-align
  • color
  • background-color etc
Let's start coding...
HTML code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>login</title>
  5. <link rel="stylesheet" type="text/css" href="logincss.css">
  6. </head>
  7. <body>
  8. <div class="main">
  9. <div class="in">
  10. <h1>Login</h1>
  11. <img src="log.png">
  12. <form class="fm">
  13. <label>User Id:</label>
  14. <input type="text" value="Username">
  15. <br>
  16. <label>Password:</label>
  17. <input type="password" value="123">
  18. </form>
  19. </div>
  20. <div class="bcon">
  21. <button class="btn">Submit</button>
  22. <br>
  23. </div>
  24. </div>
  25. </body>
  26. </html>
CSS code
  1. body {
  2. margin: 0;
  3. }
  4. .main {
  5. background - color: #f7f7f7;
  6. max - width: 25 %;
  7. text - align: center;
  8. font - family: "Bauhaus 93";
  9. color: #06a7e2;
  10. margin-top: 2%;
  11. margin-left: 35%;
  12. }
  13. .in img {
  14. max-width: 60%;
  15. max-width: 60%;
  16. }
  17. .fm {
  18. display: block;
  19. color: # bdbdbd;
  20. font - family: "Castellar";
  21. margin - left: 2 %;
  22. margin - top: 2 %;
  23. padding: 2 %;
  24. width: 80 %;
  25. }
  26. .fm input {
  27. padding: 2 %;
  28. margin: 2 %;
  29. color: #06a7e2;
  30. width: 100%;
  31. }
  32. .btn {
  33. background-color: #06a7e2;
  34. color: white;
  35. text - decoration: none;
  36. padding: 15 px 32 px;
  37. border: none;
  38. font - size: 100 %;
  39. }
  40. .btn: hover {
  41. opacity: 0.9;
  42. }
  43. .bcon {
  44. width: 100 %;
  45. height: 100 %;
  46. }
  47. label {
  48. float: left;
  49. }
Output
a