|
|
| Line 6: |
Line 6: |
| | <head> | | <head> |
| | <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300&display=swap" rel="stylesheet"> | | <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300&display=swap" rel="stylesheet"> |
| − | <!--<style>
| |
| − | body,
| |
| − | h1 {
| |
| − | font-family: 'Roboto Condensed', sans-serif !important;
| |
| − | }
| |
| − |
| |
| − | h1 {
| |
| − | overflow: unset !important;
| |
| − | }
| |
| − |
| |
| − | #HQ_page p {
| |
| − | font-family: 'Roboto Condensed', sans-serif !important;
| |
| − | }
| |
| − | </style>-->
| |
| | <script> | | <script> |
| | setTimeout(function () { | | setTimeout(function () { |
| Line 28: |
Line 14: |
| | | | |
| | <body> | | <body> |
| − | <!--<style>
| |
| − | .wrapper {
| |
| − | margin-left: -20px;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100vw;
| |
| − | max-width: 100vw;
| |
| − | height: calc(100vh - 18px);
| |
| − | overflow: auto;
| |
| − | background: #fff;
| |
| − | max-height: calc(100vh - 18px);
| |
| − | min-height: calc(100vh - 18px);
| |
| − | background-color: #F5F5F5;
| |
| − | }
| |
| − |
| |
| − | hr {
| |
| − | display: block;
| |
| − | height: 1px;
| |
| − | border: 0;
| |
| − | border-top: 2px solid #69A555;
| |
| − | margin: 1em 0;
| |
| − | padding: 0;
| |
| − | margin-left: 15%;
| |
| − | margin-right: 15%;
| |
| − | }
| |
| − |
| |
| − | .navbar-link:not(.is-arrowless)::after {
| |
| − | border-color: #69A555;
| |
| − | }
| |
| − |
| |
| − | .navbar-menu a:hover {
| |
| − | color: #69A555 !important;
| |
| − | }
| |
| − |
| |
| − | .glitch {
| |
| − | position: relative;
| |
| − | color: white;
| |
| − | letter-spacing: .15em;
| |
| − | }
| |
| − |
| |
| − | .glitch::before {
| |
| − | content: attr(data-text);
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | left: 2px;
| |
| − | text-shadow: -2px 0 #ff00c1;
| |
| − | clip: rect(44px, 450px, 56px, 0);
| |
| − | animation: glitch-anim 5s infinite linear alternate-reverse;
| |
| − | }
| |
| − |
| |
| − | .glitch::after {
| |
| − | content: attr(data-text);
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | left: -2px;
| |
| − | text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
| |
| − | animation: glitch-anim2 1s infinite linear alternate-reverse;
| |
| − | }
| |
| − |
| |
| − | .navbar {
| |
| − | background-color: #F5F5F5;
| |
| − | }
| |
| − |
| |
| − | @keyframes glitch-anim {
| |
| − | 0% {
| |
| − | clip: rect(43px, 9999px, 85px, 0);
| |
| − | transform: skew(0.57deg);
| |
| − | }
| |
| − |
| |
| − | 5% {
| |
| − | clip: rect(77px, 9999px, 66px, 0);
| |
| − | transform: skew(0.15deg);
| |
| − | }
| |
| − |
| |
| − | 10% {
| |
| − | clip: rect(47px, 9999px, 42px, 0);
| |
| − | transform: skew(0.88deg);
| |
| − | }
| |
| − |
| |
| − | 15% {
| |
| − | clip: rect(91px, 9999px, 73px, 0);
| |
| − | transform: skew(0.3deg);
| |
| − | }
| |
| − |
| |
| − | 20% {
| |
| − | clip: rect(72px, 9999px, 52px, 0);
| |
| − | transform: skew(0.46deg);
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | clip: rect(7px, 9999px, 90px, 0);
| |
| − | transform: skew(0.11deg);
| |
| − | }
| |
| − |
| |
| − | 30% {
| |
| − | clip: rect(13px, 9999px, 58px, 0);
| |
| − | transform: skew(0.11deg);
| |
| − | }
| |
| − |
| |
| − | 35% {
| |
| − | clip: rect(36px, 9999px, 19px, 0);
| |
| − | transform: skew(0.57deg);
| |
| − | }
| |
| − |
| |
| − | 40% {
| |
| − | clip: rect(47px, 9999px, 25px, 0);
| |
| − | transform: skew(0.92deg);
| |
| − | }
| |
| − |
| |
| − | 45% {
| |
| − | clip: rect(40px, 9999px, 47px, 0);
| |
| − | transform: skew(0.39deg);
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | clip: rect(14px, 9999px, 72px, 0);
| |
| − | transform: skew(0.94deg);
| |
| − | }
| |
| − |
| |
| − | 55% {
| |
| − | clip: rect(27px, 9999px, 13px, 0);
| |
| − | transform: skew(0.5deg);
| |
| − | }
| |
| − |
| |
| − | 60% {
| |
| − | clip: rect(96px, 9999px, 71px, 0);
| |
| − | transform: skew(0.83deg);
| |
| − | }
| |
| − |
| |
| − | 65% {
| |
| − | clip: rect(67px, 9999px, 39px, 0);
| |
| − | transform: skew(0.24deg);
| |
| − | }
| |
| − |
| |
| − | 70% {
| |
| − | clip: rect(8px, 9999px, 22px, 0);
| |
| − | transform: skew(0.52deg);
| |
| − | }
| |
| − |
| |
| − | 75% {
| |
| − | clip: rect(83px, 9999px, 41px, 0);
| |
| − | transform: skew(0.6deg);
| |
| − | }
| |
| − |
| |
| − | 80% {
| |
| − | clip: rect(28px, 9999px, 92px, 0);
| |
| − | transform: skew(0.89deg);
| |
| − | }
| |
| − |
| |
| − | 85% {
| |
| − | clip: rect(29px, 9999px, 23px, 0);
| |
| − | transform: skew(0.7deg);
| |
| − | }
| |
| − |
| |
| − | 90% {
| |
| − | clip: rect(90px, 9999px, 26px, 0);
| |
| − | transform: skew(0.75deg);
| |
| − | }
| |
| − |
| |
| − | 95% {
| |
| − | clip: rect(73px, 9999px, 35px, 0);
| |
| − | transform: skew(0.29deg);
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | clip: rect(74px, 9999px, 39px, 0);
| |
| − | transform: skew(1deg);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes glitch-anim2 {
| |
| − | 0% {
| |
| − | clip: rect(98px, 9999px, 61px, 0);
| |
| − | transform: skew(0.63deg);
| |
| − | }
| |
| − |
| |
| − | 5% {
| |
| − | clip: rect(78px, 9999px, 5px, 0);
| |
| − | transform: skew(0.78deg);
| |
| − | }
| |
| − |
| |
| − | 10% {
| |
| − | clip: rect(67px, 9999px, 67px, 0);
| |
| − | transform: skew(0.19deg);
| |
| − | }
| |
| − |
| |
| − | 15% {
| |
| − | clip: rect(61px, 9999px, 86px, 0);
| |
| − | transform: skew(0.76deg);
| |
| − | }
| |
| − |
| |
| − | 20% {
| |
| − | clip: rect(70px, 9999px, 12px, 0);
| |
| − | transform: skew(0.22deg);
| |
| − | }
| |
| − |
| |
| − | 25% {
| |
| − | clip: rect(14px, 9999px, 36px, 0);
| |
| − | transform: skew(0.83deg);
| |
| − | }
| |
| − |
| |
| − | 30% {
| |
| − | clip: rect(32px, 9999px, 99px, 0);
| |
| − | transform: skew(0.96deg);
| |
| − | }
| |
| − |
| |
| − | 35% {
| |
| − | clip: rect(58px, 9999px, 60px, 0);
| |
| − | transform: skew(0.39deg);
| |
| − | }
| |
| − |
| |
| − | 40% {
| |
| − | clip: rect(47px, 9999px, 41px, 0);
| |
| − | transform: skew(0.45deg);
| |
| − | }
| |
| − |
| |
| − | 45% {
| |
| − | clip: rect(40px, 9999px, 8px, 0);
| |
| − | transform: skew(0.76deg);
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | clip: rect(60px, 9999px, 62px, 0);
| |
| − | transform: skew(0.47deg);
| |
| − | }
| |
| − |
| |
| − | 55% {
| |
| − | clip: rect(86px, 9999px, 86px, 0);
| |
| − | transform: skew(0.1deg);
| |
| − | }
| |
| − |
| |
| − | 60% {
| |
| − | clip: rect(98px, 9999px, 34px, 0);
| |
| − | transform: skew(0.2deg);
| |
| − | }
| |
| − |
| |
| − | 65% {
| |
| − | clip: rect(38px, 9999px, 31px, 0);
| |
| − | transform: skew(0.66deg);
| |
| − | }
| |
| − |
| |
| − | 70% {
| |
| − | clip: rect(5px, 9999px, 1px, 0);
| |
| − | transform: skew(0.22deg);
| |
| − | }
| |
| − |
| |
| − | 75% {
| |
| − | clip: rect(26px, 9999px, 45px, 0);
| |
| − | transform: skew(0.04deg);
| |
| − | }
| |
| − |
| |
| − | 80% {
| |
| − | clip: rect(1px, 9999px, 56px, 0);
| |
| − | transform: skew(0.45deg);
| |
| − | }
| |
| − |
| |
| − | 85% {
| |
| − | clip: rect(51px, 9999px, 31px, 0);
| |
| − | transform: skew(0.7deg);
| |
| − | }
| |
| − |
| |
| − | 90% {
| |
| − | clip: rect(30px, 9999px, 6px, 0);
| |
| − | transform: skew(0.95deg);
| |
| − | }
| |
| − |
| |
| − | 95% {
| |
| − | clip: rect(57px, 9999px, 97px, 0);
| |
| − | transform: skew(0.01deg);
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | clip: rect(80px, 9999px, 54px, 0);
| |
| − | transform: skew(0.97deg);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .as_hero {
| |
| − | position: relative;
| |
| − | background-color: #333;
| |
| − | -webkit-background-size: cover;
| |
| − | -moz-background-size: cover;
| |
| − | -o-background-size: cover;
| |
| − | background-size: cover;
| |
| − | background-repeat: no-repeat;
| |
| − | background-attachment: fixed;
| |
| − | background-position: top;
| |
| − | height: 100vh;
| |
| − | }
| |
| − |
| |
| − | .logo {
| |
| − | background: url("https://static.igem.org/mediawiki/2019/3/3f/T--Marburg--header_logo.svg");
| |
| − | min-height: 100%;
| |
| − | width: inherit;
| |
| − | background-repeat: no-repeat;
| |
| − | margin-top: 5px;
| |
| − | }
| |
| − |
| |
| − | .as_hero .as_hero_content {
| |
| − | position: relative;
| |
| − | z-index: 99;
| |
| − | display: flex;
| |
| − | align-items: center;
| |
| − | background: transparent;
| |
| − | border-radius: 0;
| |
| − | min-height: calc(100vh - 52px);
| |
| − | padding-left: 50%;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | .navbar {
| |
| − | -webkit-transition: background-color 0.4s ease;
| |
| − | -moz-transition: background-color 0.4s ease;
| |
| − | -o-transition: background-color 0.4s ease;
| |
| − | transition: background-color 0.4s ease;
| |
| − | }
| |
| − |
| |
| − | .transparent {
| |
| − | background-color: transparent;
| |
| − | -webkit-transition: background-color 0.4s ease;
| |
| − | -moz-transition: background-color 0.4s ease;
| |
| − | -o-transition: background-color 0.4s ease;
| |
| − | transition: background-color 0.4s ease;
| |
| − | }
| |
| − |
| |
| − | .transparent.navbar {
| |
| − | background-color: rgba(100, 0, 35, .5);
| |
| − | }
| |
| − |
| |
| − | .transparent .logo {
| |
| − | background: url("https://static.igem.org/mediawiki/2019/3/3a/T--Marburg--header_logo_white.svg");
| |
| − | background-repeat: no-repeat;
| |
| − | }
| |
| − |
| |
| − | .transparent .navbar-link {
| |
| − | color: #F5F5F5;
| |
| − | }
| |
| − |
| |
| − | .transparent .navbar-item {
| |
| − | color: #F5F5F5;
| |
| − | }
| |
| − |
| |
| − | .transparent .navbar-menu a:visited {
| |
| − | color: #F5F5F5;
| |
| − | }
| |
| − |
| |
| − | .transparent .navbar-dropdown {
| |
| − | background: rgba(2, 2, 2, .5);
| |
| − | }
| |
| − |
| |
| − | .transparent .navbar-burger {
| |
| − | color: #F5F5F5;
| |
| − | }
| |
| − |
| |
| − | .transparent .navbar-menu.is-active .navbar-dropdown {
| |
| − | background: transparent !important;
| |
| − | }
| |
| − |
| |
| − | .transparent .navbar-item.has-dropdown:hover .navbar-link {
| |
| − | background: rgba(2, 2, 2, .5);
| |
| − | }
| |
| − |
| |
| − | .transparent .navbar-menu.is-active .navbar-item.has-dropdown:hover .navbar-link {
| |
| − | background: transparent !important;
| |
| − | }
| |
| − |
| |
| − | .transparent .navbar-menu.is-active {
| |
| − | background: rgba(2, 2, 2, .7);
| |
| − | }
| |
| − |
| |
| − | .transparent .navbar-menu.is-active .navbar-item {
| |
| − | background: transparent !important;
| |
| − | }
| |
| − |
| |
| − | .grid-wrapper {
| |
| − | display: flex;
| |
| − | align-items: center;
| |
| − | flex-direction: row;
| |
| − | }
| |
| − |
| |
| − | .text1 {
| |
| − | margin-left: -125px;
| |
| − | z-index: 10;
| |
| − | padding: 1em;
| |
| − | }
| |
| − |
| |
| − | .grid1 {
| |
| − | display: grid;
| |
| − | grid-auto-columns: min-content;
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | .grid1 #img1 {
| |
| − | grid-column: 2;
| |
| − | grid-row: 1 / span 2;
| |
| − | margin-left: -150px;
| |
| − | min-width: 200px;
| |
| − | height: 200px;
| |
| − | background-color: #418D2A;
| |
| − | }
| |
| − |
| |
| − | .grid1 #img2 {
| |
| − | grid-column: 1;
| |
| − | grid-row: 2 / span 2;
| |
| − | z-index: 1;
| |
| − | margin-top: -75px;
| |
| − | min-width: 200px;
| |
| − | height: 200px;
| |
| − | background-color: #186703;
| |
| − | }
| |
| − |
| |
| − | .grid1 #img3 {
| |
| − | grid-column: 3;
| |
| − | grid-row: 3;
| |
| − | z-index: 2;
| |
| − | margin-left: -125px;
| |
| − | margin-top: -75px;
| |
| − | min-width: 200px;
| |
| − | height: 150px;
| |
| − | background-color: #6FB05A;
| |
| − | }
| |
| − |
| |
| − | header {
| |
| − | z-index: 1;
| |
| − | }
| |
| − |
| |
| − | video {
| |
| − | min-width: 100%;
| |
| − | max-width: none !important;
| |
| − | min-height: 100%;
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | left: 50%;
| |
| − | transform: translateX(-50%) translateY(-50%);
| |
| − | }
| |
| − |
| |
| − | .video-container {
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | overflow: hidden;
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − | .navbar-link {
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | .navbar-item {
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 1550px) {
| |
| − | .as_hero_content p {
| |
| − | margin: 0 !important;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 1375px) {
| |
| − | .as_hero_content {
| |
| − | padding-left: 25% !important;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 925px) {
| |
| − | .as_hero_content {
| |
| − | padding-left: 10% !important;
| |
| − | }
| |
| − |
| |
| − | .grid-wrapper {
| |
| − | flex-direction: column !important;
| |
| − | }
| |
| − |
| |
| − | .footer-container {
| |
| − | flex-direction: column !important;
| |
| − | width: fit-content;
| |
| − | }
| |
| − |
| |
| − | .text1 {
| |
| − | margin-left: 0;
| |
| − | z-index: unset;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 785px) {
| |
| − | .as_hero_content {
| |
| − | padding-left: 5% !important;
| |
| − | }
| |
| − | }
| |
| − | </style>-->
| |
| − |
| |
| | <script> | | <script> |
| | window.onload = function () { | | window.onload = function () { |
