Difference between revisions of "Team:Hawaii"

Line 1: Line 1:
−
<html lang="en">
+
<!DOCTYPE html>
−
<head>
+
<html>
−
<title>Washington iGEM</title>
+
<title>W3.CSS Template</title>
−
<!--
+
<meta charset="UTF-8">
−
<link href="" type="image/gif" rel="shortcut icon" />
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
-->
+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
<style>
 +
body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
 +
.w3-row-padding img {margin-bottom: 12px}
 +
/* Set the width of the sidebar to 120px */
 +
.w3-sidebar {width: 120px;background: #222;}
 +
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
 +
#main {margin-left: 120px}
 +
/* Remove margins from "page content" on small screens */
 +
@media only screen and (max-width: 600px) {#main {margin-left: 0}}
 +
</style>
 +
<body class="w3-black">
  
−
                <meta name="theme-color" content="#4B2E83">
+
<!-- Icon Bar (Sidebar - hidden on small screens) -->
−
<meta charset="utf-8">
+
<nav class="w3-sidebar w3-bar-block w3-small w3-hide-small w3-center">
 +
  <!-- Avatar image in top left corner -->
 +
  <img src="https://static.igem.org/mediawiki/2018/thumb/f/f3/T--Hawaii--UHSeal.jpg/900px-T--Hawaii--UHSeal.jpg.png" style="width:100%">
 +
  <a href="#" class="w3-bar-item w3-button w3-padding-large w3-black">
 +
    <i class="fa fa-home w3-xxlarge"></i>
 +
    <p>HOME</p>
 +
  </a>
 +
  <a href="#Team" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
 +
    <i class="fa fa-user w3-xxlarge"></i>
 +
    <p>TEAM</p>
 +
  </a>
 +
  <a href="#project" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
 +
    <i class="fa fa-eye w3-xxlarge"></i>
 +
    <p>PROJECT</p>
 +
  </a>
 +
  <a href="#Parts" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
 +
    <i class="fa fa-envelope w3-xxlarge"></i>
 +
    <p>PARTS</p>
 +
  </a>
 +
    <a href="#Safety" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
 +
    <i class="fa fa-user w3-xxlarge"></i>
 +
    <p>SAFETY</p>
 +
  </a>
 +
  </a>
 +
    <a href="#Human Practices" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
 +
    <i class="fa fa-user w3-xxlarge"></i>
 +
    <p>HUMAN PRACTICES</p>
 +
  </a>
 +
    <a href="#Awards" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
 +
    <i class="fa fa-user w3-xxlarge"></i>
 +
    <p>AWARDS</p>
 +
  </a>
 +
    <a href="#Judging Form" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
 +
    <i class="fa fa-user w3-xxlarge"></i>
 +
    <p>JUDGING FORM</p>
 +
</nav>
  
−
<!-- Bootstrap requirements -->
+
<!-- Navbar on small screens (Hidden on medium and large screens) -->
−
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
+
<div class="w3-top w3-hide-large w3-hide-medium" id="myNavbar">
−
  <link href="https://2017.igem.org/Template:Washington/BootstrapCSS?action=raw&ctype=text/css" type="text/css" rel="stylesheet" />
+
  <div class="w3-bar w3-black w3-opacity w3-hover-opacity-off w3-center w3-small">
−
<script src="https://2017.igem.org/Template:Washington/JQuery?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
    <a href="#" class="w3-bar-item w3-button" style="width:25% !important">HOME</a>
−
  <script src="https://2017.igem.org/Template:Washington/Popper?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
    <a href="#about" class="w3-bar-item w3-button" style="width:25% !important">ABOUT</a>
−
  <script src="https://2017.igem.org/Template:Washington/BootstrapJS?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
    <a href="#photos" class="w3-bar-item w3-button" style="width:25% !important">PHOTOS</a>
−
                <script src="https://2017.igem.org/Template:Washington/ChartJS?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
    <a href="#contact" class="w3-bar-item w3-button" style="width:25% !important">CONTACT</a>
 +
  </div>
 +
</div>
  
−
  <!-- Animations -->
+
<!-- Page Content -->
−
  <link href="https://2017.igem.org/Template:Washington/Animate?action=raw&ctype=text/css" type="text/css" rel="stylesheet" />
+
<div class="w3-padding-large" id="main">
 +
  <!-- Header/Home -->
 +
  <header class="w3-container w3-padding-32 w3-center w3-black" id="home">
 +
  <p>WERE NOT OLD, JUST</p>
 +
    <p>RETRO</p>
 +
    <h1 class="w3-jumbo"><span class=>RETRO</span> </h1>
  
 +
    <h1 class="w3-jumbo"><span class="w3-hide-small">RETRO</span> </h1>
 +
    <img src="https://static.igem.org/mediawiki/2018/thumb/4/4f/T--Hawaii--Retro.jpg/806px-T--Hawaii--Retro.jpg.png" width="826" height="923">
 +
  </header>
  
−
  <!-- Team Washington includings -->
+
  <!-- About Section -->
−
<link href="https://2017.igem.org/Template:Washington/GlobalCSS?action=raw&ctype=text/css" type="text/css" rel="stylesheet" />
+
  <div class="w3-content w3-justify w3-text-grey w3-padding-64" id="about">
−
<script src="https://2017.igem.org/Template:Washington/GlobalJS?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
    <h2 class="w3-text-light-grey">Hawaii 2018</h2>
−
 
+
    <hr style="width:200px" class="w3-opacity">
−
</head>
+
    <p>Greetings from the land of actively errupting volcanoes! We are currently working with a family of centromere-specific retrotransposons in Zea mays.
−
</html>
+
    </p>
−
 
+
    <h3 class="w3-padding-16 w3-text-light-grey">The Lab</h3>
−
{{Washington/Includes}}
+
    <div class="w3-row w3-center w3-padding-16 w3-section w3-light-grey">
−
 
+
      <div class="w3-quarter w3-section">
−
<html>
+
        <span class="w3-xlarge">7</span><br>
−
+
        Undergraduate Students
−
<body class="bg-light">
+
      </div>
−
<!-- REQUIRED INITIALIZERS -->
+
      <div class="w3-quarter w3-section">
−
<div class="pageIdentifier" id="Home"></div>
+
        <span class="w3-xlarge">2</span><br>
−
<div class="subPageIdentifier" id="Main"></div>
+
        Graduate Students
−
<div id="customNavbar"></div>
+
      </div>
−
 
+
      <div class="w3-quarter w3-section">
−
<!-- MAIN FRONT PAGE IMAGE -->
+
        <span class="w3-xlarge">2</span><br>
−
<div class="jumbotron jumbotron-fluid mainBodypic vertical-center" id="backgroundImage" style="margin-bottom: 0px; min-width: 200px">
+
        Advisors
−
<div class="patternOverlay gradientColor"></div>
+
      </div>
−
<div class="container-fluid mainBody">
+
      <div class="w3-quarter w3-section">
−
<h1 class="display-1 fadeOnLoad" id="projectTitle" style="font-size: 12vh; margin: 0px; padding: 0px">Viva la Violacein:</h1>
+
        <span class="w3-xlarge">0</span><br>
−
<h2 class="display-4 fadeOnLoad" style="font-size: 7vh; margin: 0px; padding: 0px">a Real-Time Metabolics Tracker</h2>
+
        BioBrick Parts
−
<br /><br />
+
      </div>
−
  <a id="linkToDescription" href="#overview">
+
    </div>
−
  <button type="button" class="fadeOnLoad hvr-sweep-to-right abelFont">Overview</button>
+
−
  </a>
+
−
  </div>
+
−
</div>
+
  
−
<!-- OVERVIEW -->
+
    <button class="w3-button w3-light-grey w3-padding-large w3-section">
−
<div class="jump" id="overview">
+
      <i class="fa fa-download"></i> Download BioBricks Parts List
−
<div class="container-fluid">
+
    </button>
−
<div class="spacer"></div>
+
   
−
<div class="row">
+
  <!-- End About Section -->
−
<div class="container-fluid">
+
  </div>
−
<!-- WE WANT THIS TO BE PROJECT OVERVIEW, NOT PROJECT ABSTRACT -->
+
 
−
<h4 class="display-4 centered">Project Overview</h3>
+
  <!-- Portfolio Section -->
−
<br />
+
  <div class="w3-padding-64 w3-content" id="photos">
 +
    <h2 class="w3-text-light-grey">Lab Photos</h2>
 +
    <hr style="width:200px" class="w3-opacity">
  
−
<div class="container centered">
+
    <!-- Grid for photos -->
−
<p>Synthetic biology can be used to create new, cost-effective, metabolites resulting from metabolic pathways. However, managing cultures containing these metabolic pathways is difficult and time-consuming. Constantly measuring and adjusting culture conditions in order to produce a desired metabolite in a specific quantity is both tedious and labor intensive. Furthermore, modern assays that accomplish this, such as high precision liquid chromatography, can also be prohibitively expensive.</p>
+
    <div class="w3-row-padding" style="margin:0 -16px">
−
<p>Our project aims to reduce the amount of time and effort needed to maintain cultures through real-time, automated analysis of metabolic products in an adjustable turbidostat. This includes the creation of an affordable image analysis system that reads visual data to measure the current state of a culture and then provide feedback to release inducers to alter the expression of the metabolic pathway.</p>
+
      <div class="w3-half">
−
<p>Our project utilizes the violacein pathway as a pigment-based proxy to predict the production of other metabolic pathways. By regulating gene expression within the Violacein gene set with two different inducible promoters, we are able to yield up to four different color outputs. These outputs are measured by an open-sourced Raspberry Pi setup, which captures visual data, calculates feedback based on the culture’s RGB value, and then directs the gradual release of inducer chemicals to maintain or change the culture’s color over time. Therefore, this process allows us to better understand the relationship between gene expression and actual metabolite production rate.</p>
+
        <img src="Watch_Me_Pipette.jpg" style="width:100%">
−
<p>Currently, yeast strains capable of coexpressing both a violacein and a non-visible pathway are being cloned. In addition to this, a machine comprised of 3D-printed syringe pumps, a turbidostat, and image analysis software is in development. By combining biological, software, and hardware systems, we expect our unique design to be able to generate previously unavailable visual data in certain biosynthesis processes, such as those involved in antibiotic production or fermentation.</p>
+
        <img src="Glass_Ware_is_Hot.jpg" style="width:100%">
 +
        <img src="Cool_Beans.jpg" style="width:100%">
 +
      </div>
  
−
<p style="text-align: center">Click on a circle to see more information!</p></div>
+
      <div class="w3-half">
−
<hr />
+
        <img src="Super_Sweet_Image.jpg" style="width:100%">
 +
        <img src="We_Always_Wear_Lab_Coats.jpg" style="width:100%">
 +
        <img src="Fun_Party.jpg" style="width:100%">
 +
        <img src="Sweet_Image.jpg" style="width:100%">
 +
      </div>
 +
    <!-- End photo grid -->
 +
    </div>
 +
  <!-- End Portfolio Section -->
 +
  </div>
  
−
<div class="container-fluid" style="min-width:10px; padding: 20px">
+
  <!-- Contact Section -->
−
  <div class="row justify-content-md-center">
+
  <div class="w3-padding-64 w3-content w3-text-grey" id="contact">
−
  <div class="col-md-auto" style="text-align: center">
+
    <h2 class="w3-text-light-grey">Contact Us</h2>
−
  <div class="col" style="margin: 3px"><div class="engagementContent rounded-circle" style="margin: auto; background-color:white"><a href="/Team:Washington/Wetlab"><span><div class="rounded-circle pictureEngagement" style="background:url('https://static.igem.org/mediawiki/2017/3/35/T--Washington--WetlabTile.jpg') no-repeat; background-position: 48% 50%; background-size: 250px auto" ></div></span></a></div></div>
+
    <hr style="width:200px" class="w3-opacity">
−
<p style="text-align: center"><b>Wet Lab</b><div class="container" style="max-width: 250px">Our wetlab team was responsible for the molecular biology side of our project. They designed and implemented a system for regulation of the violacein pathway in yeast. They also created BioBricks and completed the InterLab measurements.</div><br/></p><br />
+
−
</div>
+
−
<div class="col-md-auto" style="text-align: center">
+
−
  <div class="col" style="margin: 3px"><div class="engagementContent rounded-circle" style="margin: auto; background-color:white"><a href="/Team:Washington/Drylab"><span><div class="rounded-circle pictureEngagement" style="background:url('https://static.igem.org/mediawiki/2017/3/31/T--Washington--DesignDrawing2.png') no-repeat; background-position: 48% 50%; background-size: 250px auto" ></div></span></a></div></div>
+
−
<p style="text-align: center"><b>Dry Lab</b><div class="container" style="max-width: 250px">Our dry lab team built a low-cost modular device with a closed loop control system implemented by a Raspberry Pi to manipulate and analyze the products of cell cultures in real time.</div><br/></p><br />
+
−
</div>
+
−
<div class="col-md-auto" style="text-align: center">
+
−
  <div class="col" style="margin: 3px"><div class="engagementContent rounded-circle" style="margin: auto; background-color:white"><a href="/Team:Washington/Human_Practices"><span><div class="rounded-circle pictureEngagement" style="background:url('https://static.igem.org/mediawiki/2017/6/60/T--Washington--BenFranklinElemen.jpg') no-repeat; background-position: 18% 0%; background-size: 350px auto"></div></span></a></div></div>
+
−
<p style="text-align: center"><b>Human Practices</b><div class="container" style="max-width: 250px">This year, we had the largest team in the history of iGEM at the University of Washington, with a consistent 34 undergraduates working on various aspects of the project. For the first time, this allowed us to seriously incorporate hardware and software development as well as wetlab, and allowed us to do more engagement and human practices work than in previous years.</div><br/></p><br />
+
−
</div>
+
−
<div class="col-md-auto" style="text-align: center">
+
−
  <div class="col" style="margin: 3px"><div class="engagementContent rounded-circle" style="margin: auto; background-color:white"><a href="/Team:Washington/Team"><span><div class="rounded-circle pictureEngagement" style="background:url('https://static.igem.org/mediawiki/2017/4/4c/T--Washington--Logo.png') no-repeat; background-position: 50% 50%; background-size: 220px auto"></div></span></a></div></div>
+
−
<p style="text-align: center"><b>Team</b><div class="container" style="max-width: 250px">Meet the team!</div><br/></p><br />
+
−
</div>
+
−
</div>
+
−
</div>
+
  
−
</div>
+
    <div class="w3-section">
−
</div>
+
      <p><i class="fa fa-map-marker fa-fw w3-text-white w3-xxlarge w3-margin-right"></i> Honolulu, HI</p>
−
</div>
+
      <p><i class="fa fa-phone fa-fw w3-text-white w3-xxlarge w3-margin-right"></i> Phone: 867-5309</p>
−
</div>
+
      <p><i class="fa fa-envelope fa-fw w3-text-white w3-xxlarge w3-margin-right"> </i> Email: iGEMSHawaii@gmail.com</p>
−
</body>
+
    </div><br>
 +
    <p>Let us know about your project:</p>
  
−
<footer>
+
    <form action="/action_page.php" target="_blank">
−
<div id="foot"></div>
+
      <p><input class="w3-input w3-padding-16" type="text" placeholder="Name" required name="Name"></p>
−
</footer>
+
      <p><input class="w3-input w3-padding-16" type="text" placeholder="Email" required name="Email"></p>
 +
      <p><input class="w3-input w3-padding-16" type="text" placeholder="Subject" required name="Subject"></p>
 +
      <p><input class="w3-input w3-padding-16" type="text" placeholder="Message" required name="Message"></p>
 +
      <p>
 +
        <button class="w3-button w3-light-grey w3-padding-large" type="submit">
 +
          <i class="fa fa-paper-plane"></i> SEND MESSAGE
 +
        </button>
 +
      </p>
 +
    </form>
 +
  <!-- End Contact Section -->
 +
  </div>
 +
 
 +
    <!-- Footer -->
 +
  <footer class="w3-content w3-padding-64 w3-text-grey w3-xlarge">
 +
    <i class="fa fa-facebook-official w3-hover-opacity"></i>
 +
    <i class="fa fa-instagram w3-hover-opacity"></i>
 +
    <p class="w3-medium">Powered by <a href="Sweet_Donut_Picture.jpg" target="_blank" class="w3-hover-text-green">Lots of Coffee and Donuts</a></p>
 +
  <!-- End footer -->
 +
  </footer>
  
 +
<!-- END PAGE CONTENT -->
 +
</div>
  
 +
</body>
 
</html>
 
</html>

Revision as of 22:15, 15 May 2018

<!DOCTYPE html> W3.CSS Template

WERE NOT OLD, JUST

RETRO

RETRO

RETRO

Hawaii 2018

Greetings from the land of actively errupting volcanoes! We are currently working with a family of centromere-specific retrotransposons in Zea mays.

The Lab

7
Undergraduate Students
2
Graduate Students
2
Advisors
0
BioBrick Parts

Lab Photos

Contact Us

Honolulu, HI

Phone: 867-5309

Email: iGEMSHawaii@gmail.com


Let us know about your project: