Difference between revisions of "Team:Hawaii"

 
(48 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
 
+
{{Hawaii/Navbar}}
−
 
+
  
 
<html>
 
<html>
 
   <div id="container">
 
   <div id="container">
−
     <!-- Navigation Bar Start -->
+
     <div id="big-title">
−
    <nav id="top-nav">
+
       <h1 id="big-title-main">TO THE CENTROMERE</h1>
−
       <ul>
+
      <h1 id="big-title-alt">TO THE CENTROMERE</h1>
−
        <li>
+
      <h2 id="sub-title">WITH VIRUS-LIKE PARTICLES</h2>
−
          <a href="index.html">Home</a>
+
    </div>
−
        </li>
+
−
        <li class="dropdown">
+
−
          <a href="team.html">Team</a>
+
−
          <i class="fas fa-angle-down"></i>
+
−
          <div class="dropdown-content">
+
−
            <div><a href="experiments.html">Team Members</a></div>
+
−
            <div><a href="notebook.html">Collaborations</a></div>
+
−
          </div>
+
−
        </li>
+
  
−
        <li class="dropdown">
+
    <div id="button-container">
−
          <a href="project.html">Project</a>
+
      <button id="b1"><a href="https://2018.igem.org/Team:Hawaii/Description">EXPLORE</a></button>
−
          <i class="fas fa-angle-down"></i>
+
    </div>
−
          <div class="dropdown-content">
+
−
            <div><a href="description.html">Description</a></div>
+
−
            <div><a href="design.html">Design</a></div>
+
−
            <div><a href="parts.html">Experiments</a></div>
+
−
            <div><a href="html/notebook.html">Notebook</a></div>
+
−
            <div><a href="interlab.html">Interlab</a></div>
+
−
            <div><a href="model.html">Model</a></div>
+
−
            <div><a href="results.html">Results</a></div>
+
−
            <div><a href="demonstrate.html">Demonstrate</a></div>
+
−
            <div><a href="improve.html">Improve</a></div>
+
−
            <div><a href="attributions.html">Attributions</a></div>
+
−
          </div>
+
−
        </li>
+
  
−
        <li class="dropdown">
+
    <div id="spacer"></div>
−
          <a href="parts.html">Parts</a>
+
  </div>
−
          <i class="fas fa-angle-down"></i>
+
−
          <div class="dropdown-content">
+
−
            <div><a href="parts_overview.html">Parts Overview</a></div>
+
−
            <div><a href="basic_parts.html">Basic Parts</a></div>
+
−
            <div><a href="composite_parts.html">Composite Parts</a></div>
+
−
            <div><a href="part_collection.html">Part Collection</a></div>
+
−
          </div>
+
−
        </li>
+
  
−
        <li>
+
<style>
−
          <a href="safety.html">Safety</a>
+
−
        </li>
+
  
−
        <li class="dropdown">
+
@keyframes fall {
−
          <a href="html/human.html">Human Practices</a>
+
  from {
−
          <i class="fas fa-angle-down"></i>
+
    transform: rotate(0deg);
−
          <div class="dropdown-content">
+
    transform-origin: 50% 40%;
−
            <div><a href="human.html">Human Practices</a></div>
+
  }
−
            <div><a href="education.html">Education and Engagement</a></div>
+
  40% {
−
          </div>
+
    opacity: 1;
−
        </li>
+
  }
 +
  to {
 +
    top: 700px;
 +
    left: calc(50vw);
 +
    opacity: 0;
 +
    transform: rotate(360deg);
 +
    transform-origin: 10% 10%;
 +
    display: none;
 +
  }
 +
}
  
−
        <li class="dropdown">
+
#big-title {
−
          <a href="html/awards.html">Awards</a>
+
  width: calc(100vw);
−
          <i class="fas fa-angle-down"></i>
+
  top: 250px;
−
          <div class="dropdown-content">
+
  text-align: center;
−
            <div><a href="applied_design.html">Applied Design</a></div>
+
  position: absolute;
−
            <div><a href="entrepreneurship.html">Entrepreneurship</a></div>
+
  font-size: 60px;
−
            <div><a href="hardware.html">Hardware</a></div>
+
  font-family: 'Oswald', sans-serif;
−
            <div><a href="model.html">Model</a></div>
+
  color: rgb(30,30,30);
−
            <div><a href="plant.html">Plant</a></div>
+
  display: flex;
−
            <div><a href="software.html">Software</a></div>
+
  flex-direction: column;
−
          </div>
+
  justify-content: center;
−
        </li>
+
  letter-spacing: 10px;
−
      </ul>
+
  z-index: 2;
−
    </nav>
+
}
 +
