Difference between revisions of "Template:Westminster UK2"

 
(17 intermediate revisions by 2 users not shown)
Line 128: Line 128:
 
     width:          100%;
 
     width:          100%;
 
     height:        100%;
 
     height:        100%;
−
     background:     #fff;
+
     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://images.unsplash.com/photo-1446771326090-d910bfaf00f6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=9216e1a8598a8530ce329b41a8f3725d);
+
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 810: Line 811:
  
  
−
.start-screen {
+
.spinner {
−
   display: -webkit-box;
+
   position: absolute;
−
   display: -ms-flexbox;
+
   width: 128px;
−
   display: flex;
+
   height: 128px;
−
   -webkit-box-pack: center;
+
   top: calc(50% - 64px);
−
      -ms-flex-pack: center;
+
   left: calc(50% - 64px);
−
          justify-content: center;
+
   -webkit-transform: perspective(206px) rotateX(45deg);
−
   -ms-flex-flow: nowrap column;
+
           transform: perspective(206px) rotateX(45deg);
−
      flex-flow: nowrap column;
+
−
   -webkit-box-align: center;
+
−
      -ms-flex-align: center;
+
−
           align-items: center;
+
−
  min-height: 100vh;
+
 
}
 
}
  
−
.loading {
+
.outer {
−
   display: -webkit-box;
+
   box-sizing: border-box;
−
   display: -ms-flexbox;
+
   -webkit-animation: spin 3s linear infinite;
−
  display: flex;
+
          animation: spin 3s linear infinite;
−
   margin: 24px 0;
+
   height: 100%;
 
}
 
}
  
−
.loading__element {
+
.inner {
−
   font: normal 100 2rem/1 Roboto;
+
   position: absolute;
−
   letter-spacing: .5em;
+
   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 {
−
[class*="el"] {
+
   top: 0;
−
   -webkit-animation: bouncing 2s infinite ease;
+
  left: 0;
−
          animation: bouncing 2s infinite ease;
+
  border-top: 2px solid #531430;
 +
  border-left: 4px solid #531430;
 
}
 
}
−
 
+
.inner.tr {
−
.el1 {
+
   top: 0;
−
   -webkit-animation-delay: 0.1s;
+
  right: 0;
−
          animation-delay: 0.1s;
+
  border-top: 2px solid #e04960;
 +
  border-right: 4px solid #e04960;
 
}
 
}
−
 
+
.inner.br {
−
.el2 {
+
   bottom: 0;
−
   -webkit-animation-delay: 0.2s;
+
  right: 0;
−
          animation-delay: 0.2s;
+
  border-bottom: 2px solid #531430;
 +
  border-right: 4px solid #531430;
 
}
 
}
−
 
+
.inner.bl {
−
.el3 {
+
   bottom: 0;
−
   -webkit-animation-delay: 0.3s;
+
  left: 0;
−
          animation-delay: 0.3s;
+
  border-bottom: 2px solid #e04960;
 +
  border-left: 4px solid #e04960;
 
}
 
}
  
−
.el4 {
+
@-webkit-keyframes spin {
−
  -webkit-animation-delay: 0.4s;
+
   0% {
−
          animation-delay: 0.4s;
+
     -webkit-transform: rotate(0deg);
−
}
+
             transform: rotate(0deg);
−
 
+
−
.el5 {
+
−
  -webkit-animation-delay: 0.5s;
+
−
          animation-delay: 0.5s;
+
−
}
+
−
 
+
−
.el6 {
+
−
  -webkit-animation-delay: 0.6s;
+
−
          animation-delay: 0.6s;
+
−
}
+
−
 
+
−
.el7 {
+
−
  -webkit-animation-delay: 0.7s;
+
−
          animation-delay: 0.7s;
+
−
}
+
−
 
+
−
.el8 {
+
−
  -webkit-animation-delay: 0.8s;
+
−
          animation-delay: 0.8s;
+
−
}
+
−
 
+
−
.el9 {
+
−
  -webkit-animation-delay: 0.9s;
+
−
          animation-delay: 0.9s;
+
−
}
+
−
 
+
−
@-webkit-keyframes bouncing {
+
−
   0%, 100% {
+
−
     -webkit-transform: scale3d(1, 1, 1);
+
−
             transform: scale3d(1, 1, 1);
+
 
   }
 
   }
−
   50% {
+
   100% {
−
     -webkit-transform: scale3d(0, 0, 1);
+
     -webkit-transform: rotate(360deg);
−
             transform: scale3d(0, 0, 1);
+
             transform: rotate(360deg);
 
   }
 
   }
 
}
 
}
  
−
@keyframes bouncing {
+
@keyframes spin {
−
   0%, 100% {
+
   0% {
−
     -webkit-transform: scale3d(1, 1, 1);
+
     -webkit-transform: rotate(0deg);
−
             transform: scale3d(1, 1, 1);
+
             transform: rotate(0deg);
 
   }
 
   }
−
   50% {
+
   100% {
−
     -webkit-transform: scale3d(0, 0, 1);
+
     -webkit-transform: rotate(360deg);
−
             transform: scale3d(0, 0, 1);
+
             transform: rotate(360deg);
 
   }
 
   }
 
}
 
}
−
 
−
 
 
/***************************************************** RESPONSIVE STYLING ****************************************************/
 
/***************************************************** RESPONSIVE STYLING ****************************************************/
  
Line 990: Line 962:
 
<div class="overlay"><div>
 
<div class="overlay"><div>
  
−
<div class="start-screen">
+
<div class="spinner">
−
 
+
   <div class="outer">
−
   <div class="loading">
+
     <div class="inner tl"></div>
−
     <div class="loading__element el1">L</div>
+
     <div class="inner tr"></div>
−
    <div class="loading__element el2">O</div>
+
     <div class="inner br"></div>
−
    <div class="loading__element el3">A</div>
+
     <div class="inner bl"></div>
−
    <div class="loading__element el4">D</div>
+
−
    <div class="loading__element el5">I</div>
+
−
    <div class="loading__element el6">N</div>
+
−
    <div class="loading__element el7">G</div>
+
−
  </div>
+
−
 
+
−
    <div class="loading">
+
−
    <div class="loading__element el1">B</div>
+
−
    <div class="loading__element el2">i</div>
+
−
    <div class="loading__element el3">o</div>
+
−
    <div class="loading__element el4">B</div>
+
−
    <div class="loading__element el5">u</div>
+
−
    <div class="loading__element el6">s</div>
+
−
    <div class="loading__element el7">t</div>
+
−
     <div class="loading__element el8">e</div>
+
−
     <div class="loading__element el9">r</div>
+
−
     <div class="loading__element el9">s</div>
+
 
   </div>
 
   </div>
−
 
 
 
</div>
 
</div>
  
Line 1,058: Line 1,012:
  
 
</script>
 
</script>
−
 
−
 
  
  
 
<!-- start of content -->
 
<!-- start of content -->
 
<div class="igem_2017_content_wrapper">
 
<div class="igem_2017_content_wrapper">
−
<h1>TEST BIO BUSTERS</h1>
+
<h1>WELCOME TO THE BIO BUSTERS</h1>

Latest revision as of 15:49, 13 October 2017

BioBusters

WELCOME TO THE BIO BUSTERS