A Pen by Kshaunish

Thumbnail
This awesome code was written by Kingkoderkims, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Kingkoderkims ©
  • HTML
  • CSS
  • JavaScript
    <form action="/action_page.php">
  <div class="imgcontainer">
    <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/">
  </div>

  <div class="container">
    <label><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit"><a href=https://codepen.io/Kingkoderkims/pen/MEQMNa>Login</a></button>
    <input type="checkbox" checked="checked"> Remember me
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

  

/*Downloaded from https://www.codeseek.co/Kingkoderkims/a-pen-by-kshaunish-GMQbyQ */
    /* Bordered form */
form {
    border: 3px solid #f1f1f1;
}

/* Full-width inputs */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button {
    background-color: black;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Add a hover effect for buttons */
button:hover {
    opacity: 0.8;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the avatar image inside this container */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
    width: 40%;
    border-radius: 50%;
}

/* Add padding to containers */
.container {
    padding: 16px;
}

/* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }
    .cancelbtn {
        width: 100%;
     
    }
}


h1{
  font-family: Georgia;
  text-align: center;
}


/*Downloaded from https://www.codeseek.co/Kingkoderkims/a-pen-by-kshaunish-GMQbyQ */
    

Comments