#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%;
 +
  display: flex;
 +
  justify-content: center;
 +
  position: absolute;
 +
  top: 600px;
 +
  z-index: 100;
 +
}
 +
#b1, #b1 a{
 +
  font-family: 'Oswald', sans-serif;
 +
  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;
 +
}
  
−
    <!-- Navigation Bar End -->
+
</style>
 +
<script>
 +
window.onload = function() {
 +
  var loadAnim = true;
 +
  var eCol = "rgb(40,40,40)";
 +
  var maxSize = 30;
  
−
    <!-- Content Start -->
+
  function lowRand() {
−
     <div id="content">
+
     return Math.floor(Math.random()*120);
−
      <section id="section1">
+
  }
−
        <h1>Description</h1>
+
  function highRand() {
−
        <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?
+
    return Math.floor(Math.random() * 80) + 255;
−
        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!
+
  }
−
        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>
+
  function wRand() {
−
      </section>
+
    return Math.floor(Math.random() * 1200);
−
    </div>
+
  }
−
     <!-- Content End -->
+
  function vlpRand() {
 +
     return Math.floor(Math.random()*maxSize) ;
 +
  }
  
−
     <!-- Footer Start -->
+
  function generateCol(r,g,b) {
−
     <div id="footer">
+
     var c1, c2a, c2b, c3, c4a, c4b, c4c;
−
       <div class="footer-block">
+
     var arr = [c1, c2a, c2b, c3, c4a, c4b, c4c];
−
        <div>
+
    for (let i = 0; i < arr.length; i++) {
−
          <h3 class="footer-header">Connect with Us</h3>
+
      r += (255-r)*0.25;
−
          <p>Looking to chat, collaborate, and connect? Send us an email!</p>
+
       g += (255-g)*0.25;
−
          <p>Email Placeholder</p>
+
      b += (255-b)*0.25;
−
        </div>
+
      arr[i] = "rgb(" + Math.round(r) + "," + Math.round(g) + "," + Math.round(b) + ")";
 +
      // console.log(arr[i]);
 +
    }
 +
    return arr;
 +
  }
 +
  generateCol(180,40,20);
  
−
        <div id="social">
+
  function createVLP() {
−
          <img src="" alt="" id="social-icon">
+
    var cont = document.createElement('div');
−
          <img src="" alt="" id="social-icon">
+
−
          <img src="" alt="" id="social-icon">
+
−
        </div>
+
−
      </div>
+
  
−
      <div class="footer-block">
+
    cont.classList.add('vlp');
−
        <div>
+
    cont.style.left = wRand() + "px";
−
          <h3 class="footer-header">Where are We</h3>
+
−
          <p>University of Hawaii at Manoa</p>
+
−
          <p>1955 East West Road</p>
+
−
          <p>Honolulu, Hawaii 96822</p>
+
−
        </div>
+
−
      </div>
+
  
−
      <div class="footer-block">
+
    var div1 = document.createElement('div');
−
        <h3>Navigation</h3>
+
    var c4c = document.createElement('div');
−
        <div id="footer-nav-links">
+
    var c4b = document.createElement('div');
−
          <div class="footer-nav-col">
+
    var c2b = document.createElement('div');
−
            <ul>
+
    var extra = document.createElement('div');
−
              <li><a href="#">Home</a></li>
+
−
              <li><a href="html/project.html">Project</a></li>
+
−
              <li><a href="html/notebook.html">Notebook</a></li>
+
−
              <li><a href="html/team.html">Team</a></li>
+
−
              <li><a href="html/awards.html">Awards</a></li>
+
−
            </ul>
+
−
          </div>
+
−
          <div class="footer-nav-col">
+
−
            <ul>
+
−
              <li></li>
+
−
            </ul>
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
−
    <!-- Footer End -->
+
−
  </div>
+
  
−
<style>
+
    c4c.classList.add('c4c');
−
/*REMOVE UNWANTED LOGO AND TITLE*/
+
    c4b.classList.add('c4b');
−
#top_title {
+
    c2b.classList.add('c2b');
−
display:none;  
+
    extra.classList.add('extra');
−
}
+
−
#logo_2018 {
+
−
display:none;
+
−
}
+
  
−
/*GENERAL STYLES*/
+
    c4c.appendChild(c4b);
−
#content {
+
    c4c.appendChild(c2b);
−
margin:0px:
+
    c4c.appendChild(extra);
−
margin-left:0px;
+
    div1.appendChild(c4c);
−
padding:0px;
+
−
width: calc(100vw);
+
−
height: calc(100vh);
+
−
}
+
−
</style>
+
  
 +
    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}}

Latest revision as of 22:00, 2 October 2018

TO THE CENTROMERE

TO THE CENTROMERE

WITH VIRUS-LIKE PARTICLES