Bootstrap Snippets Simple Login Using HTML

<div class="container-fluid">
       <div class="row ">
           <div class="col-sm-6 bg">
               
           </div>
           <div class="col-sm-6">
               <div class="row pt-5">
                   <div class="col-md-8 col-sm-10 offset-sm-1 offset-md-2">
                       <h4>Get More things done with Logging platform.</h4>
                       <p>Access to the most powerfull tool in the entire design and web industry.</p>
                   
                      <div class="login">
                       <ul class="nav nav-tabs">
                           <li class="nav-item">
                             <a class="nav-link active" href="#">Login</a>
                           </li>
                           <li class="nav-item">
                             <a class="nav-link" href="#">Register</a>
                           </li>
                            
                         </ul>
                       <form action="" class="pt-3">
                               <div class="alert alert-warning alert-dismissible fade show">
                                       <button type="button" class="close" data-dismiss="alert">&times;</button>
                                       Please fill the following information.
                                     </div>
                           <input type="email" name="" id="" class="form-control" required placeholder="E-mail Address">
                           <input type="password" name="" id="" class="form-control" required placeholder="Password">
                           <a class="nav-item nav-link pl-0" href="#"> Forget password?</a>
                           <button class="btn btn-primary">Submit</button>
                    </form>
                       <div class="login-social"> 
                           <span class="pull-left mt-4 mr-4">Or login with</span>
                           <ul class="pull-left">
                               <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                               <li class="google"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                               <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                           </ul>
                       </div>
                      </div>
                   </div>
               </div>
           </div>
       </div>
   </div>

.bg { background:url(https://images.pexels.com/photos/238118/pexels-photo-238118.jpeg?auto=compress&cs=tinysrgb&h=650&w=940) right; height: 100vh; background-size: cover; }
        .login {}
        .login a {}
        .login input { background: #f1f1f1; border: none; margin: 10px 0px; padding:20px;     height: 50px; }
        .login input:hover, .login input:focus { background: #d3d3dd;}
        .login-social ul { list-style-type: none; margin: 0; padding: 0;}
        .login-social ul li { float: left; text-align: center;  margin-top: 20px;  }
        .login-social ul li a { display: block; width:35px; height: 35px;   margin: 5px;  color: #fff; font-size: 21px;  line-height: 35px;}
        .login-social ul li.facebook { background: #3B5998  ; }
        .login-social ul li.google { background: #dd4b39 ; }
        .login-social ul li.twitter { background: #00aced ;}