"Bootstrap page"
Bootstrap 3.3.0 Snippet by Munei89

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid" style="background:#fff; border-bottom:1px solid #d1d1d1;"> <div class="container"> <!-- Topper w/ logo --> <div class="row hidden-xs topper"> <div class="col-xs-7 col-sm-7"> <a href="//convertify.io"><img am-TopLogo alt="SECUREVIEW" src="http://blog.convertify.io/assets/images/logo--hero.png" class="img-responsive"></a> </div> <div class="col-xs-5 col-xs-offset-1 col-sm-5 col-sm-offset-0 text-right "> <span>Already a member?</span> <span>Already a member?</span> <span>Already a member?</span> </div> </div> <!-- End Topper --> </div> </div> <div class="container-fluid"> <!-- Navigation --> <div class="container"> <div class="row"> <nav class="navbar navbar-inverse" 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=".navbar-ex1-collapse"> <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 visible-xs-inline-block nav-logo" href="/"><img src="/images/logo-dark-inset.png" class="img-responsive" alt=""></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav js-nav-add-active-class"> <li><a href="/index.html">Home</a></li> <li class="active"><a href="/markets.html">Markets</a></li> <li><a href="/buy.html">Buy</a></li> <li><a href="/svstrike.html">svStrike</a></li> <li><a href="/training.html">Training</a></li> <li><a href="/contact.html">Contact Us</a></li> <li class="visible-xs-block"><a href="/about.html">About Us</a></li> <li class="visible-xs-block"><a href="/careers.html">Careers</a></li> <li class="visible-xs-block"><a href="/press-release.html">Press Release</a></li> <li class="visible-xs-block"><a href="https://susteen7.zendesk.com/hc/en-us">Support</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Company <b class="caret"></b></a> <ul class="dropdown-menu" role="menu"> <li><a href="about.html">About Us</a></li> <li><a href="careers.html">Careers</a></li> <li><a href="press-release.html">Press Release</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right hidden-xs"> <a type="button" class="navbar-btn btn btn-gradient-blue" am-latosans="bold" href="https://susteen7.zendesk.com/hc/en-us">Support</a> </ul> </div><!-- /.navbar-collapse --> </div> </nav> </div> </div> </div> <div class="container-fluid intro-header" style="background-image: url('http://lorempixel.com/output/people-q-c-1920-1080-4.jpg')"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3"> <div class="quick-links"> <p><a href="#" class="btn btn-block btn-primary">Demo Primary Button</a></p> <p><a href="#" class="btn btn-block btn-primary">Demo Primary Button</a></p> <p><a href="#" class="btn btn-block btn-primary">Demo Primary Button</a></p> <p><a href="#" class="btn btn-block btn-primary">Demo Primary Button</a></p> </div> </div> <div class="col-lg-9 col-md-9"> <div class="search"> <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" /> <button type="submit" class="btn btn-primary btn-sm">Search</button> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="heading"> <h2>Our <strong>Great Team</strong></h2> <p>To try the most advanced business</p> </div><!-- //end heading --> <div class="row work-section"> <div class="col-xs-6 col-sm-4 col-md-3"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000006_230x230.jpg"> <span class="actions"> <span class="project-details">Mélamine Tafisa</span> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000568_230x230.jpg"> <span class="actions"> <span class="project-details">Bandes de chant en ABS / PVC</span> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000569_230x230.jpg"> <span class="actions"> <span class="project-details">Bandes de chant en polyester</span> </span> </figure> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3"> <div class="project"> <figure class="img-responsive"> <img src="http://dev.cybercat.ca/commonwealth/images/1000571_230x230.jpg"> <span class="actions"> <span class="project-details">Bandes de chant en mélamine</span> </span> </figure> </div> </div> </div> <div class="heading"> <h2>Our <strong>Great Team</strong></h2> <p>To try the most advanced business</p> </div><!-- //end heading --> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="progress blue"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span> <div class="progress-value">90%</div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="progress yellow"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span> <div class="progress-value">75%</div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="progress yellow"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span> <div class="progress-value">75%</div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="progress yellow"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span> <div class="progress-value">75%</div> </div> </div> </div> <div class="heading"> <h2>Our <strong>Great Team</strong></h2> <p>To try the most advanced business</p> </div><!-- //end heading --> <div class="row"> <div class="col-sm-4"> <div class="team-members"> <div class="team-avatar"> <img class="img-responsive" src="http://keenthemes.com/assets/bootsnipp/member1.png" alt=""> </div> <div class="team-desc"> <h4>John Doe</h4> <span>Marketing</span> </div> </div> </div> <div class="col-sm-4"> <div class="team-members"> <div class="team-avatar"> <img class="img-responsive" src="http://keenthemes.com/assets/bootsnipp/member2.png" alt=""> </div> <div class="team-desc"> <h4>Melisa Doe</h4> <span>Founder</span> </div> </div> </div> <div class="col-sm-4"> <div class="team-members"> <div class="team-avatar"> <img class="img-responsive" src="http://keenthemes.com/assets/bootsnipp/member3.png" alt=""> </div> <div class="team-desc"> <h4>Alex Atkinson</h4> <span>Director</span> </div> </div> </div> </div><!-- //end row --> </div> </div> <div class="container-fluid"> <div class="container"> <!--footer--> <footer class="footer1"> <div class="container"> <div class="row"><!-- row --> <div class="col-lg-3 col-md-3"><!-- widgets column left --> <ul class="list-unstyled clear-margins"><!-- widgets --> <li class="widget-container widget_nav_menu"><!-- widgets list --> <h1 class="title-widget">Useful links</h1> <ul> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> </ul> </li> </ul> </div><!-- widgets column left end --> <div class="col-lg-3 col-md-3"><!-- widgets column left --> <ul class="list-unstyled clear-margins"><!-- widgets --> <li class="widget-container widget_nav_menu"><!-- widgets list --> <h1 class="title-widget">Useful links</h1> <ul> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> </ul> </li> </ul> </div><!-- widgets column left end --> <div class="col-lg-3 col-md-3"><!-- widgets column left --> <ul class="list-unstyled clear-margins"><!-- widgets --> <li class="widget-container widget_nav_menu"><!-- widgets list --> <h1 class="title-widget">Useful links</h1> <ul> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Lorem</a></li> </ul> </li> </ul> </div><!-- widgets column left end --> <div class="col-lg-3 col-md-3"><!-- widgets column center --> <ul class="list-unstyled clear-margins"><!-- widgets --> <li class="widget-container widget_recent_news"><!-- widgets list --> <h1 class="title-widget">Contact Detail </h1> <div class="footerp"> <h2 class="title-median">Flintdesignz (PTY) Ltd.</h2> <p><b>Email id:</b> <a href="mailto:info@webenlance.com">info@flintdesignz.com</a></p> <p><b>Helpline Numbers </b> <b style="color:#ffc106;">(8AM to 10PM):</b> +27 835547421</p> <p><b>Lorem Address</b></p> <p><b>Phone Numbers : </b>+27 835547421, </p> </div> <div class="social-icons"> <ul class="nomargin"> <a href="https://www.facebook.com/#"><i class="fa fa-facebook-square fa-3x social-fb" id="social"></i></a> <a href="https://twitter.com/#"><i class="fa fa-twitter-square fa-3x social-tw" id="social"></i></a> <a href="https://plus.google.com/#"><i class="fa fa-google-plus-square fa-3x social-gp" id="social"></i></a> <a href="mailto:#"><i class="fa fa-envelope-square fa-3x social-em" id="social"></i></a> </ul> </div> </li> </ul> </div> </div> </div> </footer> <!--header--> <div class="footer-bottom"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="copyright"> © 2017, Flintdesignz, All rights reserved </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="design"> <a target="_blank" href="#">Web Design & Development by Flintdesignz</a> </div> </div> </div> </div> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); [am-LatoSans] { font-family: 'Lato', sans-serif; } [am-TopLogo] { max-height: 70px; max-width: 210px; margin: 12px 11px; } [am-CallNow] { font-weight: 200; color: #333; vertical-align: middle; line-height: 35px; font-size: 19px; padding-right: 8px; } /* Relevant styles below */ .topper { display: flex; justify-content: space-between; align-items: flex-end; } .navbar.navbar-inverse { } .navbar .navbar-nav > li > a { color: #d1d1d1; font-weight: 700; line-height: 18px; } .navbar .navbar-nav > li.active { color: #f8f8f8; border-left: 1px solid #2A2A2A; border-right: 1px solid #272727; } .navbar-inverse { background-color:#fff; border:none; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { background-color: transparent; color: #d1d1d1; } .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #d1d1d1; background-color: transparent; } .navbar .navbar-nav > li.active { color: #d1d1d1; border:none; } .intro-header { background-color: #777777; background: no-repeat center center; background-attachment: scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; margin-bottom: 50px; /*width:100vw;*/ height: 100vh; padding: 50px; } .search { padding: 5px 0; height: 30px; position: relative; line-height: 22px; } /*.search input {*/ /* position: absolute;*/ /* width: 0px;*/ /* float: Left;*/ /* margin-left: 210px;*/ /* -webkit-transition: all 0.7s ease-in-out;*/ /* -moz-transition: all 0.7s ease-in-out;*/ /* -o-transition: all 0.7s ease-in-out;*/ /* transition: all 0.7s ease-in-out;*/ /* height: 30px;*/ /* line-height: 18px;*/ /* padding: 0 2px 0 2px;*/ /* border-radius:1px;*/ /*}*/ .search:hover input, .search input:focus { /*width: 200px;*/ margin-left: 0px; } .project { margin-bottom: 30px; vertical-align: top; margin-right: 30px; float: left; cursor: pointer; width:100%; background:blue; } .project figure { position: relative; display: inline-block; } .project figure img { width: 100%; } .project figure:hover figcaption { background:#d81e05; } .project figure:hover figcaption .project-details { color: #fff; } .project figure:hover .actions { background-color: rgba(216,30,5,.8); top: 0%; font-size:2.3em; font-weight:700; padding-top:10%; } .project figure .actions { display: table-cell; position: absolute; bottom: 0px; top: 50%; left:0; right:0; z-index: 1; opacity: 1; background-color: rgba(29,29,29,.5); -ms-transition: all .2s ease-out; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; color:#fff; font-size:2em; padding:2%; font-weight:400; text-align:center; vertical-align: middle; } @media (min-width: 992px) { .project figure .actions { top: 60%; left:0; right:0; font-size:1.5em; padding:2%; } .project figure:hover .actions { top: 0%; font-size:2em; padding-top:20%; } } @media (min-width: 1200px) { .project figure .actions { top: 65%; left:0; right:0; font-size:1.1em; padding:2%; font-weight:400; } .project figure:hover .actions { top: 0%; font-size:1.5em; padding-top:25%; } } .progress{ width: 150px; height: 150px; line-height: 150px; background: none; margin: 0 auto; box-shadow: none; position: relative; } .progress:after{ content: ""; width: 100%; height: 100%; border-radius: 50%; border: 12px solid #fff; position: absolute; top: 0; left: 0; } .progress > span{ width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; } .progress .progress-left{ left: 0; } .progress .progress-bar{ width: 100%; height: 100%; background: none; border-width: 12px; border-style: solid; position: absolute; top: 0; } .progress .progress-left .progress-bar{ left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px; border-left: 0; -webkit-transform-origin: center left; transform-origin: center left; } .progress .progress-right{ right: 0; } .progress .progress-right .progress-bar{ left: -100%; border-top-left-radius: 80px; border-bottom-left-radius: 80px; border-right: 0; -webkit-transform-origin: center right; transform-origin: center right; animation: loading-1 1.8s linear forwards; } .progress .progress-value{ width: 90%; height: 90%; border-radius: 50%; background: #44484b; font-size: 24px; color: #fff; line-height: 135px; text-align: center; position: absolute; top: 5%; left: 5%; } .progress.blue .progress-bar{ border-color: #049dff; } .progress.blue .progress-left .progress-bar{ animation: loading-2 1.5s linear forwards 1.8s; } .progress.yellow .progress-bar{ border-color: #fdba04; } .progress.yellow .progress-left .progress-bar{ animation: loading-3 1s linear forwards 1.8s; } .progress.pink .progress-bar{ border-color: #ed687c; } .progress.pink .progress-left .progress-bar{ animation: loading-4 0.4s linear forwards 1.8s; } .progress.green .progress-bar{ border-color: #1abc9c; } .progress.green .progress-left .progress-bar{ animation: loading-5 1.2s linear forwards 1.8s; } @keyframes loading-1{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(180deg); transform: rotate(180deg); } } @keyframes loading-2{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(144deg); transform: rotate(144deg); } } @keyframes loading-3{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes loading-4{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(36deg); transform: rotate(36deg); } } @keyframes loading-5{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(126deg); transform: rotate(126deg); } } @media only screen and (max-width: 990px){ .progress{ margin-bottom: 20px; } } .content { padding-top: 30px; } /* Heading */ .heading { z-index: 1; position: relative; text-align: center; margin-bottom: 100px; } .heading:after { left: 50%; height: 3px; width: 50px; content: " "; bottom: -35px; margin-left: -25px; position: absolute; background: #444; } .heading h2 { font-size: 40px; font-weight: 500; margin: 0 0 20px; color: #444; } .heading p { font-size: 16px; font-weight: 300; letter-spacing: 0.5px; text-transform: uppercase; color: #8693a7; } /* Team Members */ .team-members { width: 100%; cursor: pointer; overflow: hidden; position: relative; margin-bottom: 35px; } .team-members .team-avatar { position: relative; } .team-members .team-avatar:after { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background: rgba(129, 129, 129, 0.1); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .team-members .team-avatar img { display: block; margin: 0 auto; text-align: center; } .team-members .team-desc { left: auto; bottom: 0; width: 100%; padding: 0 20px; position: absolute; opacity: 0; color: #fff; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .team-members .team-desc h4 { font-size: 22px; font-weight: 600; margin: 0 0 10px; color: #fff; } .team-members .team-desc span { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #fff; } .team-members:hover .team-avatar:after { background: rgba(47, 60, 72, 0.5); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .team-members:hover .team-desc { -webkit-transform: translate3d(0, -5%, 0); transform: translate3d(0, -5%, 0); -webkit-transform: translate3d(0, -10%, 0); transform: translate3d(0, -10%, 0); } .team-members:hover .team-desc { opacity: 1; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .footer1 { background: #fff url("../images/footer/footer-bg.png") repeat scroll left top; padding-top: 40px; padding-right: 0; padding-bottom: 20px; padding-left: 0;/* border-top-width: 4px; border-top-style: solid; border-top-color: #003;*/ } .title-widget { color: #898989; font-size: 20px; font-weight: 300; line-height: 1; position: relative; text-transform: uppercase; font-family: 'Fjalla One', sans-serif; margin-top: 0; margin-right: 0; margin-bottom: 25px; margin-left: 0; padding-left: 28px; } .title-widget::before { background-color: #ea5644; content: ""; height: 22px; left: 0px; position: absolute; top: -2px; width: 5px; } .widget_nav_menu ul { list-style: outside none none; padding-left: 0; } .widget_archive ul li { background-color: rgba(0, 0, 0, 0.3); content: ""; height: 3px; left: 0; position: absolute; top: 7px; width: 3px; } .widget_nav_menu ul li { font-size: 13px; font-weight: 700; line-height: 20px; position: relative; text-transform: uppercase; border-bottom: 1px solid rgba(0, 0, 0, 0.05); margin-bottom: 7px; padding-bottom: 7px; width:95%; } .title-median { color: #636363; font-size: 20px; line-height: 20px; margin: 0 0 15px; text-transform: uppercase; font-family: 'Fjalla One', sans-serif; } .footerp p {font-family: 'Gudea', sans-serif; } #social:hover { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); } #social { -webkit-transform:scale(0.8); /* Browser Variations: */ -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; } /* Only Needed in Multi-Coloured Variation */ .social-fb:hover { color: #3B5998; } .social-tw:hover { color: #4099FF; } .social-gp:hover { color: #d34836; } .social-em:hover { color: #f39c12; } .nomargin { margin:0px; padding:0px;} .footer-bottom { background-color: #15224f; min-height: 30px; width: 100%; } .copyright { color: #fff; line-height: 30px; min-height: 30px; padding: 7px 0; } .design { color: #fff; line-height: 30px; min-height: 30px; padding: 7px 0; text-align: right; } .design a { color: #fff; } .quick-links { width:262px; transition:all .2s ease; } .pos-fixed { position:fixed; width:262px; z-index:9999; }
$(function(){ $(window).scroll(function(e) { if($(this).scrollTop()>352){ $('.quick-links').addClass('pos-fixed'); $('.work-section > .col-sm-4').removeClass('col-md-3'); $('.work-section > .col-sm-4').addClass('col-md-6'); $('.work-section').addClass('col-md-offset-3'); // Fading in the button on scroll after 150px } else{ $('.work-section > .col-sm-4').removeClass('col-md-6'); $('.work-section > .col-sm-4').addClass('col-md-3'); $('.work-section').removeClass('col-md-offset-3'); $('.work-section').removeClass('col-md-offset-3'); // Fading out the button on scroll if less than 150px } }); });

Related: See More


Questions / Comments: