<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 ---------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dize Design aos-header</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/fixed-header.css"> <!-- you can place that css code here in a new fixed-header.css or else -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css"> <!-- thats important for animation effekcts -->
<link rel="stylesheet" href="assets/css/styles.css"> <!-- if you use the same structur you didn't need to chance here anything -->
</head>
<body>
<header> <!-- I used some style code in HTML, remove it for display Bootstrap default options -->
<nav class="navbar navbar-default navbar-fixed-top" data-aos="fade-down" data-aos-duration="3000" style="background-image:url("none");background-color:rgba(229,76,124,0.521569);">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand navbar-link" href="#">Dize Design | AOS-Header Beta</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="active" role="presentation"><a href="#" style="background-color:#fafafa;color:#303030;">Home </a></li>
<li role="presentation"><a href="#" style="color:#fafafa;">Project </a></li>
<li role="presentation"><a href="#" style="color:#fafafa;">About Us</a></li>
<li role="presentation"><a href="#" style="color:#fafafa;">Contact </a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row" style="margin-top:232px;">
<div class="col-md-12">
<h1 class="text-center" data-aos="fade-right" data-aos-duration="3000" style="color:#fafafa;"><strong>We Love Bootsnipp.com</strong></h1>
<p class="lead text-center" data-aos="fade-left" data-aos-duration="3000" style="color:#fafafa;background-color:rgba(229,76,124,0.15);padding:21px;margin-top:38px;"><em>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</em> </p>
</div>
<div class="col-lg-3 col-lg-offset-3 col-md-3 col-md-offset-3 col-sm-3 col-sm-offset-3 col-xs-12" data-aos="fade-up" data-aos-duration="3000">
<center>
<button class="btn btn-default btn-lg" type="button">Lorem Ipsum </button>
</center>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" data-aos="fade-up" data-aos-duration="3000">
<center>
<button class="btn btn-default btn-lg" type="button">Lorem Ipsum </button>
</center>
</div>
</div>
</div>
</header>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script> <!-- pleae make sure, you have the JS code in youre JS file for animation effects -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script> <!-- Important for animation -->
</body>
</html>
body {
height:100%;
width:100%;
}
header {
background-image:url('http://www.dizedesign.de/snippets/headerx.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
height:1000px;
}
.btn.btn-default.btn-lg {
letter-spacing:2px;
}
.btn-default {
background-image:none;
background-image:none;
background-image:none;
background-image:none;
background-repeat:no-repeat;
filter:none;
-webkit-filter:none;
filter:none;
border:1px solid #fefefe;
background-color:rgba(229,76,124,0.521569);
color:#fefefe;
}
.navbar-default {
border-bottom:#fefefe;
}
.btn-default:hover {
opacity:.4;
background-color:rgba(229,76,124,0.521569);
color:#fefefe;
border:1px solid #fefefe;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color:#fafafa;
background-color:none;
}
.navbar-brand.navbar-link {
color:#fefefe;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color:#000;
background-color:#fafafa;
}
$(document).ready(function(){
AOS.init({ disable: 'mobile' });
});
