Difference between revisions of "Team:UrbanTundra Edmonton/Notebook"

 
(17 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
<!--{{UrbanTundra_Edmonton}}-->
+
{{UrbanTundra_Edmonton/Main-CSS}}
−
{{UrbanTundra_Edmonton/ResearchPages}}
+
{{UrbanTundra_Edmonton/Header}}
 +
 
 
<html>
 
<html>
  
−
<head>
+
<div id="ute-services-section">
−
<style>
+
<div class="container">
 +
                    <div class="row">
  
−
*,
 
−
*::before,
 
−
*::after {
 
−
  margin: 0;
 
−
  padding: 0;
 
−
  box-sizing: border-box;
 
−
}
 
  
  
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
<!--NAV LINKS-->
  
−
.intro {
+
   <div class="col-md-3 side-nav">
−
   background: #fff;
+
    <div class="side-nav-container">
−
  padding: 100px 0;
+
      <ul style="list-style-type: none;">
−
}
+
        <li class="side-nav-toplink">TEAM</li>
 +
        <ul class="sublist">
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Our_Story">Our Story</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Team">Team</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Collaborations">Collaborations</a></li>
 +
        </ul>
 +
        <li class="side-nav-toplink">PROJECT</li>
 +
        <ul class="sublist">
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Description">Background</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Overview">Overview</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Design">Gene Design</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Experiments">Experimental</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Proof">Bio Reaction</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Demonstrate">O<sub>2</sub></a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Notebook">Notebook</a></li>
 +
        </ul>
 +
        <li class="side-nav-toplink">PARTS</li>
 +
        <ul class="sublist">
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Parts">BioBrick</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Composite_Part">CLD-</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Part_Collection">Collection</a></li>
 +
        </ul>
 +
        <li  class="side-nav-toplink">SAFETY</li>
 +
        <ul class="sublist">
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Lab_Safety">Lab Safety</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Protocals">Protocols</a></li>
 +
        </ul>
 +
        <li class="side-nav-toplink">ATTRIBUTIONS</li>
 +
        <ul class="sublist">
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Attributions">Support</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/FullCitations">Citations</a></li>
 +
        </ul>
 +
        <li class="side-nav-toplink">HUMAN PRACTICES</li>
 +
        <ul class="sublist">
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Integrated_Practices">Integrated Practices</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/BroaderApplications">Broader Applications</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Engagement">Outreach</a></li>
 +
        </ul>
 +
        <li class="side-nav-toplink">ACHIEVEMENTS</li>
 +
        <ul class="sublist">
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/HP/Silver">Silver</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/HP/Gold">Gold</a></li>
 +
          <li><a href="https://2016.igem.org/Team:UrbanTundra_Edmonton/Awards">Awards</a></li>
 +
        </ul>
 +
      </ul>
 +
    </div>
 +
  </div>
  
−
.container {
+
<!-- THIS IS WHERE THE CONTENT GOES-->
−
  width: 90%;
+
−
  max-width: 1200px;
+
−
  margin: 0 auto;
+
−
  text-align: center;
+
−
}
+
  
 +
<div class="col-md-9 content-area">
 +
<div class="content-container">
 +
<h1>Lab Notebook</h1>
 +
<br>
  
−
 
+
<h3 style:"text-align: center"><a href="https://static.igem.org/mediawiki/2016/b/b8/T--UrbanTundra_Edmonton--JuneNotebook_.pdf" target="_blank">June</a></h3>
−
 
+
<h3 style:"text-align: center"><a href="https://static.igem.org/mediawiki/2016/5/5e/T--UrbanTundra_Edmonton--JulyNotebook_.pdf" target="_blank">July</a></h3>
−
/* TIMELINE
+
<h3 style:"text-align: center"><a href="https://static.igem.org/mediawiki/2016/5/5d/T--UrbanTundra_Edmonton--AugustNotebook_.pdf" target="_blank">August</a></h3>
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
<h3 style:"text-align: center"><a href="https://static.igem.org/mediawiki/2016/e/eb/T--UrbanTundra_Edmonton--SeptemberNotebook_.pdf" target="_blank">September</a></h3>
−
 
+
−
.timeline ul {
+
−
  background: #456990;
+
−
  padding: 50px 0;
+
−
}
+
−
 
+
−
.timeline ul li {
+
−
  list-style-type: none;
+
−
  position: relative;
+
−
  width: 6px;
+
−
  margin: 0 auto;
+
−
  padding-top: 50px;
+
−
  background: #fff;
+
−
}
+
−
 
+
−
.timeline ul li::after {
+
−
  content: '';
+
−
  position: absolute;
+
−
  left: 50%;
+
−
  bottom: 0;
+
−
  transform: translateX(-50%);
+
−
  width: 30px;
+
−
  height: 30px;
+
−
  border-radius: 50%;
+
−
  background: inherit;
+
−
}
+
−
 
+
−
.timeline ul li div {
+
−
  position: relative;
+
−
  bottom: 0;
+
−
  width: 400px;
+
−
  padding: 15px;
+
−
  background: #F45B69;
+
−
}
+
−
 
+
−
.timeline ul li div::before {
+
−
  content: '';
+
−
  position: absolute;
+
−
  bottom: 7px;
+
−
  width: 0;
+
−
  height: 0;
+
−
  border-style: solid;
+
−
}
+
−
 
+
−
.timeline ul li:nth-child(odd) div {
+
−
  left: 45px;
+
−
}
+
−
 
+
−
.timeline ul li:nth-child(odd) div::before {
+
−
  left: -15px;
+
−
  border-width: 8px 16px 8px 0;
+
−
  border-color: transparent #F45B69 transparent transparent;
+
−
}
+
−
 
+
−
.timeline ul li:nth-child(even) div {
+
−
  left: -439px;
+
−
}
+
−
 
+
−
.timeline ul li:nth-child(even) div::before {
+
−
  right: -15px;
+
−
  border-width: 8px 0 8px 16px;
+
−
  border-color: transparent transparent transparent #F45B69;
+
−
}
+
−
 
+
−
time {
+
−
  display: block;
+
−
  font-size: 1.2rem;
+
−
  font-weight: bold;
+
−
  margin-bottom: 8px;
+
−
}
+
−
 
+
−
 
+
−
/* EFFECTS
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
 
+
−
.timeline ul li::after {
+
−
  transition: background .5s ease-in-out;
+
−
}
+
−
 
+
−
.timeline ul li.in-view::after {
+
−
  background: #F45B69;
+
−
}
+
−
 
+
−
.timeline ul li div {
+
−
  visibility: hidden;
+
−
  opacity: 0;
+
−
  transition: all .5s ease-in-out;
+
−
}
+
−
 
+
−
.timeline ul li:nth-child(odd) div {
+
−
  transform: translate3d(200px, 0, 0);
+
−
}
+
−
 
+
−
.timeline ul li:nth-child(even) div {
+
−
  transform: translate3d(-200px, 0, 0);
+
−
}
+
−
 
+
−
.timeline ul li.in-view div {
+
−
  transform: none;
+
−
  visibility: visible;
+
−
  opacity: 1;
+
−
}
+
−
 
+
−
 
+
−
/* GENERAL MEDIA QUERIES
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
 
+
−
@media screen and (max-width: 900px) {
+
−
  .timeline ul li div {
+
−
    width: 250px;
+
−
  }
+
−
  .timeline ul li:nth-child(even) div {
+
−
    left: -289px;
+
−
    /*250+45-6*/
+
−
  }
