<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>
<div id="mogo-header">
<div id="mogo-header-inner">
<!--navbar menu-->
<nav id="top-navbar" class="navbar navbar-default navbar-me">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menu-collapsed-button" data-toggle="collapse" data-target="#navbar-primary-collapse" aria-expanded="false">
<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 site-logo" href="index.html">MoGo</a>
</div>
<div class="collapse navbar-collapse navbar-right hidden-xs">
<ul class="nav navbar-nav main-nav">
<li class="active"><a href="#mogo-header">Home</a></li>
<li><a href="#mogo-story">About</a></li>
<li><a href="#mogo-services">Service</a></li>
<li><a href="#mogo-team">Our Team</a></li>
<li><a href="#mogo-portfolio">Work</a></li>
<li><a href="blog-page.html">Blog</a></li>
</ul>
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="collapse navbar-responsive-collapse hidden-lg hidden-md hidden-sm" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#mogo-header" data-toggle="collapse" data-target=".navbar-responsive-collapse">Home</a></li>
<li><a href="#mogo-story" data-toggle="collapse" data-target=".navbar-responsive-collapse">About</a></li>
<li><a href="#mogo-services" data-toggle="collapse" data-target=".navbar-responsive-collapse">Service</a></li>
<li><a href="#mogo-team" data-toggle="collapse" data-target=".navbar-responsive-collapse">Our Team</a></li>
<li><a href="#mogo-portfolio" data-toggle="collapse" data-target=".navbar-responsive-collapse">Work</a></li>
<li><a href="#mogo-blog" data-toggle="collapse" data-target=".navbar-responsive-collapse">Blog</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<!--slider section-->
<div id="mogo-slider" class="carousel slide container" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h2 class="mogo-slider-title">
<span class="mogo-slider-sub">Creative Template</span>
Welcome <br>to MoGo
</h2>
<a href="#" class="slider-btn">Learn more</a>
</div>
<div class="item">
<h2 class="mogo-slider-title">
<span class="mogo-slider-sub">Creative Template</span>
We Are <br>Creative
</h2>
<a href="#" class="slider-btn">Learn more</a>
</div>
<div class="item">
<h2 class="mogo-slider-title">
<span class="mogo-slider-sub">Responsive Design</span>
Responsive <br> Web Template
</h2>
<a href="#" class="slider-btn">Learn more</a>
</div>
<div class="item">
<h2 class="mogo-slider-title">
<span class="mogo-slider-sub">Strong Team</span>
We Have<br>Strong Team
</h2>
<a href="#" class="slider-btn">Learn more</a>
</div>
</div>
<!-- Indicators -->
<ul class="carousel-indicators clearfix">
<li data-target="#mogo-slider" data-slide-to="0" class="active">
<div class="inner">
<span class="number">01</span> intro
</div>
</li>
<li data-target="#mogo-slider" data-slide-to="1">
<div class="inner">
<span class="number">02</span> work
</div>
</li>
<li data-target="#mogo-slider" data-slide-to="2">
<div class="inner">
<span class="number">03</span> about
</div>
</li>
<li data-target="#mogo-slider" data-slide-to="3">
<div class="inner">
<span class="number">04</span> contacts
</div>
</li>
</ul>
</div><!--end slider section-->
</div>
</div>
</header><!--/Header End-->
#mogo-header{
position: relative;
font-family: 'Montserrat', sans-serif;
background: url("https://images.alphacoders.com/511/511344.jpg")no-repeat center center / cover;
}
#mogo-header:after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(243,129,129,0.9); /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(top, rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9));
background: -o-linear-gradient(top, rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9));
background: linear-gradient(to bottom, rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#mogo-header-inner{
position: relative;
z-index: 5;
}
/*=======================main navbar section===========================*/
#top-navbar{
background: none;
border: none;
border-radius: 0;
}
#top-navbar .navbar-brand {
color: #fff;
font-weight: 700;
font-size: 20px;
}
#top-navbar .navbar-nav > li > a{
color: #fff;
text-align: center;
text-transform: uppercase;
}
#top-navbar .navbar-nav > li > a:hover, #top-navbar .navbar-nav > .active > a, #top-navbar .navbar-nav > .active > a:hover {
color: #fce38a;
border-color: #fce38a;
background: none;
}
#top-navbar .main-nav > li > a {
font-weight: 400;
text-transform: uppercase;
border-bottom: 2px solid transparent;
padding: 15px 5px 5px;
margin: 0 12px;
color: #fff;
text-align: center;
}
#top-navbar .navbar-collapse{
border-top-width: 0;
padding-top: 10px;
margin-top: 5px;
}
.fixed-me{
transition: all .5s ;
}
.fixed-me{
background-color:rgba(241, 114, 114, 0.96) !important;
padding: 0 !important;
margin-bottom: 5px;
position: fixed;
top:0;
z-index:888;
width: 100%;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.site-logo{
padding: 15px 16px;
margin: 15px 0;
}
.navbar-me{
min-height: 70px;
background-color: transparent;
top: 0;
border: 0;
border-radius: 0;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
.menu-collapsed-button{
margin: 20px 15px 10px 15px !important;
}
/*======================main slider section style===================*/
#mogo-slider {
padding: 40px 0 0;
}
#mogo-slider .carousel-inner {
height: auto;
}
#mogo-slider .carousel-inner > .item {
text-align: center;
color: #fff;
}
#mogo-slider .carousel-indicators {
width: 100%;
left: 0;
position: static;
margin: 0;
margin-top: 80px;
}
#mogo-slider .carousel-indicators li,
#mogo-slider .carousel-indicators li.active {
float: left;
width: 25%;
height: auto;
margin: 0;
text-indent: initial;
border-radius: 0;
background: none;
text-align: left;
border: none;
}
#mogo-slider .carousel-indicators li .inner {
border-top: 2px solid #f7eac4;
position: relative;
color: #faf3e0;
text-transform: uppercase;
margin: 0 12px;
padding: 10px 0;
}
#mogo-slider .carousel-indicators li:hover .inner,
#mogo-slider .carousel-indicators li.active .inner {
border-color: #fff;
color: #fff;
}
#mogo-slider .carousel-indicators li:hover .inner:after,
#mogo-slider .carousel-indicators li.active .inner:after {
content: "";
position: absolute;
left: 0;
top: -2px;
width: 60px;
height: 2px;
background: #f38181;
}
#mogo-slider .carousel-indicators li .number {
font-weight: 700;
font-size: 18px;
margin-right: 3px;
}
/*==============slider content===================*/
#mogo-slider .mogo-slider-title{
font-size: 110px;
color: #fff;
}
#mogo-slider .mogo-slider-title .mogo-slider-sub {
font-size: 55px;
}
.mogo-slider-title .mogo-slider-sub {
display: block;
text-transform: none;
font-weight: 400;
font-family: 'Kaushan Script', cursive;
font-size: 20px;
margin-bottom: 5px;
}
.mogo-slider-title{
font-weight: 700;
font-size: 25px;
line-height: 1;
position: relative;
padding-bottom: 20px;
margin-bottom: 30px;
text-align: center;
color: #333;
text-transform: uppercase;
}
.mogo-slider-sub {
font-weight: 700;
font-size: 25px;
line-height: 1;
position: relative;
padding-bottom: 20px;
margin-bottom: 30px;
text-align: center;
color: #333;
}
.mogo-slider-title .mogo-slider-sub:after{
background: #fff;
}
.mogo-slider-title:after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 50px;
height: 2px;
background: #fff;
transform: translateX(-50%);
}
.slider-btn{
display: inline-block;
color: #fff;
text-transform: uppercase;
padding: 10px 20px;
text-align: center;
border: 2px solid #fff;
font-size: 12px;
line-height: 100%;
}
