CollinMarino (Talk | contribs) (Created page with ".mainContainer{ background-image: url("../images/tilewhite.png"); background-repeat: repeat round; background-size: 30%; background-color: white; } .mainContainer2{...") |
CollinMarino (Talk | contribs) |
||
Line 1: | Line 1: | ||
.mainContainer{ | .mainContainer{ | ||
− | background-image: url("../ | + | background-image: url("https://static.igem.org/mediawiki/2020/9/9f/T--Virginia--images--tilewhite.png"); |
background-repeat: repeat round; | background-repeat: repeat round; | ||
background-size: 30%; | background-size: 30%; | ||
Line 7: | Line 7: | ||
.mainContainer2{ | .mainContainer2{ | ||
− | background-image: url("../ | + | background-image: url("https://static.igem.org/mediawiki/2020/6/62/T--Virginia--images--tilelight.png"); |
background-repeat: repeat round; | background-repeat: repeat round; | ||
background-size: 30%; | background-size: 30%; |
Revision as of 04:11, 18 October 2020
.mainContainer{
background-image: url(""); background-repeat: repeat round; background-size: 30%; background-color: white;
}
.mainContainer2{
background-image: url(""); background-repeat: repeat round; background-size: 30%; background-color: #F2F2F2; color: white;
}
.videoholder{
height: 100vh; max-height: 57vw; overflow: hidden; margin: auto; background-color: white; transform: translateY(calc(0px - 1.3vw - 4vh)); -ms-transform: translateY(calc(0px - 1.3vw - 4vh)); -webkit-transform: translateY(calc(0px - 1.3vw - 4vh)); -moz-transform: translateY(calc(0px - 1.3vw - 4vh)); border-width: 2vh;
}
.mainvideo{
position: relative; top: 0; left: 50%; height: 100vh; max-height: 57vw; transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);
}
.downScrollHolder{
position: relative; bottom: 0px; transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); display: flex; justify-content: center; width: 100%; padding-bottom: 3%;
}
.scrollDown{
cursor: pointer; opacity: 0.58; transition: 0.3s;
}
.scrollDown:hover{
opacity: 1
}
.downText{
width: 100%; font-family: THICCCBOI; font-size: 2vw; font-weight: lighter; text-align: center; color: transparent; visibility: hidden;
}
@keyframes show {
from {visibility: transparent;} to {visibility: white;}
}
.textAppear{
visibility: visible; color: white; animation-name: show; animation-duration: 1s;
}
.downArrow {
height: 5vh; max-height: 2.85vw; width: 5vh; max-width: 2.85vw; border: solid white; border-width: 0 0.4vw 0.4vw 0; display: inline-block; transform: rotate(45deg); -webkit-transform: rotate(45deg);
}
- scrollCheckpoint{
position: absolute; top: calc(min(96vh - 1.3vw,57vw)); transform: translateY(100%)
}