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,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 {

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);

File diff suppressed because it is too large Load diff