<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Feelings v.1</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aclonica">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aladin">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" data-aos="slide-right" data-aos-duration="2800" data-aos-once="true">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand navbar-link" target="blank" href="https://www.instagram.com/exp__designer/"><i class="material-icons">center_focus_weak</i></a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Explore <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="#">First Item</a></li>
<li role="presentation"><a href="#">Second Item</a></li>
<li role="presentation"><a href="#">Third Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<header data-aos="slide-up" data-aos-duration="3000" data-aos-once="true">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1 text-bg" data-aos="fade-up" data-aos-duration="2800" data-aos-once="true">
<h1>Welcome on free feelings</h1></div>
<div class="col-md-12">
<p>Animated header with scroll engine </p>
</div>
<div class="col-md-2 col-md-offset-5 hidden-xs">
<button class="btn btn-default btn-block scroll-link" type="button" data-id="demo">Show more</button>
</div>
<div class="col-xs-3 col-xs-offset-4 hidden-sm hidden-md hidden-lg">
<button class="btn btn-default scroll-link" type="button" data-id="demo">Show more</button>
</div>
</div>
<div class="row hidden-xs no-space">
<div class="col-md-12">
<p><i class="fa fa-instagram" data-bs-hover-animate="rubberBand"></i><i class="fa fa-facebook-official" data-bs-hover-animate="rubberBand"></i><i class="fa fa-pinterest-square" data-bs-hover-animate="rubberBand"></i></p>
</div>
</div>
</div>
</header>
<section id="demo">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Silence is here ... =(</h1></div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
header {
height:100vh;
background-image:url('https://img2.picload.org/image/daapipii/header-2.jpg');
background-size:cover;
background-position:center center;
background-attachment:fixed;
}
@media (max-width:767px) {
header {
/*height:100%;*/
background-attachment:inherit;
height:100vh;
}
}
header .row {
margin-top:40vh;
}
@media (max-width:767px) {
header .row {
margin-top:30vh;
}
}
header h1 {
/*background-color:rgba(255,255,255,0.36);*/
padding:10px;
text-align:center;
border:5px solid rgba(108,111,119,0.19);
/*box-shadow:0px 0px 1px #333;*/
}
header h1 {
font-family:'Aladin';
font-size:71px;
color:#fff;
text-shadow:1px 1px 1px #333;
}
@media (max-width:767px) {
header h1 {
font-size:41px;
}
}
header p {
text-align:center;
padding-top:20px;
font-size:26px;
font-weight:600;
font-family:'Source Sans Pro';
/*letter-spacing:2px;*/
color:#f5f5f5;
text-shadow:1px 1px 1px #111;
padding-bottom:20px;
}
@media (max-width:767px) {
header p {
font-size:17px;
}
}
header .row.no-space p {
text-align:right;
}
header .row.no-space {
margin-top:initial;
bottom:0px;
position:fixed;
right:20px;
}
header .fa {
color:#fff;
text-shadow:1px 1px 1px #333;
padding:7px;
}
.navbar-default {
background-image:none;
background-image:none;
background-image:none;
background-image:none;
border-radius:0px;
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);
box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);
background-color:rgba(255,255,255,0.36);
}
.navbar-default .navbar-nav > li > a {
color:#fff;
text-shadow:1px 1px 1px #333;
font-size:17px;
letter-spacing:1px;
}
.nav > li > a:focus, .nav > li > a:hover {
text-decoration:none;
background-color:transparent;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
color:#eee;
background-color:transparent;
transition:all 0.5s;
}
.navbar-default .navbar-link {
color:#fff;
text-shadow:1px 1px 1px #333;
}
.navbar-default .navbar-link:hover {
color:#eee;
transition:all 0.3s;
}
header .btn.btn-default {
background:transparent;
color:#fff;
text-shadow:1px 1px 1px #333;
box-shadow:1px 1px 6px #333;
}
#demo {
padding-top:45px;
padding-bottom:45px;
height:100vh;
background-color:#f5f5f5;
}
@media (max-width:767px) {
#demo {
height:100%;
}
}
// Animation, to disable animation for mobile please write the *mobile* in *sr* on line 3
$(document).ready(function(){
AOS.init({ disable: 'sr' });
$('[data-bs-hover-animate]')
.mouseenter( function(){ var elem = $(this); elem.addClass('animated ' + elem.attr('data-bs-hover-animate')) })
.mouseleave( function(){ var elem = $(this); elem.removeClass('animated ' + elem.attr('data-bs-hover-animate')) });
});
// Scroll effect
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 50;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
