<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/line-awesome.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!--=====================TOP NAV=====================-->
<section>
<div class="top_bar">
<div class="container">
<div class="col-md-6">
<ul class="social">
<li><a href=""><i class="fa fa-facebook text-white"></i></a></li>
<li><a href=""><i class="fa fa-twitter text-white"></i></a></li>
<li><a href=""><i class="fa fa-instagram text-white"></i></a></li>
</ul></div>
<div class="col-md-6">
<ul class="rightc">
<li><i class="fa fa-envelope-o"></i> www@gmail.com </li>
<li><i class="fa fa-user"></i> <a href="" >Partner</a></li>
</ul>
</div>
</div>
</div>
<!--top_bar-->
</section>
<!--===============================================
NAVBAR
===============================================-->
<div class="" id="nav-wrapper">
<nav class="nav">
<div class="container">
<div class="brand-logo">
<a href="index.html">
<img src="images/logo2.png" style="width: 140px;">
</a>
</div>
<div class="menu-icon">
<div id="nav-icon" class=""> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span>
</div>
</div>
<div class="nav-warp navi">
<ul>
<li><a class="hvr-line-No" href="#">Home</a>
</li>
<li><a class="hvr-line-No" href="#">Chemical Pricing</a>
</li>
<li><a class="hvr-line-No" href="#">Company profile</a>
</li>
<li><a class="hvr-line-No" href="#">Free Trial</a>
</li>
<li><a class="hvr-line-No" href="#">Contact us</a>
</li>
<li><a href="login.html" class="login-btn">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--===============================================
MAIN SECTION
===============================================-->
<!--================== CAROUSELE SLIDER==================-->
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://static.pexels.com/photos/21787/pexels-photo.jpg" style="width:100%" class="img-responsive">
<div class="container">
<div class="caraous-title text-center">
<div class="col-md-12">
<h1><span>RAISE</span> YOUR HELPING HAND</h1>
<h3>We are non-profit NGO & Charity Organization</h3>
<a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a>
<a class="btn btn-lg btn-primary site-btn2" href="#">Learn More</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://images.pexels.com/photos/458917/pexels-photo-458917.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive">
<div class="container">
<div class="caraous-title text-center">
<div class="col-md-12">
<h1><span>RAISE</span> YOUR HELPING HAND</h1>
<h3>We are non-profit NGO & Charity Organization</h3>
<a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a>
<a class="btn btn-lg btn-primary site-btn2" href="#">Learn More</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://images.pexels.com/photos/130879/pexels-photo-130879.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive">
<div class="container">
<div class="caraous-title text-center">
<div class="col-md-12">
<h1><span>CLEAN</span> WATER CHANGES EVERYTHING</h1>
<h3>We are non-profit NGO & Charity Organization</h3>
<a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a>
<a class="btn btn-lg btn-primary site-btn2" href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</body>
</html>
body {
line-height: 1.42857143;
color: #333;
background-color: #f3f3f3;
}
.top_bar { min-height:40px; /*
background: #30bed6; /* Old browsers */
background: -moz-linear-gradient(left, #30bed6 0%, #38cac9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #30bed6 0%,#38cac9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #30bed6 0%,#38cac9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30bed6', endColorstr='#38cac9',GradientType=1 ); /* IE6-9 */}
.social { list-style-type:none; margin-bottom:0px; float:left; padding:0px; margin-left:0px;}
.social li { float:left;}
.social li a { padding:0 10px; font-size:13px; line-height:40px; color:#FFF;}
.rightc { list-style-type:none; margin-bottom:0px; float:right;}
.rightc li { margin:0px 10px; font-size:13px; float:left; line-height:40px; color:#FFF;}
.rightc li a { color:#FFF; }
/*///////////////////////////////NAVBAR///////////////////////////////*/
.nav {
position: relative;
padding: 10px 0px;
padding-bottom: 15px;
background-color: #fff;
/* border-bottom: solid 2px #E1EFFC;*/
}
.brand-logo{
display: inline-block;
float:left;
margin-top: 12px;
}
.nav-warp ul{
margin:0px;
padding:0px;
float:right;
margin-top: 6px;
}
.nav-warp ul li{
list-style-type: none;
float: left;
}
.nav-warp ul li a {
display: inline-block;
font-size: 16px;
padding: 8px 10px;
color: #000000;
font-family: 'Comfortaa';
font-weight: 400;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
font-family: 'TitilliumWeb';
letter-spacing: 2px;
}
.nav-warp ul li a:hover{
color: #2196f4;
}
.login-btn {
padding: 7px 20px!important;
text-align: center;
margin-left: 25px;
border-radius: 50px;
text-decoration: none;
border: solid 0px;
background-color: #2196f4;
color: #ffffff !important;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#modalx-zoomIn .login-btn {
padding: 10px 20px!important;
}
.hvr-line {
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;
overflow: hidden;
}
.hvr-line:before {
content: "";
position: absolute;
z-index: -99;
left: 50%;
right: 50%;
top: 0;
background: #2196f4;
height: 2px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-line:hover:before,
.hvr-line:focus:before,
.hvr-line:active:before {
left: 0;
right: 0;
}
/*==============NAV ICON==============*/
.menu-icon {
display: none;
width: 50px;
height: 50px;
position: absolute;
z-index: 99;
right: 15px;
}
#nav-icon {
width: 30px;
height: 35px;
position: relative;
margin: 16px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 50%;
background: #2196f4;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}
#nav-icon span:nth-child(odd) {
left: 0px;
border-radius: 9px 0 0 9px;
}
#nav-icon span:nth-child(1),
#nav-icon span:nth-child(2) {
top: 0px;
}
#nav-icon span:nth-child(3),
#nav-icon span:nth-child(4) {
top: 10px;
}
#nav-icon span:nth-child(5),
#nav-icon span:nth-child(6) {
top: 20px;
}
#nav-icon.open span:nth-child(1),
#nav-icon.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(2),
#nav-icon.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(1) {
left: 0px;
top: 9px;
}
#nav-icon.open span:nth-child(2) {
left: calc(50% - 5px);
top: 9px;
}
#nav-icon.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
#nav-icon.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
#nav-icon.open span:nth-child(5) {
left: 0px;
top: 19px;
}
#nav-icon.open span:nth-child(6) {
left: calc(50% - 5px);
top: 19px;
}
.nav-fa-fa-icon {
display: none;
}
.nav li a:hover {
transition: 0.5s;
}
.stick {
background-color: #fff!important;
position: fixed;
display: block;
transition: top 0.3s;
box-shadow: 0px 6px 20px 0 rgba(0, 55, 255, 0.08), 0 2px 20px 0 rgba(0, 43, 255, 0.08);
}
.item img {width:100%; max-height:450px;display: block;}
.caraous-title {
position: absolute;
top: 20%;
left: 25px;
right: auto;
width: 96.66666666666666%;
color: #000;
}
.caraous-title h1 {color:#FFF;font-size:45px; font-weight:600;}
.caraous-title h3 {margin-bottom:30px;color:#fff;font-size:18px; letter-spacing:1px;}
.caraous-title span {color:#aa1f43;}
.caraous-img-box img {width:50%;}
/* Button */
.site-btn{padding:12px 25px 12px 25px;border-radius:2px;background:#DF314D;border-color:transparent;font-size:14px;}
.site-btn:hover{background:#C9223D ;border:transparent;}
.site-btn2{padding:12px 25px 12px 25px;border-radius:2px;background:#05681e;border-color:transparent;font-size:14px;}
.site-btn2:hover{background:rgb(128, 197, 71); ;border:transparent;}
@media screen and (max-width: 768px) {
.marg-bo-30{
margin-bottom: 30px;
}
.nav-warp{
position: fixed;
padding: 15px;
width: 270px;
margin-top: -10px;
right:-270px;
height: 100vh;
background: #fff;
z-index: 9;
}
.nav-warp li{
display: block;
float: none!important;
}
.nav-warp ul li a:hover{
/* background-color: #2196f4; */
color: #fff;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease; transition: 2s;
}
.nav-warp li a{
width:100%;
border-radius: 50px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.nav-warp ul{
width:100%;
margin-top: 60px;
}
.menu-icon {
display: block;
}
.login-btn {
margin-top: 25px;
margin-left: 0px;
}
#sidebar-menu {
margin-top: 0px;
position: fixed;
z-index: 9;
left: -270px;
width: 270px;
top: 61px;
border-top: solid 1px;
transition: all 0.2s ease-in;
overflow-x: scroll;
max-height: 650px;
}
.sidebar-shwo{
left:0px !important;
}
.Categories-btn{
display: block !important;
}
}
//NAVBAR RESPONSIVE======================================
$(document).ready(function() {
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('#hit-nav-wrapper').addClass('stick');
} else {
$('#hit-nav-wrapper').removeClass('stick');
}
});
});
//NAV ICON & SLIDE NAV==================================
$(document).ready(function() {
$('#nav-icon').click(function() {
$(this).toggleClass('open');
if ($('.nav-warp').hasClass('navi')) {
$('.nav-warp').animate({
right: '0px'
}, 500).removeClass('navi');
} else {
$('.nav-warp').animate({
right: -270
}, 500).addClass('navi');
}
});
});
//Categories NAV==================================
$(document).ready(function() {
$('#cate').click(function() {
$('#sidebar-menu').toggleClass('sidebar-shwo')
});
});
//SIDEBAR MENU=========================================
(function($){
$(document).ready(function(){
$('#sidebar-menu li.active').addClass('open').children('ul').show();
$('#sidebar-menu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
}
else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
});
})(jQuery);
