daily pastebin goal
83%
SHARE
TWEET

Untitled

a guest Mar 17th, 2018 81 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand