Difference between revisions of "Template:Marburg/index.css"
| Line 1: | Line 1: | ||
| − | <html><style>main{padding:0!important;background-color:#cacaca}.main{overflow-x:hidden!important}.box-light{max-height:40vh;width:100vw;position:relative;z-index:1}.box-light img{width:100%;margin-top:-100px;height:65vh;opacity:0;transition:opacity 1s;transform:matrix(1,0,0,1,0,0)}.box-dark{background-color:#3d404d;min-height:60vh;box-shadow:1px 1px 40px #000,1px 1px 40px #000;margin-left:-10vw;width:120vw;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}.left,.right .heading,.right .line,.right .logo,.right .text{transform:rotate(355deg)}.left .heading,.left .line,.left .logo,.left .text,.right{transform:rotate(-355deg)}.left .logo{margin-left:20px;}.right .logo{margin-left:-20px;}.logo{width:200px;height:200px;margin-bottom:500px;}.heading{color:#f5f5f5;text-align:center;font-size:1.75em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-bottom:unset!important}.heading,.line{margin-top:25px}.line{background-color:#f5f5f5;border-width:2px;display:block;width:100px;margin-bottom:unset}.text{color:#f5f5f5;text-align:center!important;width:700px;font-size:1.5em!important;margin-top:25px;max-width:80vw;margin-bottom:25px}video{-webkit-filter:contrast(.5);filter:contrast(.5);height:100%;-o-object-fit:cover;object-fit:cover;width:100%;transform:scale(1.3)}.words{color:#f5f5f5;position:absolute;top:calc(50% - 50px);left:65%;display:flex;flex-direction:column;align-items:flex-end}.words p{font-size:4em!important;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (max-width:1390px){.words{left:50%}}@media (max-width:970px){.words{left:40%}}@media (max-width:810px){.words{left:30%}.right .logo{margin-left:-30px}.left .logo{margin-left:30px}.right .heading,.right .line{margin-left:-30px!important}.left .heading,.left .line{margin-left:30px!important}}@media (max-width:715px){.words{left:calc(50% - 148px);align-items:center}.words p{font-size:2.5em!important}}@media (max-width:500px){.box-dark{min-height:85vh!important;margin-bottom:575px!important;}}.bobbel{position:absolute;bottom:-7px;left:calc(50vw - 100px);width:200px;cursor:pointer;z-index:3}.hero-wrapper{width:100%;position:relative;background-color:#3d404d;height:calc(100vh - 70px);max-height:calc(100vh - 70px)}.hero-text{width:110vw;padding:2rem;display:flex;align-items:center;justify-content:center;background:#3d404d;color:#f5f5f5;box-shadow:1px 1px 40px #000;z-index:2;position:relative;margin-left:-5vw;flex-direction:column}.hero-first{font-size:2.5em!important}.hero-first,.hero-second{text-align:center!important;max-width:85vw}.hero-second{font-size:1.5em!important;top:60px;margin-top:25px}.awards{height:80vh;background:url(https://static.igem.org/mediawiki/2019/4/41/T--Marburg--hero_medals.jpg);background-repeat:no-repeat;background-size:cover;display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin-top:-7vh;padding:15vh 3em 3em}.awards:hover{transform:skewX(10deg)}.award{height:200px!important;width:200px!important;opacity:1!important;margin-top:0!important;-webkit-filter:drop-shadow(2px 4px 6px black) saturate(2);filter:drop-shadow(2px 4px 6px black) saturate(2)}.award-title{display:none;color:#fff;-webkit-filter:drop-shadow(2px 4px 6px black);filter:drop-shadow(2px 4px 6px black)}@media (max-width:960px){.awards{justify-content:center!important}.award{display:none}.award-title{display:block}}@media (max-height:700px){.awards{justify-content:center!important}.award{display:none}.award-title{display:block}}.glitch{position:relative;color:#fff}.glitch:before{left:0;left:2px;text-shadow:-2px 0 #ff00c1;clip:rect(44px,450px,56px,0);animation:glitch-anim 5s linear infinite alternate-reverse}.glitch:after,.glitch:before{content:attr(data-text);position:absolute;top:0;width:100%;height:100%}.glitch:after{left:0;left:-2px;text-shadow:-2px 0 #00fff9,2px 2px #ff00c1;animation:glitch-anim2 1s linear infinite alternate-reverse}@-webkit-keyframes glitch-anim{0%{clip:rect(43px,9999px,85px,0);transform:skew(.57deg)}5%{clip:rect(77px,9999px,66px,0);transform:skew(.15deg)}10%{clip:rect(47px,9999px,42px,0);transform:skew(.88deg)}15%{clip:rect(91px,9999px,73px,0);transform:skew(.3deg)}20%{clip:rect(72px,9999px,52px,0);transform:skew(.46deg)}25%{clip:rect(7px,9999px,90px,0);transform:skew(.11deg)}30%{clip:rect(13px,9999px,58px,0);transform:skew(.11deg)}35%{clip:rect(36px,9999px,19px,0);transform:skew(.57deg)}40%{clip:rect(47px,9999px,25px,0);transform:skew(.92deg)}45%{clip:rect(40px,9999px,47px,0);transform:skew(.39deg)}50%{clip:rect(14px,9999px,72px,0);transform:skew(.94deg)}55%{clip:rect(27px,9999px,13px,0);transform:skew(.5deg)}60%{clip:rect(96px,9999px,71px,0);transform:skew(.83deg)}65%{clip:rect(67px,9999px,39px,0);transform:skew(.24deg)}70%{clip:rect(8px,9999px,22px,0);transform:skew(.52deg)}75%{clip:rect(83px,9999px,41px,0);transform:skew(.6deg)}80%{clip:rect(28px,9999px,92px,0);transform:skew(.89deg)}85%{clip:rect(29px,9999px,23px,0);transform:skew(.7deg)}90%{clip:rect(90px,9999px,26px,0);transform:skew(.75deg)}95%{clip:rect(73px,9999px,35px,0);transform:skew(.29deg)}to{clip:rect(74px,9999px,39px,0);transform:skew(1deg)}}@keyframes glitch-anim{0%{clip:rect(43px,9999px,85px,0);transform:skew(.57deg)}5%{clip:rect(77px,9999px,66px,0);transform:skew(.15deg)}10%{clip:rect(47px,9999px,42px,0);transform:skew(.88deg)}15%{clip:rect(91px,9999px,73px,0);transform:skew(.3deg)}20%{clip:rect(72px,9999px,52px,0);transform:skew(.46deg)}25%{clip:rect(7px,9999px,90px,0);transform:skew(.11deg)}30%{clip:rect(13px,9999px,58px,0);transform:skew(.11deg)}35%{clip:rect(36px,9999px,19px,0);transform:skew(.57deg)}40%{clip:rect(47px,9999px,25px,0);transform:skew(.92deg)}45%{clip:rect(40px,9999px,47px,0);transform:skew(.39deg)}50%{clip:rect(14px,9999px,72px,0);transform:skew(.94deg)}55%{clip:rect(27px,9999px,13px,0);transform:skew(.5deg)}60%{clip:rect(96px,9999px,71px,0);transform:skew(.83deg)}65%{clip:rect(67px,9999px,39px,0);transform:skew(.24deg)}70%{clip:rect(8px,9999px,22px,0);transform:skew(.52deg)}75%{clip:rect(83px,9999px,41px,0);transform:skew(.6deg)}80%{clip:rect(28px,9999px,92px,0);transform:skew(.89deg)}85%{clip:rect(29px,9999px,23px,0);transform:skew(.7deg)}90%{clip:rect(90px,9999px,26px,0);transform:skew(.75deg)}95%{clip:rect(73px,9999px,35px,0);transform:skew(.29deg)}to{clip:rect(74px,9999px,39px,0);transform:skew(1deg)}}@-webkit-keyframes glitch-anim2{0%{clip:rect(98px,9999px,61px,0);transform:skew(.63deg)}5%{clip:rect(78px,9999px,5px,0);transform:skew(.78deg)}10%{clip:rect(67px,9999px,67px,0);transform:skew(.19deg)}15%{clip:rect(61px,9999px,86px,0);transform:skew(.76deg)}20%{clip:rect(70px,9999px,12px,0);transform:skew(.22deg)}25%{clip:rect(14px,9999px,36px,0);transform:skew(.83deg)}30%{clip:rect(32px,9999px,99px,0);transform:skew(.96deg)}35%{clip:rect(58px,9999px,60px,0);transform:skew(.39deg)}40%{clip:rect(47px,9999px,41px,0);transform:skew(.45deg)}45%{clip:rect(40px,9999px,8px,0);transform:skew(.76deg)}50%{clip:rect(60px,9999px,62px,0);transform:skew(.47deg)}55%{clip:rect(86px,9999px,86px,0);transform:skew(.1deg)}60%{clip:rect(98px,9999px,34px,0);transform:skew(.2deg)}65%{clip:rect(38px,9999px,31px,0);transform:skew(.66deg)}70%{clip:rect(5px,9999px,1px,0);transform:skew(.22deg)}75%{clip:rect(26px,9999px,45px,0);transform:skew(.04deg)}80%{clip:rect(1px,9999px,56px,0);transform:skew(.45deg)}85%{clip:rect(51px,9999px,31px,0);transform:skew(.7deg)}90%{clip:rect(30px,9999px,6px,0);transform:skew(.95deg)}95%{clip:rect(57px,9999px,97px,0);transform:skew(.01deg)}to{clip:rect(80px,9999px,54px,0);transform:skew(.97deg)}}@keyframes glitch-anim2{0%{clip:rect(98px,9999px,61px,0);transform:skew(.63deg)}5%{clip:rect(78px,9999px,5px,0);transform:skew(.78deg)}10%{clip:rect(67px,9999px,67px,0);transform:skew(.19deg)}15%{clip:rect(61px,9999px,86px,0);transform:skew(.76deg)}20%{clip:rect(70px,9999px,12px,0);transform:skew(.22deg)}25%{clip:rect(14px,9999px,36px,0);transform:skew(.83deg)}30%{clip:rect(32px,9999px,99px,0);transform:skew(.96deg)}35%{clip:rect(58px,9999px,60px,0);transform:skew(.39deg)}40%{clip:rect(47px,9999px,41px,0);transform:skew(.45deg)}45%{clip:rect(40px,9999px,8px,0);transform:skew(.76deg)}50%{clip:rect(60px,9999px,62px,0);transform:skew(.47deg)}55%{clip:rect(86px,9999px,86px,0);transform:skew(.1deg)}60%{clip:rect(98px,9999px,34px,0);transform:skew(.2deg)}65%{clip:rect(38px,9999px,31px,0);transform:skew(.66deg)}70%{clip:rect(5px,9999px,1px,0);transform:skew(.22deg)}75%{clip:rect(26px,9999px,45px,0);transform:skew(.04deg)}80%{clip:rect(1px,9999px,56px,0);transform:skew(.45deg)}85%{clip:rect(51px,9999px,31px,0);transform:skew(.7deg)}90%{clip:rect(30px,9999px,6px,0);transform:skew(.95deg)}95%{clip:rect(57px,9999px,97px,0);transform:skew(.01deg)}to{clip:rect(80px,9999px,54px,0);transform:skew(.97deg)}}</style></html> | + | <html><style>main{padding:0!important;background-color:#cacaca}.main{overflow-x:hidden!important}.box-light{max-height:40vh;width:100vw;position:relative;z-index:1}.box-light img{width:100%;margin-top:-100px;height:65vh;opacity:0;transition:opacity 1s;transform:matrix(1,0,0,1,0,0)}.box-dark{background-color:#3d404d;min-height:60vh;box-shadow:1px 1px 40px #000,1px 1px 40px #000;margin-left:-10vw;width:120vw;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}.left,.right .heading,.right .line,.right .logo,.right .text{transform:rotate(355deg)}.left .heading,.left .line,.left .logo,.left .text,.right{transform:rotate(-355deg)}.left .logo{margin-left:20px;}.right .logo{margin-left:-20px;}.logo{width:200px;height:200px;margin-bottom:500px;}.heading{color:#f5f5f5;text-align:center;font-size:1.75em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-bottom:unset!important}.heading,.line{margin-top:25px}.line{background-color:#f5f5f5;border-width:2px;display:block;width:100px;margin-bottom:unset}.text{color:#f5f5f5;text-align:center!important;width:700px;font-size:1.5em!important;margin-top:25px;max-width:80vw;margin-bottom:25px}video{-webkit-filter:contrast(.5);filter:contrast(.5);height:100%;-o-object-fit:cover;object-fit:cover;width:100%;transform:scale(1.3)}.words{color:#f5f5f5;position:absolute;top:calc(50% - 50px);left:65%;display:flex;flex-direction:column;align-items:flex-end}.words p{font-size:4em!important;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (max-width:1390px){.words{left:50%}}@media (max-width:970px){.words{left:40%}}@media (max-width:810px){.words{left:30%}.right .logo{margin-left:-30px}.left .logo{margin-left:30px}.right .heading,.right .line{margin-left:-30px!important}.left .heading,.left .line{margin-left:30px!important}}@media (max-width:715px){.words{left:calc(50% - 148px);align-items:center}.words p{font-size:2.5em!important}}@media (max-width:500px){.box-dark{min-height:85vh!important;}.logo{margin-bottom:575px!important;}}.bobbel{position:absolute;bottom:-7px;left:calc(50vw - 100px);width:200px;cursor:pointer;z-index:3}.hero-wrapper{width:100%;position:relative;background-color:#3d404d;height:calc(100vh - 70px);max-height:calc(100vh - 70px)}.hero-text{width:110vw;padding:2rem;display:flex;align-items:center;justify-content:center;background:#3d404d;color:#f5f5f5;box-shadow:1px 1px 40px #000;z-index:2;position:relative;margin-left:-5vw;flex-direction:column}.hero-first{font-size:2.5em!important}.hero-first,.hero-second{text-align:center!important;max-width:85vw}.hero-second{font-size:1.5em!important;top:60px;margin-top:25px}.awards{height:80vh;background:url(https://static.igem.org/mediawiki/2019/4/41/T--Marburg--hero_medals.jpg);background-repeat:no-repeat;background-size:cover;display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin-top:-7vh;padding:15vh 3em 3em}.awards:hover{transform:skewX(10deg)}.award{height:200px!important;width:200px!important;opacity:1!important;margin-top:0!important;-webkit-filter:drop-shadow(2px 4px 6px black) saturate(2);filter:drop-shadow(2px 4px 6px black) saturate(2)}.award-title{display:none;color:#fff;-webkit-filter:drop-shadow(2px 4px 6px black);filter:drop-shadow(2px 4px 6px black)}@media (max-width:960px){.awards{justify-content:center!important}.award{display:none}.award-title{display:block}}@media (max-height:700px){.awards{justify-content:center!important}.award{display:none}.award-title{display:block}}.glitch{position:relative;color:#fff}.glitch:before{left:0;left:2px;text-shadow:-2px 0 #ff00c1;clip:rect(44px,450px,56px,0);animation:glitch-anim 5s linear infinite alternate-reverse}.glitch:after,.glitch:before{content:attr(data-text);position:absolute;top:0;width:100%;height:100%}.glitch:after{left:0;left:-2px;text-shadow:-2px 0 #00fff9,2px 2px #ff00c1;animation:glitch-anim2 1s linear infinite alternate-reverse}@-webkit-keyframes glitch-anim{0%{clip:rect(43px,9999px,85px,0);transform:skew(.57deg)}5%{clip:rect(77px,9999px,66px,0);transform:skew(.15deg)}10%{clip:rect(47px,9999px,42px,0);transform:skew(.88deg)}15%{clip:rect(91px,9999px,73px,0);transform:skew(.3deg)}20%{clip:rect(72px,9999px,52px,0);transform:skew(.46deg)}25%{clip:rect(7px,9999px,90px,0);transform:skew(.11deg)}30%{clip:rect(13px,9999px,58px,0);transform:skew(.11deg)}35%{clip:rect(36px,9999px,19px,0);transform:skew(.57deg)}40%{clip:rect(47px,9999px,25px,0);transform:skew(.92deg)}45%{clip:rect(40px,9999px,47px,0);transform:skew(.39deg)}50%{clip:rect(14px,9999px,72px,0);transform:skew(.94deg)}55%{clip:rect(27px,9999px,13px,0);transform:skew(.5deg)}60%{clip:rect(96px,9999px,71px,0);transform:skew(.83deg)}65%{clip:rect(67px,9999px,39px,0);transform:skew(.24deg)}70%{clip:rect(8px,9999px,22px,0);transform:skew(.52deg)}75%{clip:rect(83px,9999px,41px,0);transform:skew(.6deg)}80%{clip:rect(28px,9999px,92px,0);transform:skew(.89deg)}85%{clip:rect(29px,9999px,23px,0);transform:skew(.7deg)}90%{clip:rect(90px,9999px,26px,0);transform:skew(.75deg)}95%{clip:rect(73px,9999px,35px,0);transform:skew(.29deg)}to{clip:rect(74px,9999px,39px,0);transform:skew(1deg)}}@keyframes glitch-anim{0%{clip:rect(43px,9999px,85px,0);transform:skew(.57deg)}5%{clip:rect(77px,9999px,66px,0);transform:skew(.15deg)}10%{clip:rect(47px,9999px,42px,0);transform:skew(.88deg)}15%{clip:rect(91px,9999px,73px,0);transform:skew(.3deg)}20%{clip:rect(72px,9999px,52px,0);transform:skew(.46deg)}25%{clip:rect(7px,9999px,90px,0);transform:skew(.11deg)}30%{clip:rect(13px,9999px,58px,0);transform:skew(.11deg)}35%{clip:rect(36px,9999px,19px,0);transform:skew(.57deg)}40%{clip:rect(47px,9999px,25px,0);transform:skew(.92deg)}45%{clip:rect(40px,9999px,47px,0);transform:skew(.39deg)}50%{clip:rect(14px,9999px,72px,0);transform:skew(.94deg)}55%{clip:rect(27px,9999px,13px,0);transform:skew(.5deg)}60%{clip:rect(96px,9999px,71px,0);transform:skew(.83deg)}65%{clip:rect(67px,9999px,39px,0);transform:skew(.24deg)}70%{clip:rect(8px,9999px,22px,0);transform:skew(.52deg)}75%{clip:rect(83px,9999px,41px,0);transform:skew(.6deg)}80%{clip:rect(28px,9999px,92px,0);transform:skew(.89deg)}85%{clip:rect(29px,9999px,23px,0);transform:skew(.7deg)}90%{clip:rect(90px,9999px,26px,0);transform:skew(.75deg)}95%{clip:rect(73px,9999px,35px,0);transform:skew(.29deg)}to{clip:rect(74px,9999px,39px,0);transform:skew(1deg)}}@-webkit-keyframes glitch-anim2{0%{clip:rect(98px,9999px,61px,0);transform:skew(.63deg)}5%{clip:rect(78px,9999px,5px,0);transform:skew(.78deg)}10%{clip:rect(67px,9999px,67px,0);transform:skew(.19deg)}15%{clip:rect(61px,9999px,86px,0);transform:skew(.76deg)}20%{clip:rect(70px,9999px,12px,0);transform:skew(.22deg)}25%{clip:rect(14px,9999px,36px,0);transform:skew(.83deg)}30%{clip:rect(32px,9999px,99px,0);transform:skew(.96deg)}35%{clip:rect(58px,9999px,60px,0);transform:skew(.39deg)}40%{clip:rect(47px,9999px,41px,0);transform:skew(.45deg)}45%{clip:rect(40px,9999px,8px,0);transform:skew(.76deg)}50%{clip:rect(60px,9999px,62px,0);transform:skew(.47deg)}55%{clip:rect(86px,9999px,86px,0);transform:skew(.1deg)}60%{clip:rect(98px,9999px,34px,0);transform:skew(.2deg)}65%{clip:rect(38px,9999px,31px,0);transform:skew(.66deg)}70%{clip:rect(5px,9999px,1px,0);transform:skew(.22deg)}75%{clip:rect(26px,9999px,45px,0);transform:skew(.04deg)}80%{clip:rect(1px,9999px,56px,0);transform:skew(.45deg)}85%{clip:rect(51px,9999px,31px,0);transform:skew(.7deg)}90%{clip:rect(30px,9999px,6px,0);transform:skew(.95deg)}95%{clip:rect(57px,9999px,97px,0);transform:skew(.01deg)}to{clip:rect(80px,9999px,54px,0);transform:skew(.97deg)}}@keyframes glitch-anim2{0%{clip:rect(98px,9999px,61px,0);transform:skew(.63deg)}5%{clip:rect(78px,9999px,5px,0);transform:skew(.78deg)}10%{clip:rect(67px,9999px,67px,0);transform:skew(.19deg)}15%{clip:rect(61px,9999px,86px,0);transform:skew(.76deg)}20%{clip:rect(70px,9999px,12px,0);transform:skew(.22deg)}25%{clip:rect(14px,9999px,36px,0);transform:skew(.83deg)}30%{clip:rect(32px,9999px,99px,0);transform:skew(.96deg)}35%{clip:rect(58px,9999px,60px,0);transform:skew(.39deg)}40%{clip:rect(47px,9999px,41px,0);transform:skew(.45deg)}45%{clip:rect(40px,9999px,8px,0);transform:skew(.76deg)}50%{clip:rect(60px,9999px,62px,0);transform:skew(.47deg)}55%{clip:rect(86px,9999px,86px,0);transform:skew(.1deg)}60%{clip:rect(98px,9999px,34px,0);transform:skew(.2deg)}65%{clip:rect(38px,9999px,31px,0);transform:skew(.66deg)}70%{clip:rect(5px,9999px,1px,0);transform:skew(.22deg)}75%{clip:rect(26px,9999px,45px,0);transform:skew(.04deg)}80%{clip:rect(1px,9999px,56px,0);transform:skew(.45deg)}85%{clip:rect(51px,9999px,31px,0);transform:skew(.7deg)}90%{clip:rect(30px,9999px,6px,0);transform:skew(.95deg)}95%{clip:rect(57px,9999px,97px,0);transform:skew(.01deg)}to{clip:rect(80px,9999px,54px,0);transform:skew(.97deg)}}</style></html> |
Revision as of 20:38, 8 December 2019