<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 lang="en-US">
<head>
<!-- META information -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>TITLE</title>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" type='text/css'>
<!-- Fonts -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type='text/css'>
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:800' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Top section -->
<div class="top fullscreen background parallax" id="top" style="background-image:url=;" data-img-width="1920"
data-img-height="1080" data-diff="250">
<div class="content-a">
<div class="overlay"></div>
<div class="content-b">
<div class="dark-line">
<h1>HEADLINE |</h1>
<p>HEADLINE ||</p>
<div class="container">
<div class="row">
<div class="social">
<ul>
<li><a href="TWITTER_LINK"><i class="fa fa-lg fa-twitter"></i></a></li>
<li><a href="INSTAGRAM_LINK"><i class="fa fa-lg fa-instagram"></i></a></li>
<li><a href="YOUTUBE_LINK"><i class="fa fa-lg fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-center">
<li><a href="NAV_|_Link">NAV |</a></li>
<li><a href="NAV_||_Link">NAV ||</a></li>
<li><a href="NAV_|||_Link">NAV |||</a></li>
</ul>
</div>
</div>
</ul>
</div>
</div>
<div class="arrows"></div>
</div>
</div>
</div>
<section>
<div class="dark">
<h1>HERE YOU CAN PUT SECTIONS. THEY ARE BETWEEN THE HEADER AND THE FOOTER. SOME EDITING EXAMPLES ARE IN THE CSS PATH. YOU CAN ADD/REMOVE ALL THEM :)</h1>
</div>
</section>
<!-- Footer -->
<footer class="dark">
<div class="container">
<span class="copyright"><a href="IMPRESSUM_LINK">Impressum</a></span>
<span class="copyright"><a href="http://www.viohd.it/">VioHD Website</a></span>
</footer>
</body>
</html>
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
.social {
margin: 0;
padding: 0;
}
.social ul {
margin: 0;
padding: 5px;
}
.social ul li {
margin: 5px;
list-style: none outside none;
display: inline-block;
}
.social i {
width: 40px;
height: 40px;
color: #FFF;
background-color: #909AA0;
font-size: 22px;
text-align:center;
padding-top: 12px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social i:hover {
color: #FFF;
text-decoration: none;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social .fa-twitter:hover {
background: #00ABE3;
}
.social .fa-instagram:hover {
background: #375989;
}
.social .fa-youtube:hover {
background: #FF1F25;
}
html, body {
height:100%;
}
h1 {
font-family: 'Raleway';
letter-spacing: 2px;
font-size: 70px;
color: #fff;
margin: 25px 0 10px;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.15;
}
.dark {
background: #333333;
color: #fff;
}
.dark h1, .dark h2,
.dark h3, .dark h4,
.dark h5, .dark h6,
.dark p, .dark a {
color: #fff;
}
/* Divider */
.divider {
height: 30px;
padding: 25px 0 35px;
}
.hr {
content: "";
height: 1px;
width: 16%;
background: #d9d9d9;
left: 42%;
position: absolute;
display: block;
}
.hr-dot {
width: 10px;
height: 10px;
border: 2px solid #d9d9d9;
background: #fff;
border-radius: 100%;
margin-top: -5px;
left: 50%;
margin-left: -5px;
display: block;
position: absolute;
}
.hr-dark {
background: #626262;
}
.divider-left .hr {
left: 15px;
}
.divider-left .hr-dot {
left: 5px;
}
.white {
color: #fff;
}
.bold {
font-weight: 700;
}
.hr-dark .hr-dot {
border: 2px solid #626262;
background: #333333;
}
section {
padding-bottom: 80px;
}
.col-centered {
display: inline-block;
text-align: center;
}
.col-centered .col-md-1,
.col-centered .col-md-2,
.col-centered .col-md-3,
.col-centered .col-md-4,
.col-centered .col-md-5,
.col-centered .col-md-6,
.col-centered .col-md-7,
.col-centered .col-md-8,
.col-centered .col-md-9,
.col-centered .col-md-10,
.col-centered .col-md-11,
.col-centered .col-md-12 {
margin: 0 auto;
float: none;
}
.overlay:after {
content: "";
background: rgba(0,0,0,.2);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
.top {
text-shadow: 0 0 25px rgba(0,0,0,.2);
}
.top .content-a {
z-index: 100;
}
.background {
background-repeat: no-repeat;
background-position: 50% 50%;
/* ie8 degradation */
background-position: 50% 50%\9 !important;
}
.fullscreen,
.content-a {
width: 100%;
min-height: 100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
height: 100%;
}
.content-a {
display: table;
}
.content-b {
display: table-cell;
position: relative;
vertical-align: middle;
text-align: center;
}
.dark-line {
background: rgba(0,0,0,.15);
padding: 50px 0;
margin-left: -2px;
}
.content-b p {
font-size: 16px;
color: #fff;
}
.not-fullscreen {
height:50%;
}
.nav-content {
min-height: 64px;
}
.navbar {
background: #333333;
border: none;
min-height: 64px;
}
nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
@media (min-width: 768px) {
#navbar {
float:left;
width:100%;
overflow:hidden;
position:relative;
}
#navbar ul {
clear:left;
float:left;
position:relative;
left:50%;
text-align:center;
}
#navbar ul li {
display:block;
float:left;
position:relative;
right:50%;
}
}
.nav {
position: relative;
}
.nav li a {
color: #fff;
font-weight: 700;
padding: 22px 35px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.nav li a:hover li, .nav li a:hover,
.nav li.active, .nav li.active a {
background: #fff;
color: #1e1e1e;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.navbar-toggle {
border: 1px solid#fff;
margin-top: 15px;
}
.navbar-toggle .icon-bar {
background: #fff;
}
footer {
border-top: 1px solid #626262;
height: 60px;
}
.copyright {
color: #878787;
line-height: 59px;
}
footer ul {
float: right;
margin-bottom: 0;
}
footer ul li {
display: inline-block;
}
footer ul li a{
line-height: 59px;
padding: 16px 10px;
}
function fullscreenFix(){
var h = $('body').height();
// set .fullscreen height
$(".content-b").each(function(i){
if($(this).innerHeight() <= h){
$(this).closest(".fullscreen").addClass("not-overflow");
}
});
}
$(window).resize(fullscreenFix);
fullscreenFix();
function backgroundResize(){
var windowH = $(window).height();
$(".background").each(function(i){
var path = $(this);
// variables
var contW = path.width();
var contH = path.height();
var imgW = path.attr("data-img-width");
var imgH = path.attr("data-img-height");
var ratio = imgW / imgH;
var diff = parseFloat(path.attr("data-diff"));
diff = diff ? diff : 0;
var remainingH = 0;
if(path.hasClass("parallax") && !$("html").hasClass("touch")){
var maxH = contH > windowH ? contH : windowH;
remainingH = windowH - contH;
}
imgH = contH + remainingH + diff;
imgW = imgH * ratio;
if(contW > imgW){
imgW = contW;
imgH = imgW / ratio;
}
//
path.data("resized-imgW", imgW);
path.data("resized-imgH", imgH);
path.css("background-size", imgW + "px " + imgH + "px");
});
}
