This commit is contained in:
Levi 2017-02-15 10:58:10 -05:00
parent ea2f6444db
commit 34c8900c6b
5 changed files with 1200 additions and 580 deletions

View file

@ -4,6 +4,20 @@
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* ==============================
Page loader
============================== */
@import "loader.css";
/* ==============================
Alplora Css
============================== */
body,
html {
width: 100%;
@ -40,11 +54,33 @@ h6 {
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background-image: url(../img/intro-bg.png) n
width: 100%;
height: 70vh;
max-height: 620px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.intro-header .background{
background-repeat: no-repeat;
background-size: cover;
background-positin: center center;
background-position: center center;
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: 0;
display: none;
}
.intro-header .background:nth-child(1){
display: block;
}
.intro-header-1 {
padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
@ -65,9 +101,7 @@ h6 {
}
.intro-message {
position: relative;
padding-top: 10%;
padding-bottom: 10%;
z-index: 10;
}
.intro-auth {
@ -114,7 +148,16 @@ h6 {
@media (max-width: 767px) {
.intro-message {
padding-bottom: 15%;
width: 80%;
margin: 0 auto;
text-align: center;
}
.intro-message img{
width: 90%;
}
.container>.navbar-header {
margin-right: 0;
margin-left: 0;
}
.intro-message > h1 {
@ -314,9 +357,10 @@ section h3.section-subheading {
}
.ungleich-gallery-text-carousel {
min-height: 220px;
min-height: 300px;
margin-bottom: 30px;
padding-bottom: 20px;
margin-top: 30px;
}
.ungleich-gallery-text-carousel .carousel-indicators, .text-carousel .carousel-indicators {

View file

@ -0,0 +1,520 @@
.page-loader{
display:block;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #fefefe;
z-index: 100000;
display: flex;
justify-content: center;
align-items: center;
}
.loader{
width: 116px;
height: 119px;
margin: 0 auto;
position: relative;
margin-bottom: 200px;
}
.loader .line{
height: 3px;
background-color: #C01722;
position: absolute;
}
.loader .line-1{
-ms-transform: rotate(-67eg); /* IE 9 */
-webkit-transform: rotate(-67deg); /* Chrome, Safari, Opera */
transform: rotate(-67deg);
position: absolute;
-webkit-animation: line-1-animation 4s infinite;
animation: line-1-animation 4s infinite;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
top: 100px;
left: 16px;
}
.loader .line-2{
-ms-transform: rotate(65eg);
-webkit-transform: rotate(65deg);
transform: rotate(65deg);
position: absolute;
-webkit-animation: line-2-animation 4s infinite;
animation: line-2-animation 4s infinite;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
top: 40px;
left: 45px;
}
.loader .line-3{
-ms-transform: rotate(-67eg); /* IE 9 */
-webkit-transform: rotate(-67deg); /* Chrome, Safari, Opera */
transform: rotate(-67deg);
position: absolute;
-webkit-animation: line-3-animation 4s infinite;
animation: line-3-animation 4s infinite;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
top: 86px;
left: 68px;
}
.loader .line-4{
-ms-transform: rotate(65eg);
-webkit-transform: rotate(65deg);
transform: rotate(65deg);
position: absolute;
-webkit-animation: line-4-animation 4s infinite;
animation: line-4-animation 4s infinite;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
top: 55px;
left: 82px;
}
.loader .circle{
content: "";
width: 17px;
height: 17px;
background: #C01722;
position: absolute;
border-radius: 50%;
}
.loader .circle-1{
top: 96px;
left: 7px;
}
.loader .circle-2{
top: 32px;
left: 35px;
-webkit-animation: circle-animation-2 4s infinite;
animation: circle-animation-2 4s infinite;
}
.loader .circle-3{
left: 59px;
top: 79px;
-webkit-animation: circle-animation-3 4s infinite;
animation: circle-animation-3 4s infinite;
}
.loader .circle-4{
left: 73px;
top: 51px;
-webkit-animation: circle-animation-4 4s infinite;
animation: circle-animation-4 4s infinite;
}
.loader .circle-5{
top: 96px;
left: 96px;
-webkit-animation: circle-animation-5 4s infinite;
animation: circle-animation-5 4s infinite;
}
@-webkit-keyframes line-1-animation{
0% {
width: 0;
}
15%{
width: 66px;
}
25%{
width: 66px;
}
50% {
width: 66px;
}
100% {
width: 60px;
}
}
@-webkit-keyframes line-2-animation{
0% {
width: 0;
}
10%{
width: 0;
}
25% {
width: 55px;
}
50% {
width: 55px;
}
100% {
width: 55px;
}
}
@-webkit-keyframes line-3-animation{
0% {
width: 0;
}
10%{
width: 0px;
}
25%{
width: 0px;
}
50% {
width: 25px;
}
100% {
width: 25px;
}
}
@-webkit-keyframes line-4-animation{
0% {
width: 0;
}
10%{
width: 0px;
}
25%{
width: 0px;
}
50% {
width: 0px;
}
75% {
width: 54px;
}
100% {
width: 54px;
}
}
@-webkit-keyframes line-2-animation{
0% {
width: 0;
}
10%{
width: 0;
}
25% {
width: 55px;
}
50% {
width: 55px;
}
100% {
width: 55px;
}
}
@-webkit-keyframes line-3-animation{
0% {
width: 0;
}
10%{
width: 0px;
}
25%{
width: 0px;
}
50% {
width: 25px;
}
100% {
width: 25px;
}
}
@-webkit-keyframes line-4-animation{
0% {
width: 0;
}
10%{
width: 0px;
}
25%{
width: 0px;
}
50% {
width: 0px;
}
75% {
width: 54px;
}
100% {
width: 54px;
}
}
@-webkit-keyframes circle-animation-2{
0% {
opacity: 0;
}
10%{
opacity: 0;
}
15% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes circle-animation-3{
0% {
opacity: 0;
}
10%{
opacity: 0;
}
25%{
opacity: 0;
}
30% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes circle-animation-4{
0% {
opacity: 0;
}
10%{
opacity: 0;
}
25%{
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes circle-animation-5{
0% {
opacity: 0;
}
10%{
opacity: 0;
}
25%{
opacity: 0;
}
50% {
opacity: 0;
}
95% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes line-1-animation{
0% {
width: 0;
}
15%{
width: 66px;
}
25%{
width: 66px;
}
50% {
width: 66px;
}
100% {
width: 60px;
}
}
@keyframes line-2-animation{
0% {
width: 0;
}
10%{
width: 0;
}
25% {
width: 55px;
}
50% {
width: 55px;
}
100% {
width: 55px;
}
}
@keyframes line-3-animation{
0% {
width: 0;
}
10%{
width: 0px;
}
25%{
width: 0px;
}
50% {
width: 25px;
}
100% {
width: 25px;
}
}
@keyframes line-4-animation{
0% {
width: 0;
}
10%{
width: 0px;
}
25%{
width: 0px;
}
50% {
width: 0px;
}
75% {
width: 54px;
}
100% {
width: 54px;
}
}
@keyframes line-2-animation{
0% {
width: 0;
}
10%{
width: 0;
}
25% {
width: 55px;
}
50% {
width: 55px;
}
100% {
width: 55px;
}
}
@keyframes line-3-animation{
0% {
width: 0;
}
10%{
width: 0px;
}
25%{
width: 0px;
}
50% {
width: 25px;
}
100% {
width: 25px;
}
}
@keyframes line-4-animation{
0% {
width: 0;
}
10%{
width: 0px;
}
25%{
width: 0px;
}
50% {
width: 0px;
}
75% {
width: 54px;
}
100% {
width: 54px;
}
}
@keyframes circle-animation-2{
0% {
opacity: 0;
}
10%{
opacity: 0;
}
15% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes circle-animation-3{
0% {
opacity: 0;
}
10%{
opacity: 0;
}
25%{
opacity: 0;
}
30% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes circle-animation-4{
0% {
opacity: 0;
}
10%{
opacity: 0;
}
25%{
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes circle-animation-5{
0% {
opacity: 0;
}
10%{
opacity: 0;
}
25%{
opacity: 0;
}
50% {
opacity: 0;
}
95% {
opacity: 1;
}
100% {
opacity: 1;
}
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,38 @@
(function($){
'use strict';
$(window).load(function(){
// Page loader
$("body").imagesLoaded(function(){
$(".page-loader div").fadeOut();
$(".page-loader").delay(200).fadeOut("slow");
});
});
$( document ).ready(function() {
initBackgroundsHeader();
});
//Infinite loop for change Background Header
function _changeBg(index, arrayEl, time){
if(index===0)
$(arrayEl[0]).fadeIn(2000);
setTimeout(function(){
$(arrayEl[index]).fadeOut(2000);
if(index+1 < arrayEl.length)
$(arrayEl[index+1]).fadeIn(2000);
return index+1 === arrayEl.length ? _changeBg(0, arrayEl, time): _changeBg(index+1, arrayEl, time);
}, time);
}
function initBackgroundsHeader(){
var arrayElements = Array.from($('.intro-header .bg-slide'));
_changeBg(0, arrayElements, 4000);
}
})(jQuery);

View file

@ -1,7 +1,5 @@
{% load staticfiles i18n%}
<!DOCTYPE html>
<html lang="en">
<head>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -23,11 +21,11 @@
<!-- Custom Fonts -->
<link href=<link href=<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<link rel="stylesheet" href="hosting/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'alplora/font-awesome/css/font-awesome.min.css' %}">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="{% static 'alplora/img/favicon.ico' %}" type="image/x-icon">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@ -38,12 +36,8 @@
</head>
<body data-feedly-mini="yes">alt=""&gt;
<style media="screen" type="text/css">
.intro-header {
background: url("{% static 'alplora/img/intro-bg.png' %}") no-repeat center center;
}
</style>
<body data-feedly-mini="yes">
<script async src="//www.google-analytics.com/analytics.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@ -57,12 +51,24 @@
</script>
<div class="page-loader">
<div class="loader">
<div class="circle circle-1"></div>
<div class="line line-1"></div>
<div class="circle circle-2"></div>
<div class="line line-2"></div>
<div class="circle circle-3"></div>
<div class="line line-3"></div>
<div class="circle circle-4"></div>
<div class="line line-4"></div>
<div class="circle circle-5"></div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
@ -105,14 +111,16 @@
<!-- Header -->
<a name="about"></a>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<section class="intro-header">
<!-- Add images backgrounds url(url-image); -->
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/intro-bg.png' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/configure.jpg' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/django-intro-bg.png' %});"></div>
<div class="background bg-slide" style="background-image: url({% static 'alplora/img/rails-intro-bg.png' %});"></div>
<div class="intro-message">
<img class="responsive" src="{% static 'alplora/img/alplora_logo_nopadding.svg' %}">
<h1>Perfect fit for Swiss Alps</h1>
<h3>Find your herd anytime, anywhere</h3>
@ -126,13 +134,10 @@
</li>
</ul> -->
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
</section>
<!-- /.intro-header -->
<section id="whatis">
<div class="container">
@ -338,7 +343,7 @@ Alplora is just like a cattle bell, but much better.<p></p>
</div>
<div class="row">
<div class="col-sm-10 center-block wow fadeInDown">
<div class="col-sm-10 col-sm-offset-1 wow fadeInDown">
<!-- start:recommendationSlider -->
<div id="carousel-recommendation-ungleich" class="carousel slide ungleich ungleich-gallery ungleich-gallery-text-carousel" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
@ -476,10 +481,14 @@ Alplora is just like a cattle bell, but much better.<p></p>
<!-- Pricing -->
<script src="{% static 'alplora/js/pricing.js' %}"></script>
<!-- Images loaded -->
<script type="text/javascript" src="{% static 'alplora/js/imagesloaded.pkgd.min.js' %}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static 'alplora/js/bootstrap.min.js' %}"></script>
<script src="{% static 'alplora/js/main.js' %}"></script>
<link rel="stylesheet" href="/static/debug_toolbar/css/print.css" type="text/css" media="print">
<link rel="stylesheet" href="/static/debug_toolbar/css/toolbar.css" type="text/css">
@ -863,4 +872,6 @@ Alplora is just like a cattle bell, but much better.<p></p>
<div id="feedly-mini" title="feedly Mini tookit"></div></body></html>
<div id="feedly-mini" title="feedly Mini tookit"></div>
</body>
</html>