+
−
}
+
−
 
+
−
@media screen and (max-width: 600px) {
+
−
  .timeline ul li {
+
−
    margin-left: 20px;
+
−
  }
+
−
  .timeline ul li div {
+
−
    width: calc(100vw - 91px);
+
−
  }
+
−
  .timeline ul li:nth-child(even) div {
+
−
    left: 45px;
+
−
  }
+
−
  .timeline ul li:nth-child(even) div::before {
+
−
    left: -15px;
+
−
    border-width: 8px 16px 8px 0;
+
−
    border-color: transparent #F45B69 transparent transparent;
+
−
  }
+
−
}
+
−
 
+
−
</style>
+
−
 
+
−
</head>
+
−
 
+
−
 
+
−
 
+
−
<div class="column full_size">
+
−
 
+
−
 
+
−
<section class="intro">
+
−
  <div class="container">
+
−
    <h1>Vertical Timeline &darr;</h1>
+
−
  </div>
+
−
</section>
+
−
 
+
−
<section class="timeline">
+
−
  <ul>
+
−
    <li>
+
−
      <div>
+
−
        <time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1977</time> Vestibulum porttitor lorem sed pharetra dignissim. Nulla maximus, dui a tristique iaculis, quam dolor convallis enim, non dignissim ligula ipsum a turpis.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>1985</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>2000</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>2005</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
+
−
      </div>
+
−
    </li>
+
−
  </ul>
+
−
</section>
+
−
 
+
 
</div>
 
</div>
−
 
−
<script>
 
−
 
−
(function() {
 
−
 
−
  'use strict';
 
−
 
−
  // define variables
 
−
  var items = document.querySelectorAll(".timeline li");
 
−
 
−
  // check if an element is in viewport
 
−
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
 
−
  function isElementInViewport(el) {
 
−
    var rect = el.getBoundingClientRect();
 
−
    return (
 
−
      rect.top >= 0 &&
 
−
      rect.left >= 0 &&
 
−
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
 
−
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
 
−
    );
 
−
  }
 
−
 
−
  function callbackFunc() {
 
−
    for (var i = 0; i < items.length; i++) {
 
−
      if (isElementInViewport(items[i])) {
 
−
        items[i].classList.add("in-view");
 
−
      }
 
−
    }
 
−
  }
 
−
 
−
  // listen for events
 
−
  window.addEventListener("load", callbackFunc);
 
−
  window.addEventListener("resize", callbackFunc);
 
−
  window.addEventListener("scroll", callbackFunc);
 
−
 
−
})();
 
−
 
−
</script>
 
 
</html>
 
</html>

Latest revision as of 03:32, 2 December 2016


Urban Tundra | Intelligent Innovation