Difference between revisions of "Team:Hawaii"

 
(42 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">
+
−
          <a href="project.html">Project</a>
+
−
          <i class="fas fa-angle-down"></i>
+
−
          <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">
+
−
          <a href="parts.html">Parts</a>
+
−
          <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>
+
−
          <a href="safety.html">Safety</a>
+
−
        </li>
+
−
 
+
−
        <li class="dropdown">
+
−
          <a href="html/human.html">Human Practices</a>
+
−
          <i class="fas fa-angle-down"></i>
+
−
          <div class="dropdown-content">
+
−
            <div><a href="human.html">Human Practices</a></div>
+
−
            <div><a href="education.html">Education and Engagement</a></div>
+
−
          </div>
+
−
        </li>
+
−
 
+
−
        <li class="dropdown">
+
−
          <a href="html/awards.html">Awards</a>
+
−
          <i class="fas fa-angle-down"></i>
+
−
          <div class="dropdown-content">
+
−
            <div><a href="applied_design.html">Applied Design</a></div>
+
−
            <div><a href="entrepreneurship.html">Entrepreneurship</a></div>
+
−
            <div><a href="hardware.html">Hardware</a></div>
+
−
            <div><a href="model.html">Model</a></div>
+
−
            <div><a href="plant.html">Plant</a></div>
+
−
            <div><a href="software.html">Software</a></div>
+
−
          </div>
+
−
        </li>
+
−
      </ul>
+
−
    </nav>
+
−
 
+
−
    <!-- Navigation Bar End -->
+
  
−
    <!-- Content Start -->
+
     <div id="button-container">
−
     <div id="content">
+
       <button id="b1"><a href="https://2018.igem.org/Team:Hawaii/Description">EXPLORE</a></button>
−
       <section id="section1">
+
−
        <h1>Description</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?
+
−
        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>
+
−
      </section>
+
 
     </div>
 
     </div>
−
    <!-- Content End -->
 
  
−
    <!-- Footer Start -->
+
     <div id="spacer"></div>
−
     <div id="footer">
+
−
      <div class="footer-block">
+
−
        <div>
+
−
          <h3 class="footer-header">Connect with Us</h3>
+
−
          <p>Looking to chat, collaborate, and connect? Send us an email!</p>
+
−
          <p>Email Placeholder</p>
+
−
        </div>
+
−
 
+
−
        <div id="social">
+
−
          <img src="" alt="" id="social-icon">
+
−
          <img src="" alt="" id="social-icon">
+
−
          <img src="" alt="" id="social-icon">
+
−
        </div>
+
−
      </div>
+
−
 
+
−
      <div class="footer-block">
+
−
        <div>
+
−
          <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">
+
−
        <h3>Navigation</h3>
+
−
        <div id="footer-nav-links">
+
−
          <div class="footer-nav-col">
+
−
            <ul>
+
−
              <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>
 
   </div>
  
 
<style>
 
<style>
−
/*REMOVE UNWANTED LOGO AND TITLE*/
+
 
−
#top_title {
+
@keyframes fall {
−
display:none;  
+
  from {
−
}
+
    transform: rotate(0deg);
−
#logo_2018 {
+
    transform-origin: 50% 40%;
−
display:none;
+
  }
−
}
+
  40% {
−
#globalWrapper {
+
    opacity: 1;
−
padding-bottom: 0px;
+
  }
 +
  to {
 +
    top: 700px;
 +
    left: calc(50vw);
 +
    opacity: 0;
 +
    transform: rotate(360deg);
 +
    transform-origin: 10% 10%;
 +
    display: none;
 +
  }
 
}
 
}
  
−
/*GENERAL STYLES*/
+
#big-title {
−
#content {
+
  width: calc(100vw);
−
margin-left:0px;
+
  top: 250px;
−
padding:0px;
+
  text-align: center;
−
width: calc(100vw);
+
  position: absolute;
−
height: calc(100vh);
+
  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;  
 
}
 
}
−
@import url('https://fonts.googleapis.com/css?family=Cabin:700|Cabin+Condensed|Raleway|Roboto+Condensed|Open+Sans+Condensed:300|Work+Sans|Tajawal|Fjalla+One|Noto+Sans|EB+Garamond|Oswald');
+
#sub-title {
−
body {
+
  font-family: 'Oswald', sans-serif;
 
   margin: 0px;
 
   margin: 0px;
 
   padding: 0px;
 
   padding: 0px;
−
   color: rgb(40,40,40);
+
   font-size: 40px;
−
  width: calc(100vw);
+
 
}
 
}
−
h1 {
+
#big-title-alt {
−
   font-size: 30px;
+
   display: none;
−
   /* font-family: 'Cabin', sans-serif; */
+
  justify-content: center;
 +
  width: 100%;
 +
   font-size: 60px;
 +
  position: absolute;
 +
  top: 100px;
 
}
 
}
−
h2 {
+
@media only screen and (max-width: 800px) {
−
   font-size: 26px;
+
   #big-title-main {
−
   font-family: 'Roboto Condensed', sans-serif;
+
    display: none;
 +
   }
 +
  #big-title-alt {
 +
    display: flex;
 +
  }
 +
  #sub-title {
 +
    display: none;
 +
  }
 
}
 
}
−
h3 {
+
@media only screen and (max-width: 1200px) {
−
   font-size: 22px;
+
   #big-title {
−
  font-family: 'Roboto Condensed', sans-serif;
+
    font-size: 50px;
−
   letter-spacing: 1px;
+
    top: 200px;
 +
   }
 
}
 
}
−
h4 {
+
.c1 {
−
   font-size: 20px;
+
   width: 0;
−
   font-family: 'Cabin', sans-serif;
+
   height: 0;
−
  letter-spacing: 2px;
+
 
}
 
}
−
h5 {
+
.c2a {
−
   font-size: 18px;
+
   width: 0;
−
   font-family: 'Raleway', sans-serif;
+
   height: 0;
 +
  transform: rotate(360deg);
 
}
 
}
−
p {
+
.c2b {
−
   font-size: 20px;
+
   width: 0;
−
   font-family: 'EB Garamond', sans-serif;
+
   height: 0;
−
   display: flex;
+
   transform: scaleY(-1);
−
  align-items: center;
+
 
}
 
}
−
li {
+
.c3 {
−
   list-style-type: none;
+
   width: 0;
−
   padding-right: 30px;
+
   height: 0;
 
}
 
}
−
ul {
+
.c4a {
−
list-style-image: none;
+
 
}
 
}
−
a {
+
.c4b {
−
   text-decoration: none;
+
   width: 0;
−
   color: inherit;
+
   height: 0;
−
   font-size: 18px;
+
   transform: scaleX(-1);
−
border-bottom: 0px;
+
 
}
 
}
−
.big-section {
+
.c4c {
−
   margin-bottom: 100px;
+
   width: 0;
 +
  height: 0;
 
}
 
}
−
/* Accessory styles. */
+
.extra {
−
/* #triangle {
+
 
   width: 0;
 
   width: 0;
 
   height: 0;
 
   height: 0;
−
   border-bottom: 1000px solid rgb(30,30,40);
+
}
−
   border-right: calc(100vw) solid transparent;
+
.vlp {
 +
   height: 300px;
 +
   width: 240px;
 
   position: absolute;
 
   position: absolute;
−
   left: 0px;
+
   top: -50px;
 +
  animation-name: fall;
 +
  animation-duration: 6s;
 +
  animation-iteration-count: 1;
 
   z-index: 1;
 
   z-index: 1;
−
} */
+
}
−
/* Nav styles. */
+
#button-container {
−
#top-nav {
+
 
   width: 100%;
 
   width: 100%;
−
  height: 100px;
 
 
   display: flex;
 
   display: flex;
 
   justify-content: center;
 
   justify-content: center;
−
  align-items: center;
 
−
  letter-spacing: 1px;
 
−
}
 
−
#top-nav ul {
 
−
  width: 1100px;
 
−
  padding: 0px;
 
−
  display: flex;
 
−
  justify-content: space-around;
 
−
  align-items: center;
 
−
  flex-direction: row;
 
−
  z-index: 1;
 
−
}
 
−
.dropdown {
 
−
  position: relative;
 
−
}
 
−
.dropdown-content {
 
−
  height: auto;
 
−
  width: auto;
 
−
  display: none;
 
 
   position: absolute;
 
   position: absolute;
−
   background-color: white;
+
   top: 600px;
−
   padding: 20px;
+
   z-index: 100;  
 
}
 
}
−
.dropdown-content div {
+
#b1, #b1 a{
−
   padding-bottom: 10px;
+
   font-family: 'Oswald', sans-serif;
−
   padding-top: 10px;
+
   font-style: italic;
 +
  letter-spacing: 3px;
 +
  font-size: 30px;
 +
  background-color: rgb(30,30,30);
 +
  color: white;
 +
  padding: 10px;
 +
  text-align: center;
 +
  border:none;
 
}
 
}
−
.dropdown:hover .dropdown-content {
+
#b1:hover {
−
   display: flex;
+
   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
−
  flex-direction: column;
+
−
  justify-content: space-around;
+
 
}
 
}
−
.dropdown-content div:hover {
+
#b1:focus {
−
   color: rgb(200,200,200);
+
   outline:0;
 
}
 
}
−
/* Footer styles. */
+
#b1 a:hover {
−
#footer {
+
   text-decoration: none;  
−
   width: calc(100vw);
+
−
  height: 250px;
+
−
  background-color: rgb(30,30,40);
+
−
  color: rgb(210,210,210);
+
−
  display: flex;
+
−
  justify-content: space-around;
+
 
}
 
}
−
.footer-block ul{
+
#spacer {
−
  padding: 0px;
+
−
}
+
−
/* Content Styles */
+
−
#content {
+
 
   width: 100%;
 
   width: 100%;
−
   height: auto;
+
   height: 700px;
−
  display: flex;
+
−
  justify-content: center;
+
−
  z-index: 0;
+
−
}
+
−
#section1 {
+
−
  width: 70%;
+
−
  min-height: 900px;
+
 
}
 
}
 +
 
</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}}

Latest revision as of 22:00, 2 October 2018

TO THE CENTROMERE

TO THE CENTROMERE

WITH VIRUS-LIKE PARTICLES