Bootstrap Login Form Template Free Download Gradient Pink And Blue

0

M.b.patel June 25, 2021

Bootstrap Login Form Gradient Pink And Blue Template Free Download

Bootstrap Login Form Template Free Download Gradient Pink And Blue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <style>
        .register-photo {
            background: #f1f7fc;
            padding: 80px 0;
        }

        .register-photo .image-holder {
            display: table-cell;
            background: url("../../assets/img/graphic-design.png") space, #ffffff;
            background-size: auto, auto;
            text-align: right;
            width: 484px;
        }

        .register-photo .form-container {
            display: table;
            max-width: 900px;
            width: 90%;
            margin: 0 auto;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
        }

        .register-photo form {
            display: table-cell;
            width: 400px;
            background-color: #ffffff;
            padding: 40px 60px;
            color: #505e6c;
        }

        @media (max-width:991px) {
            .register-photo form {
                padding: 40px;
            }
        }

        .register-photo form h2 {
            font-size: 24px;
            line-height: 1.5;
            margin-bottom: 30px;
        }

        .register-photo form .form-control {
            background: #f7f9fc;
            border: none;
            border-bottom: 1px solid #dfe7f1;
            border-radius: 0;
            box-shadow: none;
            outline: none;
            color: inherit;
            text-indent: 6px;
            height: 40px;
        }

        .register-photo form .form-check {
            font-size: 13px;
            line-height: 20px;
        }

        .register-photo form .btn-primary {
            background: #f4476b;
            border: none;
            border-radius: 4px;
            padding: 11px;
            box-shadow: none;
            margin-top: 35px;
            text-shadow: none;
            outline: none !important;
        }

        .register-photo form .btn-primary:hover,
        .register-photo form .btn-primary:active {
            background: #eb3b60;
        }

        .register-photo form .btn-primary:active {
            transform: translateY(1px);
        }

        .register-photo form .already {
            display: block;
            text-align: center;
            font-size: 12px;
            color: #6f7a85;
            opacity: 0.9;
            text-decoration: none;
        }

        .register-photo form .btn-primary {
            background: linear-gradient(-120deg, rgb(255, 0, 168), rgb(5, 0, 255));
        }

        .register-photo {
            background: linear-gradient(rgb(255, 0, 153), rgb(51, 0, 255));
            height: 650px;
        }
    </style>
</head>

<body>
    <section class="register-photo">
        <div class="form-container">
            <form method="post">
                <h2 class="text-center"><strong>LOGIN</strong></h2>
                <div class="form-group"><input class="form-control" type="email" name="email" placeholder="Email"
                        style="box-shadow: 0px 0px 9px 2px rgb(0,0,0);"></div>
                <div class="form-group"><input class="form-control" type="password" name="password"
                        placeholder="Password" style="box-shadow: 0px 0px 9px 6px;"></div>
                <div class="form-group">
                    <div class="form-check"><label class="form-check-label"><input class="form-check-input"
                                type="checkbox">I agree to the license terms.</label></div>
                </div>
                <div class="form-group"><button class="btn btn-primary btn-block" type="submit">Sign Up</button></div><a
                    class="already" href="#">You already have an account? Login here.</a>
            </form>
        </div>
    </section>
</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <style>
        .register-photo {
            background: #f1f7fc;
            padding: 80px 0;
        }

        .register-photo .image-holder {
            display: table-cell;
            background: url("../../assets/img/graphic-design.png") space, #ffffff;
            background-size: auto, auto;
            text-align: right;
            width: 484px;
        }

        .register-photo .form-container {
            display: table;
            max-width: 900px;
            width: 90%;
            margin: 0 auto;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
        }

        .register-photo form {
            display: table-cell;
            width: 400px;
            background-color: #ffffff;
            padding: 40px 60px;
            color: #505e6c;
        }

        @media (max-width:991px) {
            .register-photo form {
                padding: 40px;
            }
        }

        .register-photo form h2 {
            font-size: 24px;
            line-height: 1.5;
            margin-bottom: 30px;
        }

        .register-photo form .form-control {
            background: #f7f9fc;
            border: none;
            border-bottom: 1px solid #dfe7f1;
            border-radius: 0;
            box-shadow: none;
            outline: none;
            color: inherit;
            text-indent: 6px;
            height: 40px;
        }

        .register-photo form .form-check {
            font-size: 13px;
            line-height: 20px;
        }

        .register-photo form .btn-primary {
            background: #f4476b;
            border: none;
            border-radius: 4px;
            padding: 11px;
            box-shadow: none;
            margin-top: 35px;
            text-shadow: none;
            outline: none !important;
        }

        .register-photo form .btn-primary:hover,
        .register-photo form .btn-primary:active {
            background: #eb3b60;
        }

        .register-photo form .btn-primary:active {
            transform: translateY(1px);
        }

        .register-photo form .already {
            display: block;
            text-align: center;
            font-size: 12px;
            color: #6f7a85;
            opacity: 0.9;
            text-decoration: none;
        }

        .register-photo form .btn-primary {
            background: linear-gradient(-120deg, rgb(255, 0, 168), rgb(5, 0, 255));
        }

        .register-photo {
            background: linear-gradient(rgb(255, 0, 153), rgb(51, 0, 255));
            height: 650px;
        }
    </style>
</head>

<body>
    <section class="register-photo">
        <div class="form-container">
            <form method="post">
                <h2 class="text-center"><strong>LOGIN</strong></h2>
                <div class="form-group"><input class="form-control" type="email" name="email" placeholder="Email"
                        style="box-shadow: 0px 0px 9px 2px rgb(0,0,0);"></div>
                <div class="form-group"><input class="form-control" type="password" name="password"
                        placeholder="Password" style="box-shadow: 0px 0px 9px 6px;"></div>
                <div class="form-group">
                    <div class="form-check"><label class="form-check-label"><input class="form-check-input"
                                type="checkbox">I agree to the license terms.</label></div>
                </div>
                <div class="form-group"><button class="btn btn-primary btn-block" type="submit">Sign Up</button></div><a
                    class="already" href="#">You already have an account? Login here.</a>
            </form>
        </div>
    </section>
</body>

</html>

Solve This Problem

Bootstrap Login Page Template Free Download
Bootstrap Login And Registration Form Template Free Download
Responsive Login Page Template Free Download
Responsive Login Page Template Bootstrap 4
Login Page Design In Html With Source Code Free Download
Login And Registration Form In Html Template Free Download
Bootstrap Login Modal Template Free Download
Login Template Html

Tags

Background Canvas Cordpen css freedownload Github Gradient html inputtype js LoginPage SectionDesign SimpleExample Stackoverflow template web-beast.com

Newer
Older

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.