<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 ---------->
<header>
<div class="top-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-header">
<div class="email">
<ul>
<li>
<a href="abc@gmail.com"><i class="fa fa-envelope" aria-hidden="true"></i> abc@gmail.com</a>
</li>
<li>
<a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> 124 kjk jhkh, MD 21224, USA</a>
</li>
</ul>
</div>
<div class="social-icon">
<ul>
<li>
<a href="#">
<i class="fa fa-facebook-square"></i>
<p>Facebook</p>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
<p>Twitter</p>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-instagram"></i>
<p>Instagram</p>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-pinterest"></i>
<p>pinterest</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="main-nav">
<div class="container">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src="img/logo.png" /></a>
<a id="configure" class="visible-xs text-right"></a>
<div class="navbar-collapse">
<form class="form-inline">
<!-- <button class="btn btn-outline rounded-left" type="submit">All
<i class="fa fa-caret-down" aria-hidden="true"></i></button> -->
<input class="form-control form_nav" type="search" placeholder="Search by categories" aria-label="Search" />
<button class="btn btn-outline-success rounded-right" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</form>
</div>
<ul class="login-btn">
<li>
<a href="#"><i class="fa fa-sign-in"></i>Login</a>
</li>
<li>
<a href="#"><i class="fa fa-cart-plus"></i>Cart</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="menu_bar hidden-xs" id="configurator-wrap">
<div class="container">
<div class="row">
<div class="col-md-12 menu_custom">
<div class="menu_item">
<ul>
<li class="sub-menu-parent" tab-index="0">
<a href="">All Products</a>
<div class="sub-menu full_wd d-flex">
<div>
<h4>Product Catalog:</h4>
<ul class="">
<li><a href="#">COVID Recovery</a></li>
<li><a href="#">Uniforms</a></li>
<li><a href="#">Towels</a></li>
<li><a href="#">Restroom</a></li>
<li><a href="#">Mops</a></li>
<li><a href="#">Floor Mats & D2</a></li>
<li><a href="#">First Aid</a></li>
<li><a href="#">Cleaning Chemicals</a></li>
<li><a href="#">Equipment</a></li>
<li><a href="#">Download Catalog</a></li>
</ul>
</div>
<div>
<h4>By Industry:</h4>
<ul class="">
<li><a href="#">CManufacturing</a></li>
<li><a href="#">Food Processing</a></li>
<li><a href="#">Automotive</a></li>
<li><a href="#">Food Service</a></li>
<li><a href="#">Healthcare</a></li>
<li><a href="#">Cleanroom</a></li>
</ul>
</div>
</div>
</li>
<li class="sub-menu-parent" tab-index="0">
<a href="">Brands</a>
<div class="sub-menu sm_wd">
<div>
<h4>By Brands:</h4>
<ul class="">
<li><a href="#">Dickies</a></li>
<li><a href="#">Red Kap</a></li>
<li><a href="#">Bulwark FR</a></li>
<li><a href="#">Timberland PRO</a></li>
<li><a href="#">Timberland Apparel</a></li>
<li><a href="#">Carhartt</a></li>
<li><a href="#">Portwest</a></li>
</ul>
</div>
</div>
</li>
<li class="sub-menu-parent" tab-index="0">
<a href="">Flame Resistant</a>
<div class="sub-menu sm_wd">
<div>
<h4>By Flame Resistant:</h4>
<ul class="">
<li><a href="#">FR Coveralls</a></li>
<li><a href="#">FR Jackets</a></li>
<li><a href="#">FR Lab Coats</a></li>
<li><a href="#">FR Shirts</a></li>
<li><a href="#">FR Pants</a></li>
<li><a href="#">FR Overalls</a></li>
<li><a href="#">FR Accessories</a></li>
<li><a href="#">FR Women's Apparel</a></li>
</ul>
</div>
</div>
</li>
<li class="sub-menu-parent" tab-index="0">
<a href="">Industry</a>
<div class="sub-menu sm_wd">
<div>
<h4>By Industry:</h4>
<ul class="">
<li><a href="#">Anti Static ESD</a></li>
<li><a href="#">Automotive</a></li>
<li><a href="#">Flame Resistant</a></li>
<li><a href="#">High Visibility</a></li>
<li><a href="#">Housekeeping</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Restaurant</a></li>
<li><a href="#">Construction</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Embroidery</a></li>
</ul>
</div>
<div class="get_qute hidden-xs">
<a href="#"><i class="fa fa-comment-o"></i> Get a Quote</a>
</div>
</div>
</div>
</div>
</div>
</header>
<!---- Bannner Section Start----->
<footer section="footr adspace">
<div class="upper-footer">
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-3 col-xs-6">
<h6>Account</h6>
<ul>
<li><a href="">My Account</a></li>
<li><a href="">Order History</a></li>
<li><a href="">Wish List</a></li>
<li><a href="">Specials</a></li>
</ul>
</div>
<div class="col-lg-3 col-sm-3 col-xs-6">
<h6>Services</h6>
<ul>
<li><a href="">Discount Returns</a></li>
<li><a href="">Refund Policy</a></li>
<li><a href="">Customer Service</a></li>
<li><a href="">Term & condition</a></li>
</ul>
</div>
<div class="col-lg-3 col-sm-3 col-xs-6">
<h6>Information</h6>
<ul>
<li><a href="">About us</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Delivery Information</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
<div class="col-lg-3 col-sm-3 col-xs-6">
<h6>Newsletter</h6>
<p>Join our list and get 10% off your first purchase!</p>
<form>
<input class="form-controla" type="search" placeholder="Email Address" aria-label="Search" />
<button class="btn subscribe" type="submit">Subscribe</button>
</form>
<p class="spam">*don’t worry we don’t spam</p>
</div>
</div>
</div>
</div>
<div class="copyright_sec">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Copyright © 2020 <a href="#" class="text-white">www.abc@gmail.com</a> All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</footer>
/* ==========================================================================
Global Styles
========================================================================== */
article,
aside,
details,
video,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
display: block;
}
html,
body {
width: 100%;
overflow-x: hidden !important;
}
body {
margin: 0;
background: #fff;
height: 100%;
font-family: "Cerebri Sans Pro";
}
ul li {
margin: 0;
padding: 0;
}
ul {
padding: 0;
margin: 0;
}
/* select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
text-indent: 1px;
text-overflow: "";
}
select::-ms-expand {
display: none;
} */
p {
padding: 0;
margin: 0;
}
a {
outline: none;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
color: #132953;
}
ul,
ol {
list-style: none;
list-style-image: none;
padding: 0;
margin: 0;
}
select,
input,
button,
a {
outline: none;
}
/* select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: "";
} */
button:focus {
border: 0;
outline: none;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #adbdc8 !important;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #adbdc8 !important;
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: #adbdc8 !important;
}
/* ==========================================================================
Heading Tags
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
.text_blue {
color: #0092ff;
}
.adspace {
padding: 50px 0;
}
.top-header {
background-color: #0092ff;
padding: 13px 0;
}
.main-header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-self: center;
justify-content: space-between;
}
.email {
align-self: center;
}
.email li {
padding: 0 10px;
display: inline-block;
border-right: 1px solid #21a0ff;
}
.email li:nth-last-child(1) {
border-right: 0;
}
.email li a i {
padding-right: 6px;
}
.email li a {
font-size: 16px;
color: #fff;
font-family: "Cerebri Sans Pro";
}
.social-icon {
align-self: center;
display: flex;
}
.social-icon li {
padding: 0 10px;
display: inline-block;
border-right: 1px solid #21a0ff;
}
.social-icon li:nth-last-child(1) {
border-right: 0;
}
.social-icon li a {
color: #fff;
font-size: 16px;
font-family: "Cerebri Sans Pro";
font-weight: 500;
}
.social-icon li a i {
padding-right: 6px;
}
.social-icon li a p {
display: inline-block;
}
.social-icon li a:hover {
text-decoration: none;
}
/* ==========================================================================
Main Nav Css Start
========================================================================== */
.main-nav {
padding: 16px 0;
}
.main-nav .form-inline {
border-radius: 5px;
overflow: hidden;
}
.main-nav .navbar {
width: 100%;
}
.main-nav a.navbar-brand {
margin: 5px 0;
}
.form_nav {
width: 400px !important;
border-radius: 0 !important;
background-color: #eff5f9 !important;
border: 1px solid #eff5f9;
}
.btn.btn-outline-success {
background-color: black !important;
border: 1px solid black !important;
border-radius: 0;
}
.btn-outline-success {
color: #fff !important;
border-color: #000 !important;
}
button.btn.btn-outline {
background: #d1e4f4 !important;
border: 1px solid #d1e4f4 !important;
border-radius: 0;
}
.login-btn {
display: flex;
flex-direction: row;
}
.login-btn li {
padding: 0 10px;
border-right: 1px solid #d3d3d3;
}
.login-btn li a {
color: #000;
font-size: 18px;
font-weight: 500;
}
.navbar-collapse {
justify-content: center;
}
.login-btn li a i {
color: #0092ff;
padding-right: 6px;
}
.login-btn li:nth-last-child(1) {
border-right: 0;
}
.menu_bar {
background-color: #e6f4ff;
}
.menu_custom {
text-align: left;
//padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu_custom ul li {
padding: 0 20px;
display: inline-block;
}
.menu_bar li a {
color: #000;
font-size: 18px;
font-weight: 500;
}
.get_qute a {
background-color: #0092ff;
font-size: 13px;
color: #fff;
font-weight: 700;
padding: 22px 37px;
text-transform: uppercase;
letter-spacing: 2px;
}
/* ==========================================================================
Menu hover Css Start
========================================================================== */
.sub-menu-parent {
position: relative;
}
.sub-menu {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(0em);
z-index: -1;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:focus-within .sub-menu,
.sub-menu-parent:hover .sub-menu {
visibility: visible;
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
}
.menu_item a {
display: block;
padding: 0.9em 1em;
text-decoration: none;
}
.menu_item a:hover {
color: #0092ff;
}
.menu_item ul,
.menu_item ul li {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu_item > ul {
text-align: center;
}
.menu_item > ul > li {
display: inline-block;
}
ul.sub-menu {
padding: 15px;
}
.full_wd {
width: auto;
min-width: 400px;
display: flex;
}
.sm_wd {
width: auto;
min-width: 200px;
}
.sub-menu {
filter: drop-shadow(0px 14px 23px rgba(208, 216, 223, 0.37));
background-color: #ffffff;
border-radius: 8px;
padding: 15px;
}
.sub-menu h4 {
font-size: 16px;
letter-spacing: 0px;
color: #000000;
font-weight: bold;
font-family: "Cerebri Sans Pro";
padding: 5px 10px;
text-align: left;
}
.sub-menu li {
display: block !important;
text-align: left;
padding: 0px 10px;
}
.sub-menu li a {
display: block !important;
padding: 5px 10px;
font-size: 16px;
letter-spacing: 0px;
color: #000000;
font-family: "Cerebri Sans Pro";
font-weight: 400;
}
.sub-menu:after {
content: "";
position: absolute;
left: 15px;
top: -15px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 17px 17px 17px;
border-color: transparent transparent #ffffff transparent;
z-index: 9998;
right: 20px;
}
/* ==========================================================================
Media query Css Start
========================================================================== */
@media only screen and (max-width: 991px) {
.social-icon li a p {
display: none;
}
.tabs-nav li {
padding: 0 10px;
}
.main-nav .form-inline {
flex: 1;
}
.navbar-collapse {
display: flex;
justify-content: center;
width: 100%;
}
.full_wd {
width: auto;
min-width: 100%;
display: block !important;
height: 150px;
overflow: auto;
}
.sm_wd {
width: auto;
min-width: 100%;
display: block !important;
height: 150px;
overflow: auto;
}
}
@media only screen and (max-width: 767px) {
.menu_bar {
background-color: #e6f4ff;
position: absolute;
top: 150px;
width: 100%;
z-index: 9;
}
.menu_custom ul li {
display: block;
padding: 6px 15px;
border-bottom: 1px solid #d7e9f8;
}
.menu_custom {
text-align: left;
padding: 10px 0;
}
.menu_custom {
display: block;
}
.hero {
height: 350px;
min-height: 350px;
}
.find_Uniform_img {
background-position: right;
}
#configure {
right: 35px;
position: absolute;
top: 29px;
}
#configure::after {
font-family: FontAwesome;
content: "\f0c9";
font-size: 29px;
letter-spacing: 2px;
position: absolute;
right: 0;
font-weight: normal;
line-height: 16px;
left: 0;
margin: 0 auto;
top: 7px;
color: #0092ff;
}
.email li:nth-last-child(1) {
border-right: 0;
display: none;
}
.form_nav {
width: 230px !important;
}
.hidden-xs {
display: none;
}
.tabs-nav li {
padding: 0 5px;
}
.adspace {
padding: 60px 0;
}
.btn-shop {
margin-top: 15px;
}
.mor-bnt {
padding: 18px 65px;
}
.upper-footer ul li {
padding-top: 10px;
}
.upper-footer h6 {
margin-top: 20px;
padding-bottom: 10px;
}
.main-nav .form-inline {
display: none;
}
#configure {
right: 35px;
position: absolute;
top: 0;
}
.navbar-collapse {
position: absolute;
right: 4px;
top: 60px;
width: auto;
}
}
/* ==========================================================================
Menu hover Css End
========================================================================== *
/*-----footer sec css strt-----*/
.upper-footer {
background: #1a2935;
color: #fff;
padding: 100px 0;
}
.upper-footer ul li {
display: block;
padding-top: 20px;
}
.upper-footer ul li a {
font-size: 16px;
letter-spacing: 0px;
color: #ffffff;
font-weight: 500;
font-family: "Cerebri Sans Pro";
}
.upper-footer h6 {
font-weight: bold;
font-size: 22px;
width: auto;
padding: 10px 0;
display: inline-block;
position: relative;
}
.upper-footer h6:after {
position: absolute;
content: "";
height: 3px;
width: 30px;
background: #fff;
bottom: 0;
left: 0;
transition: width 0.5s ease, background-color 0.5s ease;
}
.upper-footer h6:hover:after {
width: 100%;
}
.upper-footer p {
padding-top: 7px;
font-size: 16px;
letter-spacing: 0px;
line-height: 28px;
color: #ffffff;
font-weight: 500;
}
.upper-footer input.form-controla {
margin: 10px 0;
width: 100%;
height: 60px;
padding: 15px;
border: 1px solid;
}
.upper-footer .btn.subscribe {
background: #000;
color: #fff;
width: 100%;
height: 50px;
padding: 15px;
}
.upper-footer p.spam {
font-size: 12px;
}
.copyright_sec {
background: #13212c;
color: #fff;
text-align: center;
padding: 20px 0;
}
jQuery(document).ready(function () {
//mobile-click//
$("#configure").on("click", function (e) {
$("#configurator-wrap").toggleClass("hidden-xs");
e.preventDefault();
});
})(jQuery);
