Guest User

Untitled

a guest
Mar 17th, 2018
144
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.24 KB | None | 0 0
  1. form {
  2. border: 3px solid #f1f1f1;
  3. }
  4.  
  5. /* Full-width inputs */
  6. input[type=text], input[type=password] {
  7. width: 100%;
  8. padding: 10px 5px;
  9. margin: 8px 0;
  10. display: inline-block;
  11. border: 1px solid #ccc;
  12. box-sizing: border-box;
  13. align-content: center;
  14. }
  15.  
  16. /* Set a style for all buttons */
  17. button {
  18. background-color: #4CAF50;
  19. color: white;
  20. margin: 8px 0;
  21. border: none;
  22. cursor: pointer;
  23. width: 80px;
  24. height: 25px;
  25. padding: 3px 22px 0 0;
  26. font-size: 12px;
  27. font-weight: bold;
  28. text-align: center;
  29. text-decoration: none;
  30.  
  31. }
  32.  
  33. /* Add a hover effect for buttons */
  34. button:hover {
  35. opacity: 0.8;
  36. }
  37.  
  38. /* Extra style for the cancel button (red) */
  39. .cancelbtn {
  40. width: auto;
  41. padding: 10px 18px;
  42. background-color: #f44336;
  43. }
  44.  
  45. /* Center the avatar image inside this container */
  46. .imgcontainer {
  47. text-align: center;
  48. margin: 24px 0 12px 0;
  49. }
  50.  
  51. /* Avatar image */
  52. img.avatar {
  53. width: 40%;
  54. border-radius: 50%;
  55. }
  56.  
  57. /* Add padding to containers */
  58. .container {
  59. margin: 25px auto;
  60. position: relative;
  61. width: 900px;
  62. }
  63.  
  64. /* The "Forgot password" text */
  65. span.psw {
  66. float: right;
  67. padding-top: 16px;
  68. }
  69.  
  70. /* Change styles for span and cancel button on extra small screens */
  71. @media screen and (max-width: 300px) {
  72. span.psw {
  73. display: block;
  74. float: none;
  75. }
  76. .cancelbtn {
  77. width: 100%;
  78. }
  79. }
  80.  
  81. <html>
  82. <head>
  83. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  84. <title>Student Profile</title>
  85. <link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
  86.  
  87. </head>
  88. <body>
  89.  
  90. <form action="index.jsp">
  91.  
  92.  
  93. <div class="container">
  94. Username:
  95. <input type="text" placeholder="Enter Username" name="uname" required>
  96.  
  97. Password:
  98. <input type="password" placeholder="Enter Password" name="psw" required>
  99.  
  100. <button type="submit">Login</button>
  101. <label>
  102. <input type="checkbox" checked="checked" name="remember"> Remember me
  103. </label>
  104. </div>
  105.  
  106. <div class="container" style="background-color:#f1f1f1">
  107. <button type="button" class="cancelbtn">Cancel</button>
  108. <span class="psw">Forgot <a href="#">password?</a></span>
  109. </div>
  110. </form>
  111.  
  112. </body>
  113. </html>
Add Comment
Please, Sign In to add comment