(23 intermediate revisions by 2 users not shown) | |||
Line 89: | Line 89: | ||
// select element and fade it out | // select element and fade it out | ||
// $('.overlay').fadeOut(); | // $('.overlay').fadeOut(); | ||
− | $('.overlay').delay( | + | $('.overlay').delay(1500).fadeOut(function(){$(this).remove()}); |
}); | }); | ||
</script> | </script> | ||
Line 128: | Line 128: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
− | background: | + | background-image: radial-gradient(circle farthest-corner at center, #0d0814 0%, #120e29 100%); |
text-align: center; | text-align: center; | ||
vertical-align: middle; | vertical-align: middle; | ||
Line 442: | Line 442: | ||
height: 100vh; | height: 100vh; | ||
position: relative; | position: relative; | ||
− | background-image: url(https:// | + | background-color: #000; |
+ | /*background-image: url(https://static.igem.org/mediawiki/2017/e/ef/Westminster-UK-GroupPhoto.jpeg);*/ | ||
background-size: cover; | background-size: cover; | ||
background-position: center center; | background-position: center center; | ||
Line 806: | Line 807: | ||
} | } | ||
+ | |||
+ | /***************************************************** LOADING TEXT ****************************************************/ | ||
+ | |||
+ | |||
+ | .spinner { | ||
+ | position: absolute; | ||
+ | width: 128px; | ||
+ | height: 128px; | ||
+ | top: calc(50% - 64px); | ||
+ | left: calc(50% - 64px); | ||
+ | -webkit-transform: perspective(206px) rotateX(45deg); | ||
+ | transform: perspective(206px) rotateX(45deg); | ||
+ | } | ||
+ | |||
+ | .outer { | ||
+ | box-sizing: border-box; | ||
+ | -webkit-animation: spin 3s linear infinite; | ||
+ | animation: spin 3s linear infinite; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .inner { | ||
+ | position: absolute; | ||
+ | border-radius: 50%; | ||
+ | width: 64px; | ||
+ | height: 64px; | ||
+ | -webkit-animation: spin 1.8s ease-in-out infinite; | ||
+ | animation: spin 1.8s ease-in-out infinite; | ||
+ | } | ||
+ | .inner.tl { | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | border-top: 2px solid #531430; | ||
+ | border-left: 4px solid #531430; | ||
+ | } | ||
+ | .inner.tr { | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | border-top: 2px solid #e04960; | ||
+ | border-right: 4px solid #e04960; | ||
+ | } | ||
+ | .inner.br { | ||
+ | bottom: 0; | ||
+ | right: 0; | ||
+ | border-bottom: 2px solid #531430; | ||
+ | border-right: 4px solid #531430; | ||
+ | } | ||
+ | .inner.bl { | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | border-bottom: 2px solid #e04960; | ||
+ | border-left: 4px solid #e04960; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes spin { | ||
+ | 0% { | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
+ | } | ||
+ | 100% { | ||
+ | -webkit-transform: rotate(360deg); | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @keyframes spin { | ||
+ | 0% { | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | transform: rotate(0deg); | ||
+ | } | ||
+ | 100% { | ||
+ | -webkit-transform: rotate(360deg); | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
/***************************************************** RESPONSIVE STYLING ****************************************************/ | /***************************************************** RESPONSIVE STYLING ****************************************************/ | ||
Line 859: | Line 935: | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | ||
+ | <link href='https://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'> | ||
</head> | </head> | ||
Line 883: | Line 960: | ||
</section> | </section> | ||
− | <div class="overlay"><div> | + | <div class="overlay"><div> |
+ | |||
+ | <div class="spinner"> | ||
+ | <div class="outer"> | ||
+ | <div class="inner tl"></div> | ||
+ | <div class="inner tr"></div> | ||
+ | <div class="inner br"></div> | ||
+ | <div class="inner bl"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div></div> | ||
<script> | <script> | ||
Line 924: | Line 1,012: | ||
</script> | </script> | ||
− | |||
− | |||
<!-- start of content --> | <!-- start of content --> | ||
<div class="igem_2017_content_wrapper"> | <div class="igem_2017_content_wrapper"> | ||
− | <h1> | + | <h1>WELCOME TO THE BIO BUSTERS</h1> |
Latest revision as of 15:49, 13 October 2017