"login-form"
Bootstrap 4.1.1 Snippet by ccela

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <link href="css/font-awesome.min.css" rel="stylesheet"> <link href="css/animation-1.css" rel="stylesheet"> <title>theme-2</title> </head> <body> <div class="mySearchbar" style="display:none" id="mySearchbar"> <div class="container"> <form action="/action_page.php"> <input type="text" placeholder="Search.." name="search" class="form-control custome-input"> <button type="submit" class="btn btn-filter"><i class="fa fa-search"></i></button> </form> <button onclick="w3_close()" class="myclosebtn"><i class="fa fa-times"></i></button> </div> </div> <nav class="navbar navbar-expand-md secound-head top-nav"> <div class="container"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="shope.html">Shopes</a> </li> <li class="nav-item"> <a class="nav-link" href="blog.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="contact-us.html">Contact</a> </li> </ul> <a class="navbar-brand" href="#"><strong>Grafreez</strong></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"><i class="fa fa-bars" aria-hidden="true"></i></span> </button> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="cart.html"><i class="fa fa-shopping-cart"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-heart-o"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="#" onclick="w3_open()"><i class="fa fa-search"></i></a> </li> <li class="nav-item "> <a class="nav-link" href="login.html">LOGIN</a> </li> </ul> </div> </div> </nav> <div class="login-page"> <div class="container"> <div class="row"> <div class="col-xl-8 m-auto col-sm-8 col-12"> <div class="log-box"> <div class="row"> <div class="col-xl-5 col-sm-5 col-12 pad-right-0"> <div class="logo-back"> </div> </div> <div class="col-xl-7 col-sm-7 col-12 pad-left-0"> <div class="log-content"> <h1>LOGIN </h1> <div class="log-body"> <div class="form-group myr-top"> <label>Gmail</label> <input type="text" class="form-control custom" placeholder="Gmail"> </div> <div class="form-group myr-top"> <label>Password</label> <input type="passowrd" class="form-control custom" placeholder="Password"> </div> <div class="log-btn text-center"> <a href="#" class="btn btn-theme1">Login</a> </div> <div class="log-bottom-cotent"> <p>Creat an account<a href="signup.html">Sign Up</a> <a href="forgotpassword.html" class="pull-right">Forgot Password</a> </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-xl-3 col-sm-6 col-12"> <div class="footer-section"> <h6>Company</h6> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> <div class="col-xl-3 col-sm-6 col-12"> <div class="footer-section"> <h6>OUR SERVICES</h6> <div class="service-link"> <a href="#">ABOUT US</a> <a href="#">SERVICES</a> <a href="#">BLOG</a> <a href="#">CONTACT US</a> </div> </div> </div> <div class="col-xl-3 col-sm-6 col-12"> <div class="footer-section"> <h6>OUR FEATURES</h6> <div class="service-link"> <a href="#">MENS</a> <a href="#">WOMENS</a> <a href="#">SHOPE</a> </div> </div> </div> <div class="col-xl-3 col-sm-6 col-12"> <div class="footer-section"> <h6>NEWSLETTER</h6> <div class="form-group"> <input type="text" class="form-control custom" placeholder="newsletter"> <a href="#" class="btn btn-theme">Sign Up</a> </div> <h6>PAYMENT METHOD</h6> <a href="#"><img src="img/card.png" class="img-responsive"></a> </div> </div> </div> </div> <div class="copy-write"> <p>Copy right @ ExpressTech Software Solution all right reserve</p> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="js/bootstrap.min.js"></script> <script src="js/wow.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> <script> // Sticky Header $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 100) { $(".top-nav").addClass("light-header"); } else { $(".top-nav").removeClass("light-header"); } }); // Year for copy content $(function(){ var theYear = new Date().getFullYear(); $('#year').html(theYear); }); </script> <script> function w3_open() { document.getElementById("mySearchbar").style.width = "100%"; document.getElementById("mySearchbar").style.height = "50px"; document.getElementById("mySearchbar").style.display = "block"; } function w3_close() { document.getElementById("mySearchbar").style.display = "none"; } </script>
.top-nav { height: 80px; transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } .top-nav .navbar-nav li .nav-link { color: #fff; font-size: 14px; padding:29px 15px 15px; font-weight: 600; text-transform: uppercase; transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } .mySearchbar{ position:fixed; top:0; left:0; height:60px; width:100%; background-color:#f6f6f6; z-index:9999; transition:ease 0.5s; padding:5px 10px; } .mySearchbar form{ display:flex; width:100%; } .mySearchbar .custome-input{ width:100%; } .myclosebtn{ position:absolute; top:10px; left:10px; color:#000; font-size:16px; box-shadow:0px 0px 0px; border:0px; } .top-nav li a.nav-link:hover, .top-nav .nav-item.active a.nav-link{ color: #35cbdf; transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } .top-nav .navbar-brand{ font-size: 28px; color: #fff; font-family: 'Montserrat', sans-serif; } .top-nav.light-header{ height: 60px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.23); transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; z-index:99999; } .top-nav.light-header .navbar-brand{ color: #212121; } .top-nav.light-header .navbar-nav li .nav-link { color: #212121; padding: 10px 10px; transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } .top-nav.light-header li a.nav-link:hover, .top-nav.light-header .nav-item.active a.nav-link{ border-bottom: 0px solid #35cbdf; color: #35cbdf; transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; } .nav-item::after{content:'';display:block;width:0px;height:2px;background:#35cbdf;transition: 0.5s;} .nav-item:hover::after{width:100%;} .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{color:#35cbdf;} .nav-link{padding:15px 5px;transition:0.2s;} .secound-head .navbar-nav li .nav-link{ color:#000; } * start login page css */ .secound-head .navbar-nav li .nav-link{ color:#000; } .secound-head .navbar-brand{ color:#000; } .secound-head.light-header{ position:fixed; width:100%; background:#fff; z-index:99999; transition:ease 0.5s; } .login-page{ background: #f6f6f6; /* fallback for old browsers\ background: -webkit-linear-gradient(to bottom, #2399f4, #12D8FA, #1FA2FF); /* Chrome 10-25, Safari 5.1-6 background: linear-gradient(to bottom, #2399f4, #12D8FA, #1FA2FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ padding:40px 0px; min-height:450px; position:relative; display:inline-flex; width:100%; } .log-box{ border-radius:10px; min-height:400px; box-shadow:0px 0px 10px #ccc; display:inline-block; width:100%; } .logo-back{ background: url("../img/log-img.png"); background-size: auto auto; display: inline-block; width: 100%; min-height: 450px; align-items: center; justify-content: center; height: 100%; border-radius: 10px 0px 0px 10px; background-size: cover; background-repeat: no-repeat; } .log-content{ padding:40px 20px 0px; display:inline-block; width:100%; background-color:#fff; min-height:460px; border-radius:0px 10px 10px 0px; } .myr-top{ margin-top:15px; } .log-content .log-body{ margin-top:50px; } .log-content label{ margin:0px; font-family:Poppins-R; font-size:14px; display:none; } .log-content .custom{ border-bottom:1px solid #000; padding:10px 10px 10px 0px } .log-btn{ padding-bottom:20px; } .btn-theme1{ font-size:16px; font-family:Poppins-R; padding:10px 20px; background-color:#35cbdf; color:#fff; border:1px solid transparent; border-radius:50px; transition:ease 0.5s; } .btn-theme1:hover{ color:#35cbdf; background-color:#fff; border:1px solid #000; } .log-bottom-cotent{ margin-top:28%; } /* end login page css */ .copy-write{ display:none !important; } .footer{ background:#444; background-size:cover; display:inline-block; width:100%; padding:40px 0px 0px; } .footer-section h6{ border-bottom:1px solid #FFF; padding-bottom:10px; margin-bottom:10px; color:#fff; } .footer-section p{ font-size:12px; font-family:Poppins-L; line-height:26px; color:#fff; } .service-link a{ display:inline-block; width:100%; color:#fff; transition:ease 0.2s; padding:5px 0px; } .service-link a:hover{ color:#35cbdf; } .custom{ border:0px; height:40px; box-shadow:0px 0px 0px; border-radius:0px; border-bottom:1px solid #fff; background-color:transparent; color:#fff; } .custom:hover, .custom:focus{ background-color:transparent; box-shadow:0px 0px 0px; border-bottom:1px solid red; } .custome-input{ border:0px; height:40px; box-shadow:0px 0px 0px; border-radius:0px; border-bottom:1px solid #000; background-color:transparent; color:#000; } .custome-input:hover, .custome-input:focus{ background-color:transparent; box-shadow:0px 0px 0px; border-bottom:1px solid #35cbdf; } .form-group a{ margin-top:10px; } .copy-write{ background-color:#e1e1e1; padding:5px 0px; display:inline-block; width:100%; margin-top:20px; text-align:center; } .copy-write p{ margin:0px; } .latest-section{ padding:30px 0px; margin-top:0px; }

Related: See More


Questions / Comments: