alplora
This commit is contained in:
Levi
parent
ea2f6444db
commit
34c8900c6b
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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);
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue