Industry theme – header template

      No Comments on Industry theme – header template

Industry theme – header template in CSS only

Industry theme - header template

This template uses

  • Responsive using – Bootstrap framework
  • CSS for styling and @media queries for styling according to different view areas.

Industry theme – header template

Html markup:

  <div class="main-header">
     <div class="topbar-desktop">
        <span class="only-desktop"><span class="icon glyphicon glyphicon-map-marker"></span> <span>Scanfcode, C-4 abc colony, India</span></span>
        <ul class="social-menu">
          <li><a href="#"><i class="fa fa-facebook"></i></a></li>
          <li><a href="#"><i class="fa fa-twitter"></i></a></li>
          <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
        </ul>
     </div>
     <div class="col-md-12 logo-container">
       <div class="col-md-4 logo">
         <div class="logo-inner">
           <h1>Scanfcode </h1>
           <span>Code wants to be simple</span>
         </div>
       </div>
       <div class="col-md-8 contact-info">
         <div class="col-md-4 col-md-offset-1" >
           <div class="icon-holder"> <span class="icon glyphicon glyphicon-envelope"></span></div>
           <div class="content-holder"><span class="heading-span">E-mail Support</span><br /><span>info@mywebsite.com</span></div>
         </div>
          <div class="col-md-4">
           <div class="icon-holder"><span class="icon glyphicon glyphicon-time"></span></div>
           <div class="content-holder"><span class="heading-span">Office hours</span><br /><span>Monday-Saturday <br />(7 AM - 8 PM)</span></div>
         </div>
         <div class="col-md-3 call-box">
          <button class="btn btn-custom"><span class="call-us">CALL US</span><br /><span class="contact-number">+91 987654321</span></button>
         </div>
       </div>
       <div class="navigation">
         <ul><li><a href="index.php">Home</a></li>
         <li><a href="index.php">Products</a></li>
         <li><a href="index.php">about us</a></li>
         <li><a href="index.php">services</a></li>
         <li><a href="index.php">gallery</a></li>
         <li><a href="index.php">contact us</a></li></ul>
       </div>
     </div>   
  </div>

CSS styles:

@import url('https://fonts.googleapis.com/css?family=Anton|Open+Sans|Raleway');
 /*genral*/
body,h1,h2,h3,h4,h5,h6,p,span,i,b,a,ul,li,ol,button,div 
{
  font-family: 'Raleway', sans-serif;
}
 a 
{ 
   color:#b3b3b3;
}
 .icon 
{
  color:#ffc300;
}
 li
{
  list-style-type: none;
}
 a:hover
{
  text-decoration: none;
}
 /*header*/
 .topbar-desktop
{ 
   background: #041e42;  
   width: 100%; 
   padding:1% 5%;
   color:#b3b3b3; 
}
.social-menu
{ 
  display:inline;
  width:50%;
  float:right;
  text-align: right; 
}
 .social-menu li
{
  display: inline;
  padding:0 2%;
  border-left:solid 1px #b3b3b3;
}
 .social-menu li:first-child
{
  border-left:solid 0px;
}
 .social-menu a 
{
  color:#b3b3b3; 
}
 .social-menu a:hover 
{ 
  color:#ffc300; 
}
 .logo-container
{
  height:150px;
  position: relative;
}
 .logo { 
   height:100%;
   background:#ffc300;
   left:-85px;
   -webkit-transform: skewX(-40deg);
   transform: skewX(-40deg);
   text-align: right;}
 .logo-inner
{
  -webkit-transform: skewX(40deg);
  transform: skewX(40deg);
  padding:5%;
  margin-right:12%;
  color:#041e42;
}
 .logo h1 
{
  font-family: 'Anton', sans-serif;
  font-size:4em;
  padding:0;
  margin:0;
}
 .logo span
{
  font-family: 'Anton', sans-serif;
  font-size:1em;
}
 .contact-info
{ 
  height:100%;
  padding:3%;
  cursor:pointer;
}
 .heading-span
{
  letter-spacing: 2px;
  color: #808080;
  font-size:14px;
}
 .icon-holder
{
  font-size:30px;
  width:40px;
  display: inline;
  height: 100%;
  float:left;
  border-right: solid 1px #b3b3b3;
}
 .content-holder
{
  display: inline;
  width: 70%;
  float:left;
  padding-left:20px;
}
 .call-box, .contact-number,.call-us
{
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}
 .call-us
{
  color:#e6e6e6;
  font-size: 14px;
}
 .contact-number
{
  letter-spacing:2px;
  font-size:12px;
  color:#f2f2f2;
}
 .btn-custom
{
  background: #993333;
  border:solid 1px #993333 ;
}
 /*navigation*/
 .navigation
{
  position: absolute;
  bottom:-30px;
  background: #041e42;
  height:60px;
  z-index:3;
  width:90%;
  margin: 0 5% 0 4%;
  padding:20px 0px;
}
 .navigation li
{
  list-style-type: none;
  display: inline;
  padding:0 4%;
}
 .navigation a
{
  text-transform: uppercase;
  color:#fff;
  font-weight:bold;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}
 .navigation a:hover
{
  color:#993333;
  text-decoration: none;
}

/*responsive*/
 @media only screen and (max-width: 1000px)
 {
    .only-desktop,.contact-info
   {
      display:none;
   }
    .social-menu
   { 
     display:block;
     width:100%;
     float:none;
     text-align:right;
   }
    .logo-container
   {
     height:120px;
     position: relative;
   }
    .logo 
   {
     height:100%;
     left:-25%;
     width:75%;
   }
    .logo-inner
   {
     margin-right:1%;
   }
    /*navigation*/
   .navigation
   {
     height:250px;
     top:100%;
     padding:2% 2% 2% 0;
   }
    .navigation li
   {
     display: block;
     padding:1%;
     border-bottom:solid 1px #ccc;
    }
 }
 @media only screen and (max-width: 500px)
 {
      .logo {width:100%;}
 }
 

Live demo:

See the Pen Modern header in CSS by scanfcode (@scanfcode) on CodePen.

Summary
Industry theme - header template
Article Name
Industry theme - header template
Description
Industry theme - header template in CSS only.This template uses :Responsive using - Bootstrap framework. CSS for styling and @media queries for styling according to different view areas.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *