Login Form design 4 using Bootstrap 4

on

 We have already discussed three ways to create designs. Now here is one more interactive, user-friendly, responsive, and efficient design of the login form.



Use the following HTML code to create this.

<!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/style4.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">

  <div class="uni-form">

  <div class="row">

    <div class="col-lg-5">

      <div class="uni-login">

        <h5>Welcome Back</h5>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

        <a href="">Sign In</a>

      </div>

    </div>

    <div class="col-lg-7">

      <div class="uni-register">

        <h2>Create Account</h2>

        <ul class="uni-list">

          <li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>

          <li><a href=""><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>

          <li><a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>

        </ul>

      </div>

      <form action="" method="" name="uniform" id="uniForm">

        <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>

  <div class="input-group mb-2 mr-sm-2">

    <div class="input-group-prepend">

     <i class="fa fa-user input-group-text" aria-hidden="true"></i>

    </div>

    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">

  </div>

  <label class="sr-only" for="email-id">Email-ID</label>

  <div class="input-group mb-2 mr-sm-2">

    <div class="input-group-prepend">

      <i class="fa fa-envelope input-group-text" aria-hidden="true"></i>

    </div>

    <input type="text" class="form-control" id="email-id" placeholder="Email ID">

  </div>

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>

  <div class="input-group mb-2 mr-sm-2">

    <div class="input-group-prepend">

      <i class="fa fa-key input-group-text" aria-hidden="true"></i>

    </div>

    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">

  </div>

  <button class="btn" name="submit" id="unilogin">Sign Up</button>

      </form>

    </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>


Use the CSS to design it.

body

{

  background: #fff;

  padding: 20px;

}

.uni-login{

 padding: 220px 30px;

    background: #56ab2f;

    background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);

    background: linear-gradient(to right, #a8e063, #56ab2f);

    height: 670px;

    text-align: center;


}

.uni-login h5

{

    color: #fff;

    font-size: 35px;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    margin-bottom: 10px;

}

.uni-login p

{

color: #fff;

    font-size: 15px;

    line-height: 1.5;

    margin-bottom: 40px;

}

.uni-login a

{

  color: #fff;

    text-align: center;

    padding: 15px 55px;

    border: 1px solid #fff;

    border-radius: 50px;

    font-size: 20px;

    font-weight: 600;

    text-transform: uppercase;

}


.uni-login a:hover,.uni-login a:focus

{

  text-decoration: none;

    background: #fff;

    color: #a8e063;

    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;

}

.uni-form

{

  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;

}

.uni-register

{

  text-align: center;

    padding: 60px 20px;

    margin-bottom: 0px;

    padding-left: 0px;

}

.uni-register h2

{

  font-size: 30px;

    color: #56ab2f;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    margin-bottom: 20px;

    font-weight: 600;

}

.uni-list

{

  display: inline-flex;

    list-style: none;

}

.uni-list li

{

  width: 40px;

    height: 40px;

    line-height: 38px;

    background: #56ab2f;

    border-radius: 50px;

    color: #fff;

    margin: 0px 5px;

}

.uni-list li a

{

  color: #fff;

}


.uni-list li:hover

{

 

  background: #fff;

  border: 1px solid #fff;

  border-radius: 50px;

  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;

}

.uni-list li:hover a

{

   color:#56ab2f ;

}

.input-group-text

{

  background: #56ab2f;

    padding: 10px;

    width: 47px;

    color: #fff;

}

.input-group

{

  width: 95%;

}

.form-control

{

  border: 1px solid #56ab2f;

    color: #56ab2f;

}

#uniForm

{

  text-align: center;

}

#unilogin

{

  margin-top: 20px;

    width: 200px;

    padding: 15px 10px;

    background: #56ab2f;

    background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);

    background: linear-gradient(to right, #a8e063, #56ab2f);

    border-radius: 50px;

    color: #fff;

    text-transform: uppercase;

}

#unilogin:hover

{

  background: #fff;

  border: 1px solid #fff;

   box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;

   color: #56ab2f;

}

I hope this design would be helpful to you. Kindly share with others.

Comments

Post a Comment