(14 intermediate revisions by the same user not shown) | |||
Line 11: | Line 11: | ||
} | } | ||
+ | main{ | ||
+ | height:1150vh; | ||
+ | } | ||
section { | section { | ||
position: absolute; | position: absolute; | ||
− | height: 60vh; | + | /*height: 60vh;*/ |
− | width: | + | width: 30%; |
+ | padding:1rem; | ||
opacity: 0; | opacity: 0; | ||
− | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); | + | /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/ |
} | } | ||
− | section:hover { | + | /*section:hover { |
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); | 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 * { | section.section-right * { | ||
float: right; | float: right; | ||
+ | } | ||
+ | |||
+ | section.section-right h2 { | ||
+ | text-align:right; | ||
+ | width:80%; | ||
} | } | ||
Line 30: | Line 39: | ||
margin: .5em; | margin: .5em; | ||
font-size: 1.8em; | font-size: 1.8em; | ||
+ | border-bottom: .1em solid black; | ||
} | } | ||
Line 37: | Line 47: | ||
font-size: 1.2em; | font-size: 1.2em; | ||
line-height: 1.5; | line-height: 1.5; | ||
− | |||
} | } | ||
Line 54: | Line 63: | ||
section.section-left.bounce-in { | section.section-left.bounce-in { | ||
− | left: | + | left: 15%; |
} | } | ||
section.section-right.bounce-in { | section.section-right.bounce-in { | ||
− | right: | + | right: 15%; |
} | } | ||
Line 74: | Line 83: | ||
width: 0; | width: 0; | ||
height: 2px; | height: 2px; | ||
+ | padding:1rem; | ||
background-color: #999999; | background-color: #999999; | ||
transform: translateY(calc(15vh - 5px)); | transform: translateY(calc(15vh - 5px)); | ||
Line 87: | Line 97: | ||
.section-left { | .section-left { | ||
left: 1%; | left: 1%; | ||
+ | box-shadow:0 3px 0 #d7e4ed,3px 0 3px #d7e4ed; | ||
} | } | ||
− | .section-right { | + | .section-right {F# |
right: 1%; | right: 1%; | ||
+ | box-shadow:0 3px 0 #d7e4ed,-3px 0 3px #d7e4ed; | ||
} | } | ||
Line 96: | Line 108: | ||
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
− | top: calc(50% - | + | top: calc(50% - 1rem); |
− | left: - | + | left: -1rem; |
− | border: | + | border: 1rem solid transparent; |
− | border-right-width: | + | border-right-width: 1rem; |
− | border-right-color: # | + | border-right-color: #03a9f4; |
border-left: 0; | border-left: 0; | ||
} | } | ||
Line 107: | Line 119: | ||
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
− | top: calc(50% - | + | top: calc(50% - 1rem); |
− | right: - | + | right: -1rem; |
− | border: | + | border: 1rem solid transparent; |
− | border-left-width: | + | border-left-width: 1rem; |
− | border-left-color: # | + | border-left-color: #03a9f4; |
border-right: 0; | border-right: 0; | ||
} | } | ||
Line 142: | Line 154: | ||
position: absolute; | position: absolute; | ||
left: 50%; | left: 50%; | ||
− | height: | + | height: 1150vh; |
transform: translateX(-50%); | transform: translateX(-50%); | ||
width: 5px; | width: 5px; |
Latest revision as of 00:08, 20 October 2016
- {
padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif;
}
body {
position: relative; height: 100%; width: 100%;
}
main{
height:1150vh;
} section {
position: absolute; /*height: 60vh;*/ width: 30%; padding:1rem; 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.section-right h2 {
text-align:right; width:80%;
}
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: 15%;
}
section.section-right.bounce-in {
right: 15%;
}
.timeline.timeline-left {
float: right; margin-right: 55%;
}
.timeline-right {
float: left; margin-left: 55%;
}
.timeline {
width: 0; height: 2px; padding:1rem; 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 {F#
right: 1%; box-shadow:0 3px 0 #d7e4ed,-3px 0 3px #d7e4ed;
}
.section-right::after {
content: ; position: absolute; top: calc(50% - 1rem); left: -1rem; border: 1rem solid transparent; border-right-width: 1rem; border-right-color: #03a9f4; border-left: 0;
}
.section-left::after {
content: ; position: absolute; top: calc(50% - 1rem); right: -1rem; border: 1rem solid transparent; border-left-width: 1rem; 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: 1150vh; 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; }
}