<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>
<head>
<title>Product Card's</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<!-- Top Bar Start -->
<div class="top-bar d-none d-md-block">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="top-bar-left">
<div class="text">
<h2>8:00 - 9:00</h2>
<p>Opening Hour Mon - Fri</p>
</div>
<div class="text">
<h2>+11 456 7890</h2>
<p>Call Us For Unquiry</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="top-bar-right">
<div class="social">
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-facebook-f"></i></a>
<a href=""><i class="fab fa-linkedin-in"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Top Bar End -->
<!-- Nav Bar Start -->
<div class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a href="index.php" class="navbar-brand font-weight-bold">Book|Store</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav ml-auto">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="product.php" class="nav-item nav-link">Our Books</a>
<a href="portfolio.html" class="nav-item nav-link">Gallery</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">More</a>
<div class="dropdown-menu fadeIn">
<a href="blog.html" class="dropdown-item">Blog Page</a>
<a href="single.html" class="dropdown-item">Single Page</a>
</div>
</div>
</div>
<form action="#" method="get" class="searchform navbar-form" role="search">
<input type="hidden" value="search" name="view">
<div class="input-group">
<input type="text" name="searchword" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Nav Bar End -->
/**********************************/
/********** Top Bar CSS ***********/
/**********************************/
.top-bar {
position: relative;
height: 60px;
background: #76b713;
}
.top-bar .top-bar-left {
display: flex;
align-items: center;
justify-content: flex-start;
}
.top-bar .top-bar-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.top-bar .text {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 50px;
padding: 0 10px;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, .15);
}
.top-bar .text:last-child {
border-right: 1px solid rgba(255, 255, 255, .15);
}
.top-bar .text h2 {
color: #113448;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
margin: 0;
}
.top-bar .text p {
color: #113448;
font-size: 12px;
font-weight: 400;
margin: 0;
}
.top-bar .social {
display: flex;
height: 40px;
font-size: 0;
justify-content: flex-end;
}
.top-bar .social a {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 100%;
font-size: 20px;
color: #113448;
border-right: 1px solid rgba(255, 255, 255, .15);
}
.top-bar .social a:first-child {
border-left: 1px solid rgba(255, 255, 255, .15);
}
.top-bar .social a:hover {
color: #76b713;
background: #113448;
}
@media (min-width: 992px) {
.top-bar {
padding: 0 60px;
}
}
/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/
.navbar {
position: relative;
transition: .5s;
z-index: 999;
background: #76b713 !important;
}
.navbar.nav-sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.navbar .navbar-brand {
margin: 0;
color: #113448;
font-size: 40px;
line-height: 0px;
font-weight: 600;
}
.navbar .navbar-brand span {
font-weight: 400;
font-size: 15pt;
}
.navbar .navbar-brand{
max-width: 100%;
max-height: 40px;
}
.navbar-dark .navbar-nav .nav-link{
margin-left:20px;
color:#113448 !important;
line-height:1.5;
}
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
color: #113448;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
background: rgba(256, 256, 256, .1);
transition: none;
}
.navbar .dropdown-menu {
margin-top: 0;
border: 0;
border-radius: 0;
color: #fff;
background: #76b713;
}
.navbar .dropdown-menu .dropdown-item{
color: #fff;
}
.navbar .dropdown-menu .dropdown-item:hover
{
background: rgba(256, 256, 256, .1);
transition: none;
}
.dropdown:hover > .dropdown-menu {
display: block; /* this makes the dropdown menu stay open while hovering it */
min-width: auto;
}
/**********************************/
/*********** Search CSS **********/
/**********************************/
/* search form */
.searchform{
padding:10px 15px;
float:right
}
.searchform .btn{
color:#113448;
border: 1px solid #113448;
border-radius: 0;
background-color:#76b713;
}
.searchform .btn:hover{
color: #76b713;
background-color: #113448;
}
.searchform .form-control{
border:0;
color:#113448;
background-color: transparent;
width:160px!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
border-radius: 0;
}
.searchform .form-control::placeholder{
color: #113448;
}
.searchform .form-control:hover, .searchform .form-control:focus {
width: 200px!important;
outline: none !important;
color: #113448;
border-bottom: thin solid #113448;
background-color: transparent !important;
}
