"http://www.lear.com/#whats-new #c4c4c4"
Bootstrap 3.3.0 Snippet by jeevan123456

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Travel</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Destination <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">New Delhi</a></li> <li><a href="#">Amritsar</a></li> <li><a href="#">Mumbai</a></li> <li><a href="#">Jaipur</a></li> <li><a href="#">Udaipur</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tours <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Deals</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact Us</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-collapse --> </nav> <div class= "banner-section banner-overlay "> <div class="container"> <div class="col-md-10"> <div class="banner-heading "> <h2>A Global Leader in Automotive Seating & E-Systems. </h2> <div class="divider"></div> <P> Lear Corporation is ranked #151 on the Fortune 500 with world-class products designed, engineered and manufactured by a diverse team of talented employees. Our vision is to be consistently recognized as the supplier of choice, an employer of choice, the investment of choice and a company that supports the communities where we do business. Learn More </P> <button type="button" class="btn btn-primary site-btn btns-sweep-to-right">Learn More</button> </div> </div> </div> </div> <div class="announce-area"> <div class="announce-box"> <div class="col-md-4 announce1"> <span>PRESS</span> <h3>Lear Corporation is ranked #151 on the Fortune 500 with world-class products designed.</h3> </div> <div class="col-md-4 announce2"> <span>PRESS</span> <h3>Lear Corporation is ranked #151 on the Fortune 500 with world-class products designed, engineered and manufactured by a diverse team of talented employees.</h3> </div> <div class="col-md-4 announce3"> <span>COMMUNITY</span> <h3>Lear Corporation is ranked #151 on the Fortune 500 with world-class products designed, engineered and manufactured by a diverse team of talented employees.</h3> </div> </div> </div> <div class="clearfix"></div> <div class="story-area area-padding"> <div class="container"> <div class="row"> <div class="col-md-7"> <div class="story-title"> <span>Vehicle Innovations </span> <h2>Imagination elevating engineering. </h2> <div class="divider"></div> <p>The continuing story of innovation at Lear begins with the discipline of design focused on delivering products that drive solutions for the increasing expectations of the end-consumer. We invite you to discover some recent successes making an impact in the automotive industry.</p> <button type="button" class="btn btn-primary site-btn btns-sweep-to-right">Learn More</button> </div> </div> <div class="col-md-5"> <div class="story-img"> <img class="img-responsive" src="http://www.lear.com/assets/img/featured/innovations.png"> </div> </div> </div> </div> </div> <div class="overview-area"> <div class="container"> <div class="col-md-6 overview1"> <h3>Lear Corporation is ranked #151 on the Fortune 500 with world-class products designed.</h3> </div> <div class="col-md-6 overview2"> <h3>Lear Corporation is ranked #151 on the Fortune 500 with world-class products designed, engineered and manufactured by a diverse team of talented employees.</h3> </div> </div> </div> <div class="story-area area-padding2"> <div class="container"> <div class="row"> <div class="col-md-7"> <div class="story-title"> <span>Vehicle Innovations </span> <h2> E-Systems. </h2> <div class="divider"></div> <p>The continuing story of innovation at Lear begins with the discipline of design focused on delivering products that drive solutions for the increasing expectations of the end-consumer. We invite you to discover some recent successes making an impact in the automotive industry.</p> <button type="button" class="btn btn-primary site-btn btns-sweep-to-right">Learn More</button> </div> </div> <div class="col-md-5"> <div class="story-img"> <img class="img-responsive" src="http://www.lear.com/assets/img/featured/seating.png"> </div> </div> </div> </div> </div> <div class="overview-area"> <div class="container"> <div class="col-md-6 overview1"> <h3>Lear Corporation is ranked #151 on the Fortune 500 with world-class products designed.</h3> </div> <div class="col-md-6 overview2"> <h3>Lear Corporation is ranked #151 on the Fortune 500 with world-class products designed, engineered and manufactured by a diverse team of talented employees.</h3> </div> </div> </div> <div class="footer-section"> <div class="footer"> <div class="container"> <div class="col-md-4 footer-one"> <h5>About Us </h5> <p>Cras sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="social-icons"> <a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a> <a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a> <a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a> <a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a> </div> </div> <div class="col-md-3 footer-two"> <h5>Information </h5> <ul> <li><a href="maintenance.html">Maintenance Tips</a></li> <li><a href="contact.html">Locations</a></li> <li><a href="about.html">Testimonials</a></li> <li><a href="about.html">Careers</a></li> <li><a href="about.html">Partners</a></li> </ul> </div> <div class="col-md-3 footer-three"> <h5>Helpful Links </h5> <ul> <li><a href="maintenance.html">Maintenance Tips</a></li> <li><a href="contact.html">Locations</a></li> <li><a href="about.html">Testimonials</a></li> <li><a href="about.html">Careers</a></li> <li><a href="about.html">Partners</a></li> </ul> </div> <div class="col-md-2 footer-four"> <h5>Helpful Links </h5> <ul> <li><a href="maintenance.html">Maintenance Tips</a></li> <li><a href="contact.html">Locations</a></li> <li><a href="about.html">Testimonials</a></li> <li><a href="about.html">Careers</a></li> <li><a href="about.html">Partners</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center "> <div class="copyright-text"> <p>CopyRight © 2017 Digital All Rights Reserved</p> </div> </div> <!-- End Col --> </div> </div> </div> </div>
/* CTA CSS */ .cta-padding35 { padding: 5px 0 15px; background-color: #000; color:#fff; } /************** Footer CSS **************/ /* Footer */ .footer { position: relative; background-color: #fff; color: #707070; padding: 55px 0 40px; } .footer h5 { font-size: 22px; font-weight: 700; color: #696969; position: relative; padding-bottom: 16px; } .footer h5:after { content: ''; display: block; margin: 5px 0 0; width: 40%; height: 3px; background-color: #dd0000; } .footer ul { list-style: none; line-height: 2.2em; padding-left:0px; } .footer ul a { color:#707070;; font-size:16px; } .footer ul a:hover { color:#dd0000;; text-decoration:none; } /*footer bottom */ .footer-bottom { padding-top: 5px; padding-bottom: 15px; border-top: 1px solid rgba(0,0,0,0.09); background: #fff; } .copyright-text p { color: #707070; margin-top: 18px; margin-bottom: 0; font-size:14px; } /* Social Icons */ .social-icons{ margin: 0; padding: 0; font-size : 10px; } .social { margin:7px 7px 7px 0px; color:#dd0000; } #social-fb:hover { color: #3B5998; transition:all .25s; } #social-tw:hover { color: #4099FF; transition:all .25s; } #social-gp:hover { color: #d34836; transition:all .25s; } #social-em:hover { color: #f39c12; transition:all .25s; } /*********** OVERVIEW CSS ***********/ .overview1{min-height:400px;max-height:400px;color:#fff;background:#1b1b1c;} .overview2{min-height:400px;max-height:400px;color:#fff;background:#696969;} /*********** Story CSS **************/ .story-title h2 {font-size:60px;font-weight:900;} .story-area span {} .area-padding{padding:80px 0px 80px 0px;} .area-padding2{padding:80px 0px 0px 0px;} /****************Annouce CSS ***********/ .announce1{min-height:300px;max-height:300px;color:#fff;background:#dd0000;padding:30px 30px 120px 30px;} .announce2{min-height:300px;max-height:300px;color:#fff;background:#696969;padding:30px 30px 120px 30px;} .announce3{min-height:300px;max-height:300px;color:#000;background:#fff;padding:30px 30px 120px 30px;} span {font-weight:600;color:#dd0000;} /************** Generic CSS ********/ .site-btn{ display: inline-block; width: auto; border: 0; outline: none; text-decoration: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; text-align: center; position: relative; color: #ffffff; background-color: #e53329; text-transform: uppercase; font-size: 13px; height: 46px; line-height: 1.3; cursor: pointer; transition: none; margin-right: 0.167rem; margin-top: 2.222rem; padding:0px 50px; border-radius:0px; } .btns-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .btns-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #dd0000; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .btns-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: white; } .btns-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /********Banner *************/ .banner-overlay { background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.7)), url("https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"); background-repeat: no-repeat; background-size: cover; background-position: center center; color: #fff; padding-top: 200px; padding-bottom:100px; } .banner-heading h2 { color:#fff ; font-size: 52px; font-weight: 600; } .banner-heading P { color:#c4c4c4; padding-bottom:20px; font-size: 19px; font-weight: 400; } .banner-heading span p { color:#cd0e00; } .divider {margin:20px 0px 20px 0px;border-bottom: 4px solid #dd0000; width:20%;} /************ Navigation******************/ .caret-up { width: 0; height: 0; border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-bottom: 4px solid; display: inline-block; margin-left: 2px; vertical-align: middle; } .dropdown-menu {padding:0px;} .dropdown-menu > li > a { color: #514f4f; text-decoration: none; background-color: #fff ; } .dropdown-menu > li > a:hover { color: #fff; text-decoration: none; background-color: #dd0000 ; } .dropdown-menu > li > a {padding:8px; border-bottom:1px solid #e2e2e2;} .navbar-default { background-color: #000 ; border-color: #084672; padding:10px 0px 10px 0px; font-weight:600; letter-spacing:0px; font-size:16px; } .navbar-default .navbar-brand { color: #d2d2d2; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #ffffff; } .navbar-default .navbar-text { color: #d2d2d2; } .navbar-default .navbar-nav > li > a { color: #d2d2d2; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; background-color: #000; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #ffffff; background-color: #000; } .navbar-default .navbar-toggle { border-color: #000; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #000; } .navbar-default .navbar-toggle .icon-bar { background-color: #d2d2d2; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #d2d2d2; } .navbar-default .navbar-link { color: #d2d2d2; } .navbar-default .navbar-link:hover { color: #ffffff; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #d2d2d2; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #000; } }

Related: See More


Questions / Comments: