<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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;
}
