<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 ---------->
<header class="header navbar-fixed-top">
<!-- Navbar -->
<nav class="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container js_nav-item">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<!-- Logo -->
<div class="logo">
<a class="logo-wrap" href="#body">
<img class="logo-img" src="http://via.placeholder.com/100x50" alt="Asentus Logo">
</a>
</div>
<!-- End Logo -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-collapse">
<div class="menu-container">
<ul class="nav navbar-nav navbar-nav-right">
<li class="js_nav-item nav-item active"><a class="nav-item-child nav-item-hover" href="#body">Home</a></li>
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#about">About</a></li>
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#experience">Experience</a></li>
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#work">Work</a></li>
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#contact">Contact</a></li>
</ul>
</div>
</div>
<!-- End Navbar Collapse -->
</div>
</nav>
<!-- Navbar -->
</header>
http://www.free-css.com/template-categories/bootstrap
https://themewagon.com/themes/
http://markup.themewagon.com/reign-v2.0/showcase/
https://webdesign.tutsplus.com/tutorials/a-simple-responsive-grid-made-even-better-with-sass--cms-21540
https://www.sitepoint.com/creative-grid-system-sass-calc/
http://thesassway.com/intermediate/simple-grid-mixins
https://woocommerce.com/flexslider/
http://kevinbatdorf.github.io/liquidslider/
http://jacksbox.de/stuff/jquery-fractionslider/
.header .navbar,.header .navbar-toggle .toggle-icon,.service .service-element,.service .service-info,.service:hover .service-element,.service:hover .service-info,.social-icons,.social-icons:hover {
transition-duration: .3s;
transition-property: all;
transition-timing-function: cubic-bezier(.7,1,.7,1)
}
.social-icons {
width: 40px;
height: 40px;
font-size: 16px;
color: #515769;
background: #fff;
border-radius: 50%;
padding: 11px
}
.social-icons:hover {
color: #fff;
background: #515769
}
.promo-banner {
text-align: center
}
.promo-banner .promo-banner-title {
font-size: 50px;
color: #fff
}
.promo-banner .promo-banner-text {
font-size: 20px;
color: #fff;
opacity: .8
}
.promo-block {
background: #fafafa;
padding-top: 220px
}
.promo-block .promo-block-title {
font-size: 70px;
line-height: 1
}
@media (max-width: 480px) {
.promo-block .promo-block-title {
font-size:50px
}
}
.promo-block .promo-block-text {
font-size: 25px
}
.promo-block .promo-block-img-wrap {
position: relative;
height: 400px
}
.promo-block .promo-block-img {
position: absolute;
right: 0;
bottom: 0
}
@media (max-width: 768px) {
.promo-block {
text-align:center;
padding-top: 170px
}
.promo-block .promo-block-img-wrap {
height: auto
}
.promo-block .promo-block-img {
position: relative;
margin-left: auto;
margin-right: auto
}
}
.service {
background: #fff;
padding: 30px
}
.service .service-element,.service .service-info {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}
.service .service-icon {
display: block;
font-size: 30px;
color: #999caa;
margin-bottom: 30px
}
.service:hover .service-element {
opacity: 0;
-webkit-transform: translate3d(0,-100%,0);
-moz-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0)
}
.service:hover .service-info {
-webkit-transform: translate3d(0,-30%,0);
-moz-transform: translate3d(0,-30%,0);
transform: translate3d(0,-30%,0)
}
.footer .footer-logo {
width: 76px;
height: auto
}
.navbar-fixed-top .navbar-collapse {
max-height: 100%
}
.header .navbar {
background: #fff;
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.2)
}
.header .navbar-toggle {
width: 25px;
height: 25px;
border: none;
padding: 0;
margin: 35px 0
}
.header .navbar-toggle .toggle-icon {
position: relative;
width: 21px;
height: 1px;
display: inline-block;
background: #515769
}
.header .navbar-toggle .toggle-icon:after,.header .navbar-toggle .toggle-icon:before {
position: absolute;
left: 0;
background: #515769;
content: " "
}
.header .navbar-toggle:hover .toggle-icon,.header .navbar-toggle:hover .toggle-icon:after,.header .navbar-toggle:hover .toggle-icon:before {
background: #17bed2;
transition-duration: .3s;
transition-property: all;
transition-timing-function: cubic-bezier(.7,1,.7,1)
}
.header .navbar-toggle .toggle-icon:before {
width: 10px;
height: 1px;
bottom: 10px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
transition-duration: .3s;
transition-property: all;
transition-timing-function: cubic-bezier(.7,1,.7,1)
}
.header .navbar-toggle .toggle-icon:after {
width: 16px;
height: 1px;
top: -5px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
transition-duration: .3s;
transition-property: all;
transition-timing-function: cubic-bezier(.7,1,.7,1)
}
.header .navbar-toggle:hover .toggle-icon:after,.header .navbar-toggle:hover .toggle-icon:before {
width: 21px;
height: 1px
}
.header .navbar-toggle:hover .toggle-icon.is-clicked {
background: rgba(81,87,105,0)
}
.header .logo {
width: 100px;
height: 100px;
float: left;
max-height: 95px;
line-height: 65px
}
.header .logo-wrap {
display: inline-block;
padding: 15px 0
}
.header .logo-img {
display: inline-block;
width: 76px;
height: auto;
max-width: 100%;
max-height: 100%;
vertical-align: middle
}
.header .nav-item,.header .nav-item-child {
display: block;
position: relative
}
.header .navbar-nav {
padding-left: 0;
margin-bottom: 0;
list-style: none
}
.header .nav-item:last-child .nav-item-child {
padding-right: 0
}
.header .nav-item.active .nav-item-hover:after,.header .nav-item:hover .nav-item-hover:after {
opacity: 1;
transition-duration: .4s;
transition-property: all;
transition-timing-function: cubic-bezier(.7,1,.7,1)
}
.header .nav-item-child {
font-size: 13px;
font-weight: 600;
color: #515769;
line-height: 55px;
padding: 20px;
transition-duration: .3s;
transition-property: all;
transition-timing-function: cubic-bezier(.7,1,.7,1)
}
.header .nav-item-child:focus,.header .nav-item-child:hover {
background: inherit
}
.header .nav-item-hover {
position: relative
}
.header .nav-item-hover:after {
position: absolute;
top: 45px;
left: 0;
width: 9px;
height: 2px;
background: #17bed2;
opacity: 0;
content: " ";
transition-duration: .4s;
transition-property: all;
transition-timing-function: cubic-bezier(.7,1,.7,1)
}
@media (max-width: 991px) {
.header {
background:#fff
}
.header .navbar-toggle {
display: block
}
.header .navbar-collapse.collapse {
display: none!important
}
.header .navbar-collapse.collapse.in {
display: block!important
}
.header .nav-collapse {
padding-left: 0;
padding-right: 0
}
.header .navbar-nav {
margin: 0;
float: none
}
.header .navbar-nav .nav-item {
float: none
}
.header .menu-container:after,.header .menu-container:before {
content: " ";
display: table
}
.header .menu-container:after {
clear: both
}
.header .nav-item-child {
color: #515769;
line-height: 1.4;
padding: 12px 12px 12px 15px
}
.header .nav-item-hover:after {
position: absolute;
top: 19px
}
}
@media (max-width: 767px) {
.header .menu-container {
padding-left:15px;
padding-right: 15px;
margin-left: 0;
margin-right: 0
}
.header .navbar>.container,.header .navbar>.container>.nav-collapse {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0
}
.header .navbar>.container {
width: auto
}
}
@media (min-width: 992px) {
.header .navbar-nav-right {
float:right
}
.page-on-scroll .header .nav-item-child,.page-on-scroll .header .navbar {
transition-duration: .3s;
transition-property: all;
transition-timing-function: cubic-bezier(.7,1,.7,1)
}
.page-on-scroll .header .navbar {
background: #fff;
border-bottom-color: #f0f0f0
}
.page-on-scroll .header .nav-item-child {
color: #515769
}
}
