Login Form Design 2 in Bootstrap 4

on

 

Good and User friendly design not only engage users but also impacts speed, Market value, and brand value. So always try to use good, interactive, responsive, and user-friendly designs for your web application.

To keep all these things, I have designed the following login webpage.  



Step1: Use this HTML Code to Create it

<!doctype html>


<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">


  <title>Login Template</title>

  <meta name="description" content="">

  <meta name="author" content="">


  <meta property="og:title" content="">

  <meta property="og:type" content="">

  <meta property="og:url" content="">

  <meta property="og:description" content="">

  <meta property="og:image" content="">


  <link rel="icon" href="/favicon.ico">

  <link rel="stylesheet" href="assets/css/bootstrap.min.css?v=1.0">

  <link rel="stylesheet" href="assets/css/style2.css?v=1.0">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

">


</head>


<body>

  <!-- your content here... -->

  <div class="container px-4 py-5 mx-auto">

    <div class="card card0">

        <div class="d-flex flex-lg-row flex-column-reverse">

            <div class="card card1">

                <div class="row justify-content-center my-auto">

                    <div class="col-md-8 col-10 my-5">

                        <div class="row justify-content-center px-3 mb-3"> 

                            <img id="logo" src="assets/images/logo.jpg"> </div>

                        <h3 class="mb-5 text-center heading">We are Here to Help You!</h3>

                        <h6 class="msg-info">Please login to your account</h6>

                        <div class="form-group"> <label class="form-control-label text-muted">Username</label> <input type="text" id="email" name="email" placeholder="Phone no or email id" class="form-control"> </div>

                        <div class="form-group"> <label class="form-control-label text-muted">Password</label> <input type="password" id="psw" name="psw" placeholder="Password" class="form-control"> </div>

                        <div class="row justify-content-center my-3 px-3"> <button class="btn-block btn-color">Login</button> </div>

                        <div class="row justify-content-center my-2"> <a href="#"><small class="text-muted">Forgot Password?</small></a> </div>

                    </div>

                </div>

                <div class="bottom text-center mb-5">

                    <p href="#" class="sm-text mx-auto mb-3">Don't have an account?<button class="btn btn-white ml-2">Create new</button></p>

                </div>

            </div>

            <div class="card card2">

                <div class="my-auto mx-md-5 px-md-5 right">

                    <h3 class="text-white">Where does it come from?</h3> <small class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small>

                </div>

            </div>

        </div>

    </div>

</div>

  <script src="assets/js/jquery-3.2.1.slim.min.js"></script>

   <script src="assets/js/bootstrap.min.js"></script>

    <script src="assets/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Step 2: Use this CSS Code to make it interactive.


body {

    color: #000;

    overflow-x: hidden;

    height: 100%;

    background: #DE6262;  /* fallback for old browsers */

background: -webkit-linear-gradient(to right, #FFB88C, #DE6262);  /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to right, #FFB88C, #DE6262); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


    background-repeat: no-repeat

}


input,

textarea {

    background-color: #F3E5F5;

    border-radius: 50px !important;

    padding: 12px 15px 12px 15px !important;

    width: 100%;

    box-sizing: border-box;

    border: none !important;

    border: 1px solid #F3E5F5 !important;

    font-size: 16px !important;

    color: #000 !important;

    font-weight: 400

}


input:focus,

textarea:focus {

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    border: 1px solid #D500F9 !important;

    outline-width: 0;

    font-weight: 400

}


button:focus {

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    outline-width: 0

}


.card {

    border-radius: 0;

    border: none

}


.card1 {

    width: 50%;

    padding: 40px 30px 10px 30px

}


.card2 {

    width: 50%;

    background: #DE6262;  /* fallback for old browsers */

background: -webkit-linear-gradient(to right, #FFB88C, #DE6262);  /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to right, #FFB88C, #DE6262); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}


#logo {

    width: 70px;

    height: 60px

}


.heading {

    margin-bottom: 60px !important

}


::placeholder {

    color: #000 !important;

    opacity: 1

}


:-ms-input-placeholder {

    color: #000 !important

}


::-ms-input-placeholder {

    color: #000 !important

}


.form-control-label {

    font-size: 12px;

    margin-left: 15px

}


.msg-info {

    padding-left: 15px;

    margin-bottom: 30px

}


.btn-color {

    border-radius: 50px;

    color: #fff;

    background: #DE6262;  /* fallback for old browsers */

background: -webkit-linear-gradient(to right, #FFB88C, #DE6262);  /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to right, #FFB88C, #DE6262); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


    padding: 15px;

    cursor: pointer;

    border: none !important;

    margin-top: 40px

}


.btn-color:hover {

    color: #fff;

    background: #DE6262;  /* fallback for old browsers */

background: -webkit-linear-gradient(to right,#DE6262, #FFB88C );  /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to right,#DE6262, #FFB88C ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}


.btn-white {

    border-radius: 50px;

    color: #DE6262;

    background-color: #fff;

    padding: 8px 40px;

    cursor: pointer;

    border: 2px solid #DE6262 !important

}


.btn-white:hover {

    color: #fff;

   background: #DE6262;  /* fallback for old browsers */

background: -webkit-linear-gradient(to left, #FFB88C, #DE6262);  /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to left, #FFB88C, #DE6262); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}


a {

    color: #000

}


a:hover {

    color: #000

}


.bottom {

    width: 100%;

    margin-top: 50px !important

}


.sm-text {

    font-size: 15px

}


@media screen and (max-width: 992px) {

    .card1 {

        width: 100%;

        padding: 40px 30px 10px 30px

    }


    .card2 {

        width: 100%

    }


    .right {

        margin-top: 100px !important;

        margin-bottom: 100px !important

    }

}


@media screen and (max-width: 768px) {

    .container {

        padding: 10px !important

    }


    .card2 {

        padding: 50px

    }


    .right {

        margin-top: 50px !important;

        margin-bottom: 50px !important

    }

}

I hope you would like this design. If it helps you, kindly share it with others. Thank You!

Comments

Post a Comment