Frontend Free Code
Frontend Free Code
Developers Codes
Graphics Photo
Crypto World
Code Tutorial
Javascript Codes
Home Home How to How to use Sitemap Sitemap About us About Us Suggested Posts Suggested Privacy Policy Privacy Policy

Feel The Power


content logo

Bootstrap Forms:

Material Design Login Form using Bootstrap

Previous CodePrevious Code Next CodeNext Code

The design of the login part is so crucial in attracting visitors. When people enter your website, they face the login section at first glance; Therefore, you have to be so careful about the design of this section. We have provided the Material Design Login Form using Bootstrap with an attractive theme and design in this post. This MD Login Form Code is so creative and has a beautiful design. This Free Bootstrap Form Code has a white background. There is a small pink line on the left side of the page. Plus, the title is also pink.

In the first part, you can see two fields for username and password. Each one has a line under the title. There is a confirmation option at the bottom of the page, and if you forget your password, you can select the “forget your password” option. The HTML Material Design Form has a plus option on the right side with pink color. If you click on this part, you face a pink page related to registration. The writings of this part are white. In this section of these JS Bootstrap Forms, the users must fill the fields and click the “Next” option.

#

JS Bootstrap Forms

#

Free Bootstrap Form Code

#

HTML Material Design Form

#

MD Login Form Code

<!-- This script got from frontendfreecode.com -->
<div class="pen-title">
    <h1>Material Login Form</h1>
</div>
<div class="container">
    <div class="card"></div>
    <div class="card">
        <h1 class="title">Login</h1>
        <form>
            <div class="input-container">
                <input type="text" id="Username" required="required" />
                <label for="Username">Username</label>
                <div class="bar"></div>
            </div>
            <div class="input-container">
                <input type="password" id="Password" required="required" />
                <label for="Password">Password</label>
                <div class="bar"></div>
            </div>
            <div class="button-container">
                <button><span>Go</span></button>
            </div>
            <div class="footer"><a href="#">Forgot your password?</a></div>
        </form>
    </div>
    <div class="card alt">
        <div class="toggle"></div>
        <h1 class="title">
            Register
            <div class="close"></div>
        </h1>
        <form>
            <div class="input-container">
                <input type="text" id="Username" required="required" />
                <label for="Username">Username</label>
                <div class="bar"></div>
            </div>
            <div class="input-container">
                <input type="password" id="Password" required="required" />
                <label for="Password">Password</label>
                <div class="bar"></div>
            </div>
            <div class="input-container">
                <input type="password" id="Repeat Password" required="required" />
                <label for="Repeat Password">Repeat Password</label>
                <div class="bar"></div>
            </div>
            <div class="button-container">
                <button><span>Next</span></button>
            </div>
        </form>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    background: #e9e9e9;
    color: #666666;
    font-family: "RobotoDraft", "Roboto", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Pen Title */
