Line 13: | Line 13: | ||
main{ | main{ | ||
height:1845vh; | height:1845vh; | ||
+ | } | ||
+ | main section{ | ||
font-family: Arial, Helvetica, sans-serif!important; | font-family: Arial, Helvetica, sans-serif!important; | ||
} | } |
Revision as of 10:46, 19 October 2016
- {
padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif;
}
body {
position: relative; height: 100%; width: 100%;
}
main{
height:1845vh;
} main section{
font-family: Arial, Helvetica, sans-serif!important;
} section {
position: absolute; height: 60vh; width: 40%; opacity: 0; /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
}
/*section:hover {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}*/
section.section-right * {
float: right;
}
section h2 {
margin: .5em; font-size: 1.8em; border-bottom: .1em solid black;
}
section p {
width: 80%; margin: .5em; font-size: 1.2em; line-height: 1.5;
}
section img {
width: 60%; margin-left: .5em; margin-right: .5em;
}
.bounce-in {
transform: scale(1); opacity: 1; transition: all .6s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: .1s;
}
section.section-left.bounce-in {
left: 5%;
}
section.section-right.bounce-in {
right: 5%;
}
.timeline.timeline-left {
float: right; margin-right: 55%;
}
.timeline-right {
float: left; margin-left: 55%;
}
.timeline {
width: 0; height: 2px; background-color: #999999; transform: translateY(calc(15vh - 5px)); transition: all .3s ease-in-out;
}
.timeline-section {
width: 100%; max-height: 55vh; background-color: #111111;
}
.section-left {
left: 1%; box-shadow:0 3px 0 #d7e4ed,3px 0 3px #d7e4ed;
}
.section-right {
right: 1%; box-shadow:0 3px 0 #d7e4ed,-3px 0 3px #d7e4ed;
}
.section-right::after {
content: ; position: absolute; top: calc(50% - 18px); left: -18px; border: 18px solid transparent; border-right-width: 18px; border-right-color: #03a9f4; border-left: 0;
}
.section-left::after {
content: ; position: absolute; top: calc(50% - 18px); right: -18px; border: 18px solid transparent; border-left-width: 18px; border-left-color: #03a9f4; border-right: 0;
}
section.active .timeline {
width: 40%;
}
section.active .round {
opacity: 1;
}
.round {
position: absolute; height: 6px; width: 6px; opacity: 0; border-radius: 50%; background: white; box-shadow: 0 0 0 6px #0288d1; left: calc(50% - 3px);
}
.round.bounce {
opacity: 1; transition: all .2s ease-in-out;
}
- timeline {
position: absolute; left: 50%; height: 1850vh; transform: translateX(-50%); width: 5px; background-color: #03a9f4;
}
@keyframes cd-bounce-left {
0% { left: 0; opacity: 0; } 90% { left: 7%; opacity: 1; } 100% { left: 5%; opacity: 1; }
}
@keyframes cd-bounce-right {
0% { right: 0; opacity: 0; } 90% { right: 7%; opacity: 1; } 100% { right: 5%; opacity: 1; }
}