Difference between revisions of "Team:Hawaii"

 
(35 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Hawaii/All}}
 
 
{{Hawaii/Navbar}}
 
{{Hawaii/Navbar}}
 +
 
<html>
 
<html>
−
   <div id="description">
+
   <div id="container">
−
      <section id="section1">
+
    <div id="big-title">
−
        <h1>Description</h1>
+
      <h1 id="big-title-main">TO THE CENTROMERE</h1>
−
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cum, earum reprehenderit, tempora vitae eum inventore molestiae, incidunt ut eius a. Consectetur, minima, quia. Vitae modi a, fuga dignissimos. Velit?
+
      <h1 id="big-title-alt">TO THE CENTROMERE</h1>
−
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptatum ipsum dolor quam explicabo sed, autem maiores quibusdam quod alias repellat dolores debitis fugit. Beatae facere eveniet laborum est deserunt!
+
       <h2 id="sub-title">WITH VIRUS-LIKE PARTICLES</h2>
−
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci autem eum laboriosam fugiat aperiam qui deserunt aliquam, voluptas aspernatur eius. Minima sapiente ipsa id perspiciatis eius esse vel, saepe qui.</p>
+
−
       </section>
+
 
     </div>
 
     </div>
 +
 +
    <div id="button-container">
 +
      <button id="b1"><a href="https://2018.igem.org/Team:Hawaii/Description">EXPLORE</a></button>
 +
    </div>
 +
 +
    <div id="spacer"></div>
 +
  </div>
  
 
<style>
 
<style>
−
#description {
+
 
 +
@keyframes fall {
 +
  from {
 +
    transform: rotate(0deg);
 +
    transform-origin: 50% 40%;
 +
  }
 +
  40% {
 +
    opacity: 1;
 +
  }
 +
  to {
 +
    top: 700px;
 +
    left: calc(50vw);
 +
    opacity: 0;
 +
    transform: rotate(360deg);
 +
    transform-origin: 10% 10%;
 +
    display: none;
 +
  }
 +
}
 +
 
 +
#big-title {
 +
  width: calc(100vw);
 +
  top: 250px;
 +
  text-align: center;
 +
  position: absolute;
 +
  font-size: 60px;
 +
  font-family: 'Oswald', sans-serif;
 +
  color: rgb(30,30,30);
 +
  display: flex;
 +
  flex-direction: column;
 +
  justify-content: center;
 +
  letter-spacing: 10px;
 +
  z-index: 2;
 +
}
 +
#sub-title {
 +
  font-family: 'Oswald', sans-serif;
 +
  margin: 0px;
 +
  padding: 0px;
 +
  font-size: 40px;
 +
}
 +
#big-title-alt {
 +
  display: none;
 +
  justify-content: center;
 +
  width: 100%;
 +
  font-size: 60px;
 +
  position: absolute;
 +
  top: 100px;
 +
}
 +
@media only screen and (max-width: 800px) {
 +
  #big-title-main {
 +
    display: none;
 +
  }
 +
  #big-title-alt {
 +
    display: flex;
 +
  }
 +
  #sub-title {
 +
    display: none;
 +
  }
 +
}
 +
@media only screen and (max-width: 1200px) {
 +
  #big-title {
 +
    font-size: 50px;
 +
    top: 200px;
 +
  }
 +
}
 +
.c1 {
 +
  width: 0;
 +
  height: 0;
 +
}
 +
.c2a {
 +
  width: 0;
 +
  height: 0;
 +
  transform: rotate(360deg);
 +
}
 +
.c2b {
 +
  width: 0;
 +
  height: 0;
 +
  transform: scaleY(-1);
 +
}
 +
.c3 {
 +
  width: 0;
 +
  height: 0;
 +
}
 +
.c4a {
 +
}
 +
.c4b {
 +
  width: 0;
 +
  height: 0;
 +
  transform: scaleX(-1);
 +
}
 +
.c4c {
 +
  width: 0;
 +
  height: 0;
 +
}
 +
.extra {
 +
  width: 0;
 +
  height: 0;
 +
}
 +
.vlp {
 +
  height: 300px;
 +
  width: 240px;
 +
  position: absolute;
 +
  top: -50px;
 +
  animation-name: fall;
 +
  animation-duration: 6s;
 +
  animation-iteration-count: 1;
 +
  z-index: 1;
 +
}
 +
#button-container {
 
   width: 100%;
 
   width: 100%;
−
  height: auto;
 
 
   display: flex;
 
   display: flex;
 
   justify-content: center;
 
   justify-content: center;
 +
  position: absolute;
 +
  top: 600px;
 +
  z-index: 100;
 
}
 
}
−
#section1 {
+
#b1, #b1 a{
−
   width: 70%;
+
  font-family: 'Oswald', sans-serif;
−
   min-height: 900px;
+
  font-style: italic;
 +
  letter-spacing: 3px;
 +
  font-size: 30px;
 +
  background-color: rgb(30,30,30);
 +
  color: white;
 +
  padding: 10px;
 +
  text-align: center;
 +
  border:none;
 +
}
 +
#b1:hover {
 +
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 +
}
 +
#b1:focus {
 +
  outline:0;
 +
}
 +
#b1 a:hover {
 +
  text-decoration: none;
 +
}
 +
#spacer {
 +
   width: 100%;
 +
   height: 700px;
 
}
 
}
  
 
</style>
 