.pen-title {
    padding: 20px 0;
    text-align: center;
    letter-spacing: 2px;
}
.pen-title h1 {
    margin: 0 0 20px;
    font-size: 40px;
    font-weight: 300;
}
.pen-title span {
    font-size: 12px;
}
.pen-title span .fa {
    color: #ed2553;
}
.pen-title span a {
    color: #ed2553;
    font-weight: 600;
    text-decoration: none;
}
/* Rerun */
.rerun {
    margin: 0 0 30px;
    text-align: center;
}
.rerun a {
    cursor: pointer;
    display: inline-block;
    background: #ed2553;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    padding: 10px 20px;
    color: #ffffff;
    text-decoration: none;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.rerun a:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/* Scroll To Bottom */
#codepen,
#portfolio {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #ec2652;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    color: #ffffff;
    text-align: center;
}
#codepen i,
#portfolio i {
    line-height: 56px;
}
#codepen:hover,
#portfolio:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
/* CodePen */
#portfolio {
    bottom: 96px;
    right: 36px;
    background: #ec2652;
    width: 44px;
    height: 44px;
    -webkit-animation: buttonFadeInUp 1s ease;
    animation: buttonFadeInUp 1s ease;
}
#portfolio i {
    line-height: 44px;
}
/* Container */
.container {
    position: relative;
    max-width: 460px;
    width: 100%;
    margin: 0 auto 100px;
}
.container.active .card:first-child {
    background: #f2f2f2;
    margin: 0 15px;
}
.container.active .card:nth-child(2) {
    background: #fafafa;
    margin: 0 10px;
}
.container.active .card.alt {
    top: 20px;
    right: 0;
    width: 100%;
    min-width: 100%;
    height: auto;
    border-radius: 5px;
    padding: 60px 0 40px;
    overflow: hidden;
}
.container.active .card.alt .toggle {
    position: absolute;
    top: 40px;
    right: -70px;
    box-shadow: none;
    -webkit-transform: scale(14);
    transform: scale(15);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.container.active .card.alt .toggle:before {
    content: "";
}
.container.active .card.alt .title,
.container.active .card.alt .input-container,
.container.active .card.alt .button-container {
    left: 0;
    opacity: 1;
    visibility: visible;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.container.active .card.alt .title {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.container.active .card.alt .input-container {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.container.active .card.alt .input-container:nth-child(2) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.container.active .card.alt .input-container:nth-child(3) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.container.active .card.alt .button-container {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}
/* Card */
.card {
    position: relative;
    background: #ffffff;
    border-radius: 5px;
    padding: 60px 0 40px 0;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    /* Title */
    /* Inputs */
    /* Button */
    /* Footer */
    /* Alt Card */
}
.card:first-child {
    background: #fafafa;
    height: 10px;
    border-radius: 5px 5px 0 0;
    margin: 0 10px;
    padding: 0;
}
.card .title {
    position: relative;
    z-index: 1;
    border-left: 5px solid #ec2652;
    margin: 0 0 35px;
    padding: 10px 0 10px 50px;
    color: #ec2652;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
}
.card .input-container {
    position: relative;
    margin: 0 60px 50px;
}
.card .input-container input {
    outline: none;
    z-index: 1;
    position: relative;
    background: none;
    width: 100%;
    height: 54px;
    border: 0;
    color: #212121;
    font-size: 20px;
    font-weight: 400;
}
.card .input-container input:focus ~ label {
    color: #9d9d9d;
    -webkit-transform: translate(-12%, -50%) scale(0.75);
    transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container input:focus ~ .bar:before,
.card .input-container input:focus ~ .bar:after {
    width: 50%;
}
.card .input-container input:valid ~ label {
    color: #9d9d9d;
    -webkit-transform: translate(-12%, -50%) scale(0.75);
    transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container label {
    position: absolute;
    top: 0;
    left: 0;
    color: #757575;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
}
.card .input-container .bar {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #757575;
    width: 100%;
    height: 1px;
}
.card .input-container .bar:before,
.card .input-container .bar:after {
    content: "";
    position: absolute;
    background: #ec2652;
    width: 0;
    height: 2px;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
}
.card .input-container .bar:before {
    left: 50%;
}
.card .input-container .bar:after {
    right: 50%;
}
.card .button-container {
    margin: 0 60px;
    text-align: center;
}
.card .button-container button {
    outline: 0;
    cursor: pointer;
    position: relative;
    display: inline-block;
    background: 0;
    width: 240px;
    border: 2px solid #e3e3e3;
    padding: 20px 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    overflow: hidden;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.card .button-container button span {
    position: relative;
    z-index: 1;
    color: #ddd;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.card .button-container button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    background: #ec2652;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin: -15px 0 0 -15px;
    opacity: 0;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.card .button-container button:hover,
.card .button-container button:active,
.card .button-container button:focus {
    border-color: #ec2652;
}
.card .button-container button:hover span,
.card .button-container button:active span,
.card .button-container button:focus span {
    color: #ec2652;
}
.card .button-container button:active span,
.card .button-container button:focus span {
    color: #ffffff;
}
.card .button-container button:active:before,
.card .button-container button:focus:before {
    opacity: 1;
    -webkit-transform: scale(10);
    transform: scale(10);
}
.card .footer {
    margin: 40px 0 0;
    color: #d3d3d3;
    font-size: 24px;
    font-weight: 300;
    text-align: center;
}
.card .footer a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.card .footer a:hover {
    color: #bababa;
}
.card.alt {
    position: absolute;
    top: 40px;
    right: -70px;
    z-index: 10;
    width: 100px;
    height: 100px;
    background: none;
    border-radius: 100%;
    box-shadow: none;
    padding: 0;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    /* Toggle */
    /* Title */
    /* Input */
    /* Button */
}
.card.alt .toggle {
    position: relative;
    background: #ec2652;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: #ffffff;
    font-size: 42px;
    line-height: 100px;
    text-align: center;
    cursor: pointer;
}
.card.alt .toggle:before {
    content: "\f067";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.card.alt .title,
.card.alt .input-container,
.card.alt .button-container {
    left: 100px;
    opacity: 0;
    visibility: hidden;
}
.card.alt .title {
    position: relative;
    border-color: #ffffff;
    color: #ffffff;
}
.card.alt .title .close {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 60px;
    display: inline;
    color: #ffffff;
    font-size: 58px;
    font-weight: 400;
}
.card.alt .title .close:before {
    content: "\00d7";
}
.card.alt .input-container input {
    color: #ffffff;
}
.card.alt .input-container input:focus ~ label {
    color: #ffffff;
}
.card.alt .input-container input:focus ~ .bar:before,
.card.alt .input-container input:focus ~ .bar:after {
    background: #ffffff;
}
.card.alt .input-container input:valid ~ label {
    color: #ffffff;
}
.card.alt .input-container label {
    color: rgba(255, 255, 255, 0.8);
}
.card.alt .input-container .bar {
    background: rgba(255, 255, 255, 0.8);
}
.card.alt .button-container button {
    width: 100%;
    background: #ffffff;
    border-color: #ffffff;
}
.card.alt .button-container button span {
    color: #ec2652;
}
.card.alt .button-container button:hover {
    background: rgba(255, 255, 255, 0.9);
}
.card.alt .button-container button:active:before,
.card.alt .button-container button:focus:before {
    display: none;
}
/* Keyframes */
@-webkit-keyframes buttonFadeInUp {
    0% {
        bottom: 30px;
        opacity: 0;
    }
}
@keyframes buttonFadeInUp {
    0% {
        bottom: 30px;
        opacity: 0;
    }
}
$(document).ready(function () {
    $(".toggle").on("click", function () {
        $(".container").stop().addClass("active");
    });
    $(".close").on("click", function () {
        $(".container").stop().removeClass("active");
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<style>
body {
    background: #e9e9e9;
    color: #666666;
    font-family: "RobotoDraft", "Roboto", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Pen Title */
.pen-title {
    padding: 20px 0;
    text-align: center;
    letter-spacing: 2px;
}
.pen-title h1 {
    margin: 0 0 20px;
    font-size: 40px;
    font-weight: 300;
}
.pen-title span {
    font-size: 12px;
}
.pen-title span .fa {
    color: #ed2553;
}
.pen-title span a {
    color: #ed2553;
    font-weight: 600;
    text-decoration: none;
}
/* Rerun */
.rerun {
    margin: 0 0 30px;
    text-align: center;
}
.rerun a {
    cursor: pointer;
    display: inline-block;
    background: #ed2553;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    padding: 10px 20px;
    color: #ffffff;
    text-decoration: none;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.rerun a:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/* Scroll To Bottom */
#codepen,
#portfolio {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #ec2652;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    color: #ffffff;
    text-align: center;
}
#codepen i,
#portfolio i {
    line-height: 56px;
}
#codepen:hover,
#portfolio:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
/* CodePen */
#portfolio {
    bottom: 96px;
    right: 36px;
    background: #ec2652;
    width: 44px;
    height: 44px;
    -webkit-animation: buttonFadeInUp 1s ease;
    animation: buttonFadeInUp 1s ease;
}
#portfolio i {
    line-height: 44px;
}
/* Container */
.container {
    position: relative;
    max-width: 460px;
    width: 100%;
    margin: 0 auto 100px;
}
.container.active .card:first-child {
    background: #f2f2f2;
    margin: 0 15px;
}
.container.active .card:nth-child(2) {
    background: #fafafa;
    margin: 0 10px;
}
.container.active .card.alt {
    top: 20px;
    right: 0;
    width: 100%;
    min-width: 100%;
    height: auto;
    border-radius: 5px;
    padding: 60px 0 40px;
    overflow: hidden;
}
.container.active .card.alt .toggle {
    position: absolute;
    top: 40px;
    right: -70px;
    box-shadow: none;
    -webkit-transform: scale(14);
    transform: scale(15);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.container.active .card.alt .toggle:before {
    content: "";
}
.container.active .card.alt .title,
.container.active .card.alt .input-container,
.container.active .card.alt .button-container {
    left: 0;
    opacity: 1;
    visibility: visible;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.container.active .card.alt .title {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.container.active .card.alt .input-container {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.container.active .card.alt .input-container:nth-child(2) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.container.active .card.alt .input-container:nth-child(3) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.container.active .card.alt .button-container {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}
/* Card */
.card {
    position: relative;
    background: #ffffff;
    border-radius: 5px;
    padding: 60px 0 40px 0;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    /* Title */
    /* Inputs */
    /* Button */
    /* Footer */
    /* Alt Card */
}
.card:first-child {
    background: #fafafa;
    height: 10px;
    border-radius: 5px 5px 0 0;
    margin: 0 10px;
    padding: 0;
}
.card .title {
    position: relative;
    z-index: 1;
    border-left: 5px solid #ec2652;
    margin: 0 0 35px;
    padding: 10px 0 10px 50px;
    color: #ec2652;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
}
.card .input-container {
    position: relative;
    margin: 0 60px 50px;
}
.card .input-container input {
    outline: none;
    z-index: 1;
    position: relative;
    background: none;
    width: 100%;
    height: 54px;
    border: 0;
    color: #212121;
    font-size: 20px;
    font-weight: 400;
}
.card .input-container input:focus ~ label {
    color: #9d9d9d;
    -webkit-transform: translate(-12%, -50%) scale(0.75);
    transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container input:focus ~ .bar:before,
.card .input-container input:focus ~ .bar:after {
    width: 50%;
}
.card .input-container input:valid ~ label {
    color: #9d9d9d;
    -webkit-transform: translate(-12%, -50%) scale(0.75);
    transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container label {
    position: absolute;
    top: 0;
    left: 0;
    color: #757575;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
}
.card .input-container .bar {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #757575;
    width: 100%;
    height: 1px;
}
.card .input-container .bar:before,
.card .input-container .bar:after {
    content: "";
    position: absolute;
    background: #ec2652;
    width: 0;
    height: 2px;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
}
.card .input-container .bar:before {
    left: 50%;
}
.card .input-container .bar:after {
    right: 50%;
}
.card .button-container {
    margin: 0 60px;
    text-align: center;
}
.card .button-container button {
    outline: 0;
    cursor: pointer;
    position: relative;
    display: inline-block;
    background: 0;
    width: 240px;
    border: 2px solid #e3e3e3;
    padding: 20px 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    overflow: hidden;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.card .button-container button span {
    position: relative;
    z-index: 1;
    color: #ddd;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.card .button-container button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    background: #ec2652;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin: -15px 0 0 -15px;
    opacity: 0;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.card .button-container button:hover,
.card .button-container button:active,
.card .button-container button:focus {
    border-color: #ec2652;
}
.card .button-container button:hover span,
.card .button-container button:active span,
.card .button-container button:focus span {
    color: #ec2652;
}
.card .button-container button:active span,
.card .button-container button:focus span {
    color: #ffffff;
}
.card .button-container button:active:before,
.card .button-container button:focus:before {
    opacity: 1;
    -webkit-transform: scale(10);
    transform: scale(10);
}
.card .footer {
    margin: 40px 0 0;
    color: #d3d3d3;
    font-size: 24px;
    font-weight: 300;
    text-align: center;
}
.card .footer a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.card .footer a:hover {
    color: #bababa;
}
.card.alt {
    position: absolute;
    top: 40px;
    right: -70px;
    z-index: 10;
    width: 100px;
    height: 100px;
    background: none;
    border-radius: 100%;
    box-shadow: none;
    padding: 0;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    /* Toggle */
    /* Title */
    /* Input */
    /* Button */
}
.card.alt .toggle {
    position: relative;
    background: #ec2652;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: #ffffff;
    font-size: 42px;
    line-height: 100px;
    text-align: center;
    cursor: pointer;
}
.card.alt .toggle:before {
    content: "\f067";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.card.alt .title,
.card.alt .input-container,
.card.alt .button-container {
    left: 100px;
    opacity: 0;
    visibility: hidden;
}
.card.alt .title {
    position: relative;
    border-color: #ffffff;
    color: #ffffff;
}
.card.alt .title .close {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 60px;
    display: inline;
    color: #ffffff;
    font-size: 58px;
    font-weight: 400;
}
.card.alt .title .close:before {
    content: "\00d7";
}
.card.alt .input-container input {
    color: #ffffff;
}
.card.alt .input-container input:focus ~ label {
    color: #ffffff;
}
.card.alt .input-container input:focus ~ .bar:before,
.card.alt .input-container input:focus ~ .bar:after {
    background: #ffffff;
}
.card.alt .input-container input:valid ~ label {
    color: #ffffff;
}
.card.alt .input-container label {
    color: rgba(255, 255, 255, 0.8);
}
.card.alt .input-container .bar {
    background: rgba(255, 255, 255, 0.8);
}
.card.alt .button-container button {
    width: 100%;
    background: #ffffff;
    border-color: #ffffff;
}
.card.alt .button-container button span {
    color: #ec2652;
}
.card.alt .button-container button:hover {
    background: rgba(255, 255, 255, 0.9);
}
.card.alt .button-container button:active:before,
.card.alt .button-container button:focus:before {
    display: none;
}
/* Keyframes */
@-webkit-keyframes buttonFadeInUp {
    0% {
        bottom: 30px;
        opacity: 0;
    }
}
@keyframes buttonFadeInUp {
    0% {
        bottom: 30px;
        opacity: 0;
    }
}
</style>

</head>
<body>
<div class="pen-title">
    <h1>Material Login Form</h1>
</div>
<div class="container">
    <div class="card"></div>
    <div class="card">
        <h1 class="title">Login</h1>
        <form>
            <div class="input-container">
                <input type="text" id="Username" required="required" />
                <label for="Username">Username</label>
                <div class="bar"></div>
            </div>
            <div class="input-container">
                <input type="password" id="Password" required="required" />
                <label for="Password">Password</label>
                <div class="bar"></div>
            </div>
            <div class="button-container">
                <button><span>Go</span></button>
            </div>
            <div class="footer"><a href="#">Forgot your password?</a></div>
        </form>
    </div>
    <div class="card alt">
        <div class="toggle"></div>
        <h1 class="title">
            Register
            <div class="close"></div>
        </h1>
        <form>
            <div class="input-container">
                <input type="text" id="Username" required="required" />
                <label for="Username">Username</label>
                <div class="bar"></div>
            </div>
            <div class="input-container">
                <input type="password" id="Password" required="required" />
                <label for="Password">Password</label>
                <div class="bar"></div>
            </div>
            <div class="input-container">
                <input type="password" id="Repeat Password" required="required" />
                <label for="Repeat Password">Repeat Password</label>
                <div class="bar"></div>
            </div>
            <div class="button-container">
                <button><span>Next</span></button>
            </div>
        </form>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    $(".toggle").on("click", function () {
        $(".container").stop().addClass("active");
    });
    $(".close").on("click", function () {
        $(".container").stop().removeClass("active");
    });
});
</script>

</body>
</html>
Preview
Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
TOP CODES
Toggle Switch Button for Changing Language with Bootstrap
Draggable Cards with Bootstrap Grids
Bootstrap Table with Add New Row Button
WHAT IS NEW IN KERIXA?
Glassy Chat Box Code with Reaction Emojis
Dark Neo Brutal Resume Template
Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability
Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability
Flat Photo Frame Template
Cute Photo Frame Template
16 React JS Accordions
17 React JS Buttons
RECENT CODES
Bootstrap Timeline with Colorful Lines and Icons
Simple Dark Vertical Timeline with Bootstrap
Colorful Icons for Bootstrap Timeline Joints
Bootstrap Vertical Timeline with Image Cards and Descriptions
Vertical Bootstrap Timeline in Half Page
Drop Down Menu by React JS
Animating React Popup with Float in and Zoom Effects
Popup vs. Alert Code using React JS
React Glassy Gradient Popup Modal
Animating Toggle Popup Menu with React JS
CATEGORIES
Bootstrap Accordions Bootstrap Buttons
Bootstrap Cards Bootstrap Footers
Bootstrap Forms Bootstrap Grids
Bootstrap Headers Bootstrap Paginations
Bootstrap Popups Bootstrap Progress Bars
Bootstrap Search Boxes Bootstrap Sidebars
Bootstrap Sliders Bootstrap Tables
Bootstrap Tabs Bootstrap Thumbnails
Bootstrap Timeline Bootstrap Toggle Switches
React Accordions React Buttons
React Forms React Headers
React Menus React Popups
React Progress Bars React Sidebars
Frontend Free Code
© 2024 Kerixa Inc