Footer industry theme

      No Comments on Footer industry theme

Footer industry theme built in CSS

Footer industry theme

Demo:

Check out live demo here

Footer industry theme

Markup:

<div class="main-footer">
     <div id="map"></div>
     <div class="footer col-md-12">
       <div class="logo-footer col-md-3">
           <h1>Scanfcode</h1>
           <span>Code wants to be simple</span>
           <br /><br />
           <p>Scanfcode.com “CODE WANTS TO BE SIMPLE”  is an initiative  to help the upcoming programmers with the code.
</p>
           <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-6 contact-form">
        <h3>Contact Us</h3>
        <form>
          <div class="col-md-6">
            <input type="text" placeholder="Name"/>
            <input type="email" placeholder="Email"/>
            <input type="tel" placeholder="Contact"/>
            <input  type="text" placeholder="Company name"/>
            <input type="text"  placeholder="Loacation"/>
          </div>
          <div class="col-md-6">
           <textarea>(Message)</textarea>
              <button class=" btn-submit" type="submit">Send Message</button>
          </div>
     
        </form>
       </div>
       <div class="col-md-3">
         <div class="footer-content">
           <div class="icon-holder"> <span class="icon glyphicon glyphicon-map-marker"></span></div>
           <div class="content-holder"><span class="heading-span">Head Office</span><br /><span>Scanfcode SCO-111, Chandigarh</span></div>
         </div>
         <div class="footer-content">
           <div class="icon-holder"> <span class="icon glyphicon glyphicon-earphone"></span></div>
           <div class="content-holder"><span class="heading-span">Contact Us</span><br /><span>+91 9876543210</span></div>
         </div>
         <div class="footer-content">
           <div class="icon-holder"> <span class="icon glyphicon glyphicon-envelope"></span></div>
           <div class="content-holder"><span class="heading-span">E-mail Us</span><br /><span>info@rajhanscattlefeed.com</span></div>
         </div>
       </div><hr />
       <footer class="copyright col-md-12" style="padding: 0;margin:0;"><span class="glyphicon">&#xe194;</span>
       <span>1988-2017 Scanfcode. All rights reserved</span></footer>
     </div>
  </div>

CSS:

@import url('https://fonts.googleapis.com/css?family=Anton|Open+Sans|Raleway');/*map*/
 .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;
}
.social-menu a
{
  color:#b3b3b3;
}
#map 
{ 
  height:300px;
  width: 100%;
}
/*footer*/
 .main-footer,.footer
{
  background: #041e42;
  color:#fff;
}
 .main-footer .col-md-12
{
  padding:2% 2% 1%;
}
 .footer
{
  position: relative;
}
 .logo-footer h1 
{
  font-family: 'Anton', sans-serif;
  font-size:4em;
}
 .logo-footer span
{
  font-family: 'Anton', sans-serif;
  font-size:1em;
}
 .main-footer  .social-menu
{ 
  display:block;
  width:100%;
  margin-top:4%;
  text-align: left;
}
 .main-footer .social-menu li
{
  display: inline; 
  margin:10px;
  font-size:24px;
  border-left:solid 0px #b3b3b3;
}
 .contact-form
{
   background: #fff;
  width:100%;
  padding:0 2% 2%;
  text-align: center;
  position: absolute;
  top:-100px;
  border-top:solid 4px #ffc300;
}
 .contact-form input, .contact-form textarea
{
  padding:10px 25px;
  border: solid 1px #fff;
  border-radius:2px;
  background:#f2f2f2;
  width:100%;
 margin:10px 0;
  color:#262626;
  font-weight:bolder;
}
 .contact-form textarea
{
  height:200px
}
 .contact-form h3
{
  font-weight:bolder;
  text-align:center;
  color:#404040;
  font-size:3em;
  font-family: 'Roboto', sans-serif;
}
 .btn-submit
{
  margin:30px 0;
  width:80%;
  background: #ffc300;
  border: solid 1px #ffc300;
  border-radius:20px;
  padding:10px;
}
 .footer-content
{
  padding:30px 10px;
  clear:both;
}
 .main-footer .icon
{
  color:#e6e6e6;
  opacity:0.8
}
 .main-footer .heading-span
{
  color:#ffc300
}
 .copyright
{
  text-align:center;
}
 @media only screen and (max-width: 1000px)
{
   .contact-form
  {
    padding:0 2% 1%;
    position:relative;
    top:2px;
   }
}

Script for google map API

 
      function initMap() {
        var uluru = {lat: 30.692437, lng: 76.248175};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }

Summary
Footer industry theme
Article Name
Footer industry theme
Description
Footer for industry theme website in CSS
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

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