</style>
 +
<script>
 +
window.onload = function() {
 +
  var loadAnim = true;
 +
  var eCol = "rgb(40,40,40)";
 +
  var maxSize = 30;
 +
 +
  function lowRand() {
 +
    return Math.floor(Math.random()*120);
 +
  }
 +
  function highRand() {
 +
    return Math.floor(Math.random() * 80) + 255;
 +
  }
 +
  function wRand() {
 +
    return Math.floor(Math.random() * 1200);
 +
  }
 +
  function vlpRand() {
 +
    return Math.floor(Math.random()*maxSize) ;
 +
  }
 +
 +
  function generateCol(r,g,b) {
 +
    var c1, c2a, c2b, c3, c4a, c4b, c4c;
 +
    var arr = [c1, c2a, c2b, c3, c4a, c4b, c4c];
 +
    for (let i = 0; i < arr.length; i++) {
 +
      r += (255-r)*0.25;
 +
      g += (255-g)*0.25;
 +
      b += (255-b)*0.25;
 +
      arr[i] = "rgb(" + Math.round(r) + "," + Math.round(g) + "," + Math.round(b) + ")";
 +
      // console.log(arr[i]);
 +
    }
 +
    return arr;
 +
  }
 +
  generateCol(180,40,20);
 +
 +
  function createVLP() {
 +
    var cont = document.createElement('div');
 +
 +
    cont.classList.add('vlp');
 +
    cont.style.left = wRand() + "px";
 +
 +
    var div1 = document.createElement('div');
 +
    var c4c = document.createElement('div');
 +
    var c4b = document.createElement('div');
 +
    var c2b = document.createElement('div');
 +
    var extra = document.createElement('div');
 +
 +
    c4c.classList.add('c4c');
 +
    c4b.classList.add('c4b');
 +
    c2b.classList.add('c2b');
 +
    extra.classList.add('extra');
 +
 +
    c4c.appendChild(c4b);
 +
    c4c.appendChild(c2b);
 +
    c4c.appendChild(extra);
 +
    div1.appendChild(c4c);
 +
 +
    var div2 = document.createElement('div');
 +
    var c4a = document.createElement('div');
 +
    var c3 = document.createElement('div');
 +
    var c2a = document.createElement('div');
 +
 +
    c4a.classList.add('c4a');
 +
    c3.classList.add('c3');
 +
    c2a.classList.add('c2a');
 +
 +
    c4a.appendChild(c3);
 +
    c4a.appendChild(c2a);
 +
    div2.appendChild(c4a);
 +
 +
    var div3 = document.createElement('div');
 +
    var c1 = document.createElement('div');
 +
 +
    c1.classList.add('c1');
 +
 +
    div3.appendChild(c1);
 +
 +
    cont.appendChild(div1);
 +
    cont.appendChild(div2);
 +
    cont.appendChild(div3);
 +
 +
    var sides = [c1, c2a, c2b, c3, c4a, c4b, c4c];
 +
 +
    function createSides(startSize, colorArr, elArr) {
 +
      var s2 = startSize - 5;
 +
      var w = startSize * 2;
 +
      elArr[0].style.borderLeft = startSize + "px solid transparent";
 +
      elArr[0].style.borderRight = startSize + "px solid transparent";
 +
      elArr[0].style.borderTop = s2 + "px solid " + colorArr[0];
 +
 +
      elArr[1].style.borderRight = startSize + "px solid " + colorArr[1];
 +
      elArr[1].style.borderBottom = s2 + "px solid transparent";
 +
 +
      elArr[2].style.borderRight = startSize + "px solid " + colorArr[2];
 +
      elArr[2].style.borderBottom = s2 + "px solid transparent";
 +
 +
      elArr[3].style.borderRight = startSize + "px solid transparent";
 +
      elArr[3].style.borderBottom = s2 + "px solid " + colorArr[3];
 +
 +
      elArr[4].style.backgroundColor = colorArr[4];
 +
      elArr[4].style.width = w + "px";
 +
      elArr[4].style.height = s2 + "px";
 +
 +
      elArr[5].style.borderRight = startSize + "px solid " + colorArr[5];
 +
      elArr[5].style.borderTop = s2 + "px solid transparent";
 +
 +
      elArr[6].style.borderLeft = startSize + "px solid transparent";
 +
      elArr[6].style.borderBottom = s2 + "px solid " + colorArr[6];
 +
 +
    }
 +
    createSides(vlpRand(), generateCol(255,highRand(),lowRand()), sides);
 +
    if (document.getElementsByClassName('vlp').length > 15) {
 +
      $('.vlp').first().remove();
 +
    }
 +
 +
    document.body.appendChild(cont);
 +
  }
 +
 +
  setInterval(VLPtimer, 400);
 +
 +
  function VLPtimer() {
 +
    if (window.scrollY < 700) {
 +
      var rand = Math.round(Math.random()*(600));
 +
      setTimeout(function(){
 +
        createVLP();
 +
      }, rand);
 +
    } else {
 +
      window.clearTimeout();
 +
    }
 +
  };
 +
 +
}
 +
</script>
 
</html>
 
</html>
 
{{Hawaii/Footer}}
 
{{Hawaii/Footer}}

Latest revision as of 22:00, 2 October 2018

TO THE CENTROMERE

TO THE CENTROMERE

WITH VIRUS-LIKE PARTICLES