diff --git a/alplora/static/alplora/css/alplora.css b/alplora/static/alplora/css/alplora.css index e204c572..e9cc33d7 100755 --- a/alplora/static/alplora/css/alplora.css +++ b/alplora/static/alplora/css/alplora.css @@ -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,12 +54,34 @@ h6 { padding-bottom: 50px; text-align: center; color: #f8f8f8; - background-image: url(../img/intro-bg.png) n - background-repeat: no-repeat; - background-size: cover; - background-positin: center center; + + 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-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! */ padding-bottom: 50px; @@ -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 { diff --git a/alplora/static/alplora/css/loader.css b/alplora/static/alplora/css/loader.css new file mode 100755 index 00000000..79b4fcca --- /dev/null +++ b/alplora/static/alplora/css/loader.css @@ -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; + } +} + diff --git a/alplora/static/alplora/js/imagesloaded.pkgd.min.js b/alplora/static/alplora/js/imagesloaded.pkgd.min.js new file mode 100755 index 00000000..d66f6589 --- /dev/null +++ b/alplora/static/alplora/js/imagesloaded.pkgd.min.js @@ -0,0 +1,7 @@ +/*! + * imagesLoaded PACKAGED v3.1.8 + * JavaScript is all like "You images are done yet or what?" + * MIT License + */ + +(function(){function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,o=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if("object"==typeof e){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;e.length>t;t+=1)n.push(e[t].listener);return n},i.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},i.addListener=function(e,n){var i,r=this.getListenersAsObject(e),o="object"==typeof n;for(i in r)r.hasOwnProperty(i)&&-1===t(r[i],n)&&r[i].push(o?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(e){return this.getListeners(e),this},i.defineEvents=function(e){for(var t=0;e.length>t;t+=1)this.defineEvent(e[t]);return this},i.removeListener=function(e,n){var i,r,o=this.getListenersAsObject(e);for(r in o)o.hasOwnProperty(r)&&(i=t(o[r],n),-1!==i&&o[r].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},i.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},i.manipulateListeners=function(e,t,n){var i,r,o=e?this.removeListener:this.addListener,s=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(i=n.length;i--;)o.call(this,t,n[i]);else for(i in t)t.hasOwnProperty(i)&&(r=t[i])&&("function"==typeof r?o.call(this,i,r):s.call(this,i,r));return this},i.removeEvent=function(e){var t,n=typeof e,i=this._getEvents();if("string"===n)delete i[e];else if("object"===n)for(t in i)i.hasOwnProperty(t)&&e.test(t)&&delete i[t];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(e,t){var n,i,r,o,s=this.getListenersAsObject(e);for(r in s)if(s.hasOwnProperty(r))for(i=s[r].length;i--;)n=s[r][i],n.once===!0&&this.removeListener(e,n.listener),o=n.listener.apply(this,t||[]),o===this._getOnceReturnValue()&&this.removeListener(e,n.listener);return this},i.trigger=n("emitEvent"),i.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},i.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},e.noConflict=function(){return r.EventEmitter=o,e},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return e}):"object"==typeof module&&module.exports?module.exports=e:this.EventEmitter=e}).call(this),function(e){function t(t){var n=e.event;return n.target=n.target||n.srcElement||t,n}var n=document.documentElement,i=function(){};n.addEventListener?i=function(e,t,n){e.addEventListener(t,n,!1)}:n.attachEvent&&(i=function(e,n,i){e[n+i]=i.handleEvent?function(){var n=t(e);i.handleEvent.call(i,n)}:function(){var n=t(e);i.call(e,n)},e.attachEvent("on"+n,e[n+i])});var r=function(){};n.removeEventListener?r=function(e,t,n){e.removeEventListener(t,n,!1)}:n.detachEvent&&(r=function(e,t,n){e.detachEvent("on"+t,e[t+n]);try{delete e[t+n]}catch(i){e[t+n]=void 0}});var o={bind:i,unbind:r};"function"==typeof define&&define.amd?define("eventie/eventie",o):e.eventie=o}(this),function(e,t){"function"==typeof define&&define.amd?define(["eventEmitter/EventEmitter","eventie/eventie"],function(n,i){return t(e,n,i)}):"object"==typeof exports?module.exports=t(e,require("wolfy87-eventemitter"),require("eventie")):e.imagesLoaded=t(e,e.EventEmitter,e.eventie)}(window,function(e,t,n){function i(e,t){for(var n in t)e[n]=t[n];return e}function r(e){return"[object Array]"===d.call(e)}function o(e){var t=[];if(r(e))t=e;else if("number"==typeof e.length)for(var n=0,i=e.length;i>n;n++)t.push(e[n]);else t.push(e);return t}function s(e,t,n){if(!(this instanceof s))return new s(e,t);"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=o(e),this.options=i({},this.options),"function"==typeof t?n=t:i(this.options,t),n&&this.on("always",n),this.getImages(),a&&(this.jqDeferred=new a.Deferred);var r=this;setTimeout(function(){r.check()})}function f(e){this.img=e}function c(e){this.src=e,v[e]=this}var a=e.jQuery,u=e.console,h=u!==void 0,d=Object.prototype.toString;s.prototype=new t,s.prototype.options={},s.prototype.getImages=function(){this.images=[];for(var e=0,t=this.elements.length;t>e;e++){var n=this.elements[e];"IMG"===n.nodeName&&this.addImage(n);var i=n.nodeType;if(i&&(1===i||9===i||11===i))for(var r=n.querySelectorAll("img"),o=0,s=r.length;s>o;o++){var f=r[o];this.addImage(f)}}},s.prototype.addImage=function(e){var t=new f(e);this.images.push(t)},s.prototype.check=function(){function e(e,r){return t.options.debug&&h&&u.log("confirm",e,r),t.progress(e),n++,n===i&&t.complete(),!0}var t=this,n=0,i=this.images.length;if(this.hasAnyBroken=!1,!i)return this.complete(),void 0;for(var r=0;i>r;r++){var o=this.images[r];o.on("confirm",e),o.check()}},s.prototype.progress=function(e){this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded;var t=this;setTimeout(function(){t.emit("progress",t,e),t.jqDeferred&&t.jqDeferred.notify&&t.jqDeferred.notify(t,e)})},s.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";this.isComplete=!0;var t=this;setTimeout(function(){if(t.emit(e,t),t.emit("always",t),t.jqDeferred){var n=t.hasAnyBroken?"reject":"resolve";t.jqDeferred[n](t)}})},a&&(a.fn.imagesLoaded=function(e,t){var n=new s(this,e,t);return n.jqDeferred.promise(a(this))}),f.prototype=new t,f.prototype.check=function(){var e=v[this.img.src]||new c(this.img.src);if(e.isConfirmed)return this.confirm(e.isLoaded,"cached was confirmed"),void 0;if(this.img.complete&&void 0!==this.img.naturalWidth)return this.confirm(0!==this.img.naturalWidth,"naturalWidth"),void 0;var t=this;e.on("confirm",function(e,n){return t.confirm(e.isLoaded,n),!0}),e.check()},f.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("confirm",this,t)};var v={};return c.prototype=new t,c.prototype.check=function(){if(!this.isChecked){var e=new Image;n.bind(e,"load",this),n.bind(e,"error",this),e.src=this.src,this.isChecked=!0}},c.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},c.prototype.onload=function(e){this.confirm(!0,"onload"),this.unbindProxyEvents(e)},c.prototype.onerror=function(e){this.confirm(!1,"onerror"),this.unbindProxyEvents(e)},c.prototype.confirm=function(e,t){this.isConfirmed=!0,this.isLoaded=e,this.emit("confirm",this,t)},c.prototype.unbindProxyEvents=function(e){n.unbind(e.target,"load",this),n.unbind(e.target,"error",this)},s}); \ No newline at end of file diff --git a/alplora/static/alplora/js/main.js b/alplora/static/alplora/js/main.js new file mode 100755 index 00000000..c2a768ed --- /dev/null +++ b/alplora/static/alplora/js/main.js @@ -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); \ No newline at end of file diff --git a/alplora/templates/alplora/index.html b/alplora/templates/alplora/index.html index ca85ab02..e947f6d8 100644 --- a/alplora/templates/alplora/index.html +++ b/alplora/templates/alplora/index.html @@ -1,7 +1,5 @@ {% load staticfiles i18n%} - - - + @@ -23,11 +21,11 @@ - + - + - + @@ -37,13 +35,9 @@ - - alt=""> - + + + +
+
+
+
+
+
+
+
+
+
+
+
+
-