<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="img/ico" href='images/favicon.png'>
<title>Demo</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/hitgoalz.js"></script>
</head>
<body>
<!--===============================================
NAVBAR
===============================================-->
<saction id="nav-wrapper" class="">
<div class="container position-rlt">
<nav class="navbar navbar-expand-sm navbar-dark">
<div class="hamburger">
<div class="cta">
<div class="toggle-btn type14"></div>
</div>
</div>
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="logo">
</a>
<!-- Horizontal Navbar -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"><img src="images/facebook.png" alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="images/Twitter.png" alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="images/Linkedin.png" alt=""></a>
</li>
</ul>
</nav>
</div>
</saction>
<section class="side-bar-warp">
<div class="sidebar-menu small-side-bar ">
<nav class="side-nav-warp">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
</ul>
</nav>
</div>
</section>
<section class="home-warp">
<div class="container">
<div class="row">
<div class="col-md-7 offset-md-5">
<div class="text-warp text-left">
<h1 class="title">Where goals are achieved.</h1>
<p class="sub-title">Intuitive, simple platform that helps you set meaningful Objectives and aligns your team to achieve the Key Results.</p>
<a class="btn-black" href="#">Let's Rock</a>
<a class="btn-whit" href="#">Let's Rock</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
@font-face {
font-family: 'TitilliumWeb';
src: url(../font-style/TitilliumWeb-Light.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
src: url(../font-style/Comfortaa-Regular.ttf) format('truetype');
}
body{
font-family: 'Comfortaa';
}
/*===========================SUPPORT CLASS===========================*/
.trans{
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.position-rlt{
position: relative;
}
.side-nav-warp{
padding-top:80px;
}
/*////////////////////////////////////////////////////
5.Navbar
////////////////////////////////////////////////////*/
#nav-wrapper{
background-color: transparent;
display: block;
position: fixed;
left: 0;
z-index: 999;
right: 0;
padding-top: 8px;
padding-bottom:8px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.main-navbar ul {
padding: 0px;
float: right;
margin-top: 15px;
}
.main-navbar ul li{
list-style-type:none;
display:inline-block;
}
.main-navbar ul li a {
display: inline-block;
text-decoration: none;
font-size: 15px;
color: #000;
padding: 8px 8px;
font-family: 'Comfortaa-Regular';
}
.main-navbar ul li a.company-link {
display: inline-block;
text-decoration: none;
font-size: 16px;
color: #000;
padding: 8px 10px;
font-weight: 600;
text-transform: uppercase;
font-family: 'Zubrak';
/* font-family: 'Comfortaa-Regular'; */
}
.main-logo{
display: inline-block;
float: left;
margin-top: 10px;
}
.side-nav-logo {
display:none;
margin-top: 20px;
margin-left: 30px;
}
.main-side-nav {
position: fixed;
z-index: 99;
top: 0px;
right: 0px;
height: 100vh;
width: 290px;
right:-400px;
overflow-y: scroll;
}
.main-side-nav .side-nav {
padding: 20px 20px 0px 30px;
margin: 0px;
float: none;
margin-right: 0px;
margin-top: 60px;
margin-bottom: 20px;
}
.main-side-nav .side-nav li {
display: block;
}
.main-link{
border: solid 1px #fff;
margin-bottom:10px;
padding:10px!important;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.main-link:hover{
background-color:#fff;
color:#000!important;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.main-link span{
float:right;
}
.main-side-nav > .side-nav > li > a {
display: block;
padding: 8px 20px;
color: #fff;
font-size: 16px;
text-align: left;
line-height: 20px;
font-weight: 400;
font-family: 'Zubrak';
padding-left: 0px;
}
.main-side-nav > .side-nav > li .menu-fa-icon{
margin-right:10px;
font-size: 22px;
}
.stick {
background-color: #fff!important;
display: block;
transition: top 0.3s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
#small_logo{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*HAMBURGER START*************************/
.hamburger {
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
margin: 0px 10px 0px 0px;
margin-left: -15px;
transition: all 1s ease;
}
.cta {
height: 50px;
width: 50px;
cursor: pointer;
position: absolute;
right: 0px;
}
.toggle-btn {
height: 2px;
width: 25px;
background-color: #353535;
position: relative;
top: 50%;
left: 0;
margin: auto;
transition: all 0.3s ease-in-out;
}
.toggle-btn:before {
content: "";
height: 2px;
width: 25px;
box-shadow: 0 -10px 0 0 #353535;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
}
.toggle-btn:after {
content: "";
height: 2px;
width: 25px;
box-shadow: 0 10px 0 0 #353535;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
}
.active .type14 {
background-color: #353535;
width: 12px;
margin: auto;
}
.active .type14:before {
width: 6px;
}
.active .type14:after {
width: 25px;
}
/*HAMBURGER END*************************/
.nav-item .nav-link{
display: block;
color:#c8c8c8;;
font-size:15px;
position: relative;
white-space: nowrap;
}
.user-icon{
width: 35px;
height: 35px;
display: inline-block;
background-color: #b80100;
border-radius: 50px;
}
@media (min-width: 576px){
.navbar-expand-sm .navbar-nav .nav-link {
margin-left: 15px;
}
}
/*============================SIDE BAR START============================*/
.sidebar-menu {
position: fixed;
right: 0px;
z-index: 99;
padding: 15px;
height: 100vh;
display: inline-block;
background-color: #ffffff;
box-shadow: -11px 0px 16px 0 rgba(0, 0, 0, 0.08), -8px 0px 6px 0 rgba(0, 0, 0, 0.08);
display: block;
min-height: 100%;
transition: all .3s cubic-bezier(.55,0,.1,1);
}
/*SMALL SIDE BAR****************/
.small-side-bar{
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transform: translate3d(200px,0,0);
}
.full-side-bar {
width: 200px!important;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transform: translate3d(0px,0,0);
}
@media (min-width: 576px){
.navbar-expand-sm .navbar-nav {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin-right: 75px;
}
}
/*==================HOME WARP==================*/
.home-warp{
background-image: url(../images/banner.jpg);
background-position:top center;
background-repeat:no-repeat;
padding-top: 20px;
padding-bottom: 80px;
}
.home-warp .text-warp{
padding-top:0px;
margin-bottom: 50px;
}
p{
line-height: 32px;
}
.title{
color:#353535;
font-size: 60px
}
.sub-title {
color: #353535;
line-height: 35px;
font-size: 25px;
}
.home-warp .text-warp .title{
margin-top:150px;
}
.home-warp .image-warp{
margin-top:50px;
position: relative;
}
.btn-black {
display: inline-block;
padding: 12px 15px;
color: #fff;
background-color: #262a34;
font-size: 14px;
font-weight: 600;
margin-top: 15px;
}
.btn-whit {
display: inline-block;
padding: 10px 15px;
color: #fff;
background-color: transparent;
font-size: 14px;
font-weight: 600;
margin-top: 15px;
border: solid 2px #fff;
box-sizing: border-box;
margin-left: 15px;
}
$(document).ready(function () {
$(document).on('click', '.cta', function () {
$(this).toggleClass('active')
})
});
$(document).ready(function(){
$(".hamburger").click(function(){
$('.sidebar-menu').removeClass("flowHide");
$(".sidebar-menu").toggleClass("full-side-bar");
$('.nav-link-name').toggleClass('name-hide');
});
});
//NAVBAR RESPONSIVE======================================
$(document).ready(function() {
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('#nav-wrapper').addClass('stick');
} else {
$('#nav-wrapper').removeClass('stick');
}
});
});
