Difference between revisions of "Team:UC Davis/AchalaTestPage"

(Undo revision 184623 by AchalaR (talk))
Line 1: Line 1:
−
{{Template: UC_Davis/header}}
+
<html>
−
<html lang="en">
+
 
<head>
 
<head>
−
<title>Meet the Team</title>
+
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
<title>iGEM-mainpage</title>
−
</head>
+
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
−
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
</head>
 
<style>
 
<style>
−
body {
+
  body { margin:0px; background-color: #fff; max-width: 100%; min-width: 700px; font-family:BernardMT;}
−
      background-color: #fff ;
+
  /*------------Get rid of iGEM stuff----------------------------------*/
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 +
  /*-------------------------------------------------------------------*/
 +
 
 +
body {
 +
 
 
       font-family: 'PT Sans', sans-serif;
 
       font-family: 'PT Sans', sans-serif;
−
      color: black;
+
       font-size:16px;
−
       font-size:13px;
+
 
line-height: 200%;
 
line-height: 200%;
−
       min-width: 600px;
+
       min-width: 700px;
−
      margin-top:-7px;
+
 
       margin-bottom:-17px;
 
       margin-bottom:-17px;
 
     }
 
     }
−
/*------------Get rid of iGEM stuff----------------------------------*/
+
/*--Top Navigation Styling--*/
−
#home_logo, #sideMenu { display:none; }
+
#topnav {
−
#sideMenu, #top_title1, .patrollink  {display:none;}
+
  text-align: center;
−
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
  margin: 0 auto;
−
/*-------------------------------------------------------------------*/
+
}
−
#bodyContent a[href ^="https://"], .link-https { padding: 10px;}
+
#topnav li ul{
−
.myButton {background-color:#d9a900 !important;  color:#fff;}
+
  position: relative;
 +
  display: none;
 +
}
 +
#topnav li ul li a {display:block !important;}
 +
/* -- dropdown container-- */
 +
.dropdown {
 +
  display: inline-block
 +
}
 +
/* --Dropdown button-- */
  
−
html {
+
.dropdown .dropbtn {
−
box-sizing: border-box;
+
  font-size: 20px;
−
text-align:center;
+
  border: none;
 +
  outline: none;
 +
  color: white;
 +
  padding: 14px 16px;
 +
  background-color: inherit;
 +
  font-family: inherit;
 +
  margin: 0;
 +
}
 +
 
 +
/*-- Dropdown content (hidden by default) --*/
 +
.dropdown-content {
 +
  display: none;
 +
  position: absolute;
 +
  background-color: #eff1f2;
 +
  min-width: 200px;
 +
  border-radius: 7px;
 +
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
  z-index: 1;
  
 
}
 
}
  
 +
/*-- Links inside the dropdown-- */
 +
.dropdown-content a {
 +
  float: none;
 +
  color: black;
 +
  padding: 12px 16px;
 +
  text-decoration: none;
 +
  display: block;
 +
  text-align:left;
 +
  font-size: 16px;
 +
}
 +
.dropdown-content a:hover {
 +
    color:#48fb47;
 +
  }
  
−
.column1 {
+
 
−
float: left;
+
 
−
/*width: 20%;*/
+
/* --Show the dropdown menu on hover --*/
−
margin-bottom: 18px;
+
.dropdown:hover .dropdown-content {
−
padding: 0 8px;
+
  display: block;
−
display: table-cell;
+
−
height: 70%;
+
 
}
 
}
  
−
.card {
+
/*-----------Burger Menu Styling-------------*/
−
height: 90%;
+
 
−
float: right;
+
.topnav .burger {
−
padding-right: 7%; padding-left: 7%; padding-bottom: 10%;
+
  display: none;
−
margin-bottom: 10px;
+
  float: right;
 +
  margin-right: 20px;
 +
  z-index: 1;
 +
  color: #d9a900;
 +
  font-size: 20px;
 
}
 
}
−
.card img{
+
.topnav .b-dropdown-content {
−
   border-radius: 50%;
+
   display: none;
−
        border-color: #d9a900;
+
  font-size: 16px;
−
        border-style: solid;
+
  border-radius: 7px;
−
        border-width: 3px;
+
 
−
 
+
 
}
 
}
  
−
.container1 {
+
 
−
padding: 0 16px;
+
.burger-content {
−
display: table-cell;
+
  display: none;
−
padding-top: 50px;
+
  position: absolute;
 +
  background-color: #f9f9f9;
 +
  border-radius: 7px;
 +
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 +
  z-index: 1;
 +
  width: 200px;
 +
  margin-top: 40px;
 +
  Float: none;
  
 
}
 
}
  
−
.title1 {
+
.burger-content div, .burger-content a {
−
color: grey;
+
text-decoration: none;
−
padding-top: 0;
+
color: #525b65;
−
margin: 0;
+
padding: 6px 8px;
−
text-align: center;
+
text-decoration: none;
−
margin-bottom: 10px;
+
display: block;
 +
text-align: left;
 +
font-weight: bold;
 +
overflow: hidden;
 +
}
 +
#topnav .b-dropdown:hover .b-dropdown-content {
 +
  display: inline-block;
 +
}
 +
#topnav .b-dropdown-content a:hover {
 +
  color: #48fb47;
 +
}
 +
#topnav .b-dropdown-content {
 +
  display: none;
 +
  position: absolute;
 +
  background-color: #f9f9f9;
 +
  min-width: 150px;
 +
  margin-top: -50px;
 +
  margin-left: 200px;
 +
  z-index: 1;
 
}
 
}
  
−
.info {
+
input[type=checkbox]{
−
width: 40%;
+
  display: none;
 
}
 
}
−
.myButton {
+
input[type=checkbox]:checked ~ .burger-content {
−
text-align: center;
+
  display: block;
−
-moz-box-shadow: 0px 1px 0px 0px #fff6af;
+
−
-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
+
−
box-shadow: 0px 1px 0px 0px #fff6af;
+
−
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
+
−
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
+
−
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
+
−
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
+
−
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
+
−
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
+
−
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
+
−
background-color:#ffec64;
+
−
-moz-border-radius:7px;
+
−
-webkit-border-radius:7px;
+
−
border-radius:7px;
+
−
border:1px solid #d9aa00;
+
−
display:inline-block;
+
−
cursor:pointer;
+
−
color:#fff;
+
−
font-family:'proxima-nova';
+
−
font-size:14px;
+
−
font-weight:bold;
+
−
padding:11px 76px;
+
−
text-decoration:none;
+
−
text-shadow:0px 1px 0px #ffee66;
+
 
}
 
}
−
.myButton:hover {
+
 
−
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
+
@media screen and (max-width:750px) {
−
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
+
  #topnav .dropdown .dropbtn {
−
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
+
    display: none;
−
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
+
  }
−
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
+
  #topnav {
−
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
+
    justify-content: center;
−
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
+
  }
−
background-color:#ffab23;
+
 
 +
  #topnav li.burger {
 +
    display: flex;
 +
    justify-content: center;
 +
    padding-right: 46%;
 +
 
 +
  }
 
}
 
}
−
.myButton:active {
+
/*-------------------------------------------*/
−
position:relative;
+
 
−
top:1px;
+
/*--alignment--*/
 +
 
 +
.content {
 +
  margin:0 auto;
 +
  background-color:#002855;
 
}
 
}
−
.myButton:visited {
+
.contentb {
−
   color: #ffffff00;
+
   margin:0% auto;
 +
  background-color:#002855;
 +
  white-space: nowrap ;
 +
  overflow: hidden;
 +
  width: 100%;
 +
}
 +
.logos {
 +
width: 33%;
 +
vertical-align: middle;
 +
  display: inline-block;
 +
}
 +
.logos img {
 +
text-align: center;
 +
display: table-cell;
 +
vertical-align: middle;
 +
width: 0 auto;
 
}
 
}
−
.mySlides {display:none;
 
−
padding-left:15%;padding-right:15%;
 
−
width:100%;
 
−
max-height: 70%}
 
  
  
−
</style>
+
.Cenozoic img:hover{
 +
  box-shadow: 0px 0px 50px green;
 +
  border-radius: 50%;
 +
  -webkit-transition: all 10ms cubic-bezier(0.980, 0.960, 0.975, 0.980);
 +
    -moz-transition: all 10ms cubic-bezier(0.980, 0.960, 0.975, 0.980);
 +
      -o-transition: all 10ms cubic-bezier(0.980, 0.960, 0.975, 0.980);
 +
          transition: all 10ms cubic-bezier(0.980, 0.960, 0.975, 0.980); /* custom */
  
 +
  -webkit-transition-timing-function: cubic-bezier(0.980, 0.960, 0.975, 0.980);
 +
    -moz-transition-timing-function: cubic-bezier(0.980, 0.960, 0.975, 0.980);
 +
      -o-transition-timing-function: cubic-bezier(0.980, 0.960, 0.975, 0.980);
 +
          transition-timing-function: cubic-bezier(0.980, 0.960, 0.975, 0.980); /* custom */
 +
 +
}
 +
 +
/*------------------------Shapes-------------------------------------------*/
 +
.rectangleb{
 +
height: 700px;
 +
width: 100%;
 +
background-color: #002855;
 +
position:relative;
 +
}
 +
.rectanglew{
 +
height:500px;
 +
width: 100%;
 +
background-color: #fff;
 +
position:relative;
 +
}
 +
 +
.triangleb {
 +
background-color: #002855;
 +
width: 100%;
 +
min-width: 600px;
 +
position: absolute;
 +
margin: 0;
 +
margin-top: -0.5px;
 +
}
 +
 +
.triangleb:after {
 +
content: "";
 +
position: absolute;
 +
  min-width: 600px;
 +
top: 100%;
 +
left: 0;
 +
right: 0;
 +
padding-bottom: 10%;
 +
background-color: #002855;
 +
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
 +
}
 +
 +
.trianglew{
 +
background-color: #fff;
 +
width: 100%;
 +
  min-width: 600px;
 +
position: absolute;
 +
margin: 0;
 +
margin-top: -0.5px;
 +
z-index: -2px;
 +
}
 +
 +
.trianglew:after {
 +
content: "";
 +
position: absolute;
 +
top: 100%;
 +
left: 0;
 +
right: 0;
 +
padding-bottom: 10%;
 +
background-color: #fff;
 +
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
 +
}
 +
.triangleblk{
 +
background-color: #000;
 +
width: 100%;
 +
  min-width: 600px;
 +
position: absolute;
 +
margin: 0;
 +
margin-top: -0.5px;
 +
}
 +
 +
.triangleblk:after {
 +
content: "";
 +
position: absolute;
 +
top: 100%;
 +
left: 0;
 +
right: 0;
 +
padding-bottom: 10%;
 +
background-color: #000;
 +
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
 +
}
 +
.spacer {
 +
height: 10vw;
 +
}
 +
 +
.spacerw {
 +
height: 10vw;
 +
}
 +
.info {
 +
width: 40%;
 +
}
 +
</style>
  
 
<body>
 
<body>
−
<div style='padding-top: 20px;'></div>
+
<div class="content">
−
<center>
+
  <div class="contentb">
−
  <div class="w3-content w3-display-container">
+
  <!-- Page content -->
−
    <img class="mySlides" src="https://static.igem.org/mediawiki/2018/b/bb/T--UC_Davis--Team.jpg" style="width:100%">
+
  <div style='padding-top: 50px;'></div>
−
    <img class="mySlides" src="https://static.igem.org/mediawiki/2018/3/3b/T--UC_Davis--Team1.jpg" style="width:100%">
+
<!--______________UC Davis logo____________-->
  
 +
  <div class="logos" style="background-color: #002855;">
  
−
    <button style = 'margin-left: 15%;margin-right: 15%;' class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
+
      <a href="http://ucdavis.com">
−
    <button style = 'margin-left: 15%;margin-right: 15%'class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
+
        <img src="https://static.igem.org/mediawiki/2018/a/a5/T--UC_Davis--whitelogo.png" onmouseover="this.src='https://static.igem.org/mediawiki/2018/4/45/T--UC_Davis--UCDgreen.jpg'"
−
  </div>
+
        onmouseout="this.src='https://static.igem.org/mediawiki/2018/a/a5/T--UC_Davis--whitelogo.png'
−
<div style = 'padding-left: 10PX; padding-bottom: 20px;padding-top: 20px; font-size: 30px; color: #d9a900' ><b>Meet The Team</b></div>
+
        " alt="uc davis logo" style="margin-left: auto;margin-right:auto; width: 50%;" Padding: "0";>
−
</center>
+
      </a>
 +
   
 +
</div>
 +
  <!--_____________Cenozoic logo_____________-->
  
 +
  <div class="logos" style="background-color: #002855">
 +
      <div class="Cenozoic">
 +
      <a href="https://2018.igem.org/Team:UC_Davis">
 +
      <img src="https://static.igem.org/mediawiki/2018/6/66/T--UC_Davis--Cenozoi_Transp.jpg" onmouseover="this.src='https://static.igem.org/mediawiki/2018/5/5e/T--UC_Davis--Cenozoi_green.jpg'"
 +
onmouseout="this.src='https://static.igem.org/mediawiki/2018/6/66/T--UC_Davis--Cenozoi_Transp.jpg'
 +
" alt="Cenozoic logo" style="width: 80%; margin-left: auto;margin-right: auto;"Padding: "0";>
 +
      </a>
 +
    </div>
 +
    </div>
  
−
<div style='padding-top: 20px;'></div>
+
  <!--______________iGEM logo____________-->
  
  
−
<div class="row">
+
  <div class="logos" style="background-color: #002855">
−
<div class="column1">
+
        <div class="iGEM">
−
  <div class="card">
+
     <a href="https://2018.igem.org">
−
     <div class="info" style = "float:left">
+
    <img src="https://static.igem.org/mediawiki/2018/2/2b/T--UC_Davis--iGEM.png" alt="iGEM logo" style="width: 40%; margin-left: auto;margin-right: auto;" ;Padding: "0";>
−
      <img src="https://static.igem.org/mediawiki/2018/b/b7/T--UC_Davis--Daniel.jpg" onmouseover="this.src='https://static.igem.org/mediawiki/2018/7/72/T--UC_Davis--Daniel_Silly.jpg'"
+
    </a>
−
onmouseout="this.src='https://static.igem.org/mediawiki/2018/b/b7/T--UC_Davis--Daniel.jpg'" alt="Daniel" style="width:250px; height: 250px;">
+
  </div>
−
      <h2 style="padding-top: 5px;
+
</div>
−
      margin: 0;">Daniel Graves</h2>
+
−
      <p class="title1" style='text-align:center '>Genetics and Genomics</p>
+
−
    </div>
+
−
    <div class="container1">
+
−
      <p style="width:100%; height: 40%;">Hi, I am a third year Genetics and Genomics B.Sc. student. I plan on pursuing a PhD in Synthetic Biology after I graduate from UC Davis. Outside of the lab, my interests include writing novels and running marathons. I also enjoy memes.</p>
+
−
        <a style="padding-top: 2px;"  href="https://www.linkedin.com/in/daniel-graves-789811125/" class="myButton">LinkedIn</a>
+
−
    </div>
+
−
  </div>
+
−
</div>
+
  
−
<div class="column1">
+
 
−
  <div class="card">
+
 
−
    <div class="info" style = "float:right;">
+
 
−
      <img src="https://static.igem.org/mediawiki/2018/2/22/T--UC_Davis--Achala.jpg" onmouseover="this.src='https://static.igem.org/mediawiki/2018/4/41/T--UC_Davis--Achala_Silly.jpg'"
+
 
−
onmouseout="this.src='https://static.igem.org/mediawiki/2018/2/22/T--UC_Davis--Achala.jpg'" alt="Achala" style="width:250px; height: 250px;">
+
</div>
−
      <h2 style="padding-top: 5px;
+
 
−
      margin: 0;">Achala Rao</h2>
+
<div style='padding-top: 200px;'></div>
−
      <p class="title1" style='text-align:center '>Biological Systems Engineering</p>
+
 
−
    </div>
+
<!--______________Top Navigation Bar____________-->
−
    <div class="container1">
+
  <ul class="topnav" id="topnav">
−
      <p>Hi! My name is Achala Rao and I am a fourth year Biological systems Engineering major. I aim to pursue a career in pharmaceutical engineering after graduating from UC Davis. In my free time, I enjoy painting, reading and watching Netflix.</p>
+
 
−
        <a style="padding-top: 2px;" href="https://www.linkedin.com/in/achala-rao-20bb60115/" class="myButton">LinkedIn</a>
+
      <!--______________Project____________-->
 +
      <div class="dropdown">
 +
        <button class="dropbtn">PROJECT</button>
 +
          <div class="dropdown-content">
 +
            <a href="https://2018.igem.org/Team:UC_Davis/Design">Design</a>
 +
            <a href="https://2018.igem.org/Team:UC_Davis/Results">Results</a>
 +
            <a href="https://2018.igem.org/Team:UC_Davis/Modeling">Modeling</a>
 +
            <a href="https://2018.igem.org/Team:UC_Davis/InterLab">InterLab</a>
 +
            <a href="https://2018.igem.org/Team:UC_Davis/SupplementalMaterials">Supplementary Material</a>
 +
 
 +
          </div>
 +
      </div>
 +
<!--______________Human Resources____________-->
 +
      <div class="dropdown">
 +
        <button class="dropbtn">HUMAN PRACTICES</button>
 +
          <div class="dropdown-content">
 +
            <a href="https://2018.igem.org/Team:UC_Davis/Human_Practices">Human Practices</a>
 +
            <a href="https://2018.igem.org/Team:UC_Davis/Superfund">Superfund Program</a>
 +
            <a href="https://2018.igem.org/Team:UC_Davis/Education">Education & Outreach</a>
 +
 
 +
          </div>
 +
      </div>
 +
<!--______________Parts____________-->
 +
      <div class="dropdown">
 +
        <button class="dropbtn">PARTS</button>
 +
          <div class="dropdown-content">
 +
            <a href="#">Parts Overview</a>
 +
            <a href="#">Basic</a>
 +
            <a href="#">Composite</a>
 +
            <a href="#">Parts Collection</a>
 +
 
 +
          </div>
 +
      </div>
 +
    <!--______________Lab____________-->
 +
    <div class="dropdown">
 +
      <button class="dropbtn">LAB WORK</button>
 +
        <div class="dropdown-content">
 +
          <a href="#">Experiments</a>
 +
          <a href="https://2018.igem.org/Team:UC_Davis/Notebook">Lab Notebook</a>
 +
          <a href="https://2018.igem.org/Team:UC_Davis/Safety">Safety</a>
 +
 
 +
          </div>
 +
      </div>
 +
    <!--______________Acknowledgements____________-->
 +
    <div class="dropdown">
 +
      <button class="dropbtn">TEAM</button>
 +
          <div class="dropdown-content">
 +
            <a href="https://2018.igem.org/Team:UC_Davis/Team">Meet the Team</a>
 +
            <a href="https://2018.igem.org/Team:UC_Davis/Attributions">Attributions</a>
 +
            <a href="https://2018.igem.org/Team:UC_Davis/Sponsors">Sponsors</a>
 +
          </div>
 
     </div>
 
     </div>
−
  </div>
+
    <!--______________Achievements____________-->
−
</div>
+
    <div class="dropdown">
−
<div class="column1">
+
      <button class="dropbtn">ACHIEVEMENTS</button>
−
  <div class="card">
+
        <div class="dropdown-content">
−
    <div class="info" style = "float:left;">
+
          <a href="https://2018.igem.org/Team:UC_Davis/Medal_Requirements">Medal Requirements</a>
−
      <img src="https://static.igem.org/mediawiki/2018/a/a1/T--UC_Davis--Jolee.jpg"  onmouseover="this.src='https://static.igem.org/mediawiki/2018/b/bc/T--UC_Davis--Jolee_Silly.jpg'"
+
          <a href="#">Awards</a>
−
onmouseout="this.src='https://static.igem.org/mediawiki/2018/a/a1/T--UC_Davis--Jolee.jpg'" alt="Jolee" style="width:250px; height: 250px;">
+
          </div>
−
      <h2 style="padding-top: 5px;
+
    </div>
−
      margin: 0;">Jolee Nieberding-Swanberg</h2>
+
 
−
      <p class="title1" style='text-align:center ' >Biomedical Engineering</p>
+
 
−
    </div>
+
<!--___________________________________Burger Menu____________________________________________-->
−
      <div class="container1">
+
<li class="burger"><input type="checkbox" id="b-control"><label for="b-control">&#9776;</label>
−
      <p>Hello, my name is Jolee Nieberding-Swanberg. I am a sophomore in the College of Letters and Sciences at UC Davis. I am intrigued by stem cell and bacterial cellulose. If I'm not in lab, I’m running half-marathons, reading, or eating Thai food.</p>
+
<div class="burger-content">
−
        <a style="padding-top: 2px;" href="https://www.linkedin.com/in/jolee-ns/" class="myButton">LinkedIn</a>
+
<div class="b-dropdown"><a href="Project" class="b-dropdown-main">Project</a>
−
    </div>
+
<div class="b-dropdown-content">
−
  </div>
+
            <a href="https://2018.igem.org/Team:UC_Davis/Design">Design</a>
−
</div>
+
            <a href="https://2018.igem.org/Team:UC_Davis/Results">Results</a>
−
<div class="column1">
+
            <a href="https://2018.igem.org/Team:UC_Davis/Modeling">Modeling</a>
−
  <div class="card">
+
            <a href="https://2018.igem.org/Team:UC_Davis/InterLab">InterLab</a>
−
    <div class="info" style = "float:right;">
+
            <a href="https://2018.igem.org/Team:UC_Davis/SupplementalMaterials">Supplementary Material</a>
−
      <img src="https://static.igem.org/mediawiki/2018/c/ce/T--UC_Davis--jacob.jpg" onmouseover="this.src='https://static.igem.org/mediawiki/2018/9/91/T--UC_Davis--jacob_silly.jpg'"
+
</div>
−
onmouseout="this.src='https://static.igem.org/mediawiki/2018/c/ce/T--UC_Davis--jacob.jpg'" alt="Jacob" style="width:250px; height: 250px;">
+
</div>
−
      <h2 style="padding-top: 5px;
+
<div class="b-dropdown"><a href="Practices" class="b-dropdown-main"> Human Practices</a>
−
      margin: 0;">Jacob Lang</h2>
+
<div class="b-dropdown-content">
−
      <p class="title1" style='text-align:center '>Biochemistry and Molecular Biology</p>
+
            <a href="https://2018.igem.org/Team:UC_Davis/Human_Practices">Human Practices</a>
−
    </div>
+
            <a href="https://2018.igem.org/Team:UC_Davis/Superfund">Superfund Program</a>
−
    <div class="container1">
+
            <a href="https://2018.igem.org/Team:UC_Davis/Education">Education & Outreach</a>
−
      <p>Hello, my name is Jacob Lang and I am a third year Biochemistry and Molecular Biology B. Sc. student. Once I graduate, I hope to start a biotech company. Outside of school and science, I like to do boxing and playing Fortnite.</p>
+
 
−
        <a style="padding-top: 2px;"  href="https://www.linkedin.com/in/jacob-lang/" class="myButton">LinkedIn</a>
+
</div>
−
    </div>
+
</div>
−
  </div>
+
<div class="b-dropdown"><a href="Parts" class="b-dropdown-main">Parts</a>
−
</div>
+
<div class="b-dropdown-content">
−
<div class="column1">
+
            <a href="#">Parts Overview</a>
−
  <div class="card" style= 'padding-bottom: 1%'>
+
            <a href="#">Basic</a>
−
    <div class="info" style = "float:left;">
+
            <a href="#">Composite</a>
−
      <img src="https://static.igem.org/mediawiki/2018/0/0a/T--UC_Davis--ares.jpg" onmouseover="this.src='https://static.igem.org/mediawiki/2018/d/d2/T--UC_Davis--Ares_Silly.jpg'"
+
            <a href="#">Parts Collection</a>
−
onmouseout="this.src='https://static.igem.org/mediawiki/2018/0/0a/T--UC_Davis--ares.jpg'" alt="Ares" style="width:250px; height: 250px;">
+
</div>
−
      <h2 style="padding-top: 5px;
+
</div>
−
      margin: 0;">Ares Torres</h2>
+
        <div class="b-dropdown"><a href="Lab" class="b-dropdown-main">Lab Work</a>
−
      <p class="title1" style='text-align:center '>Biological Systems Engineering</p>
+
<div class="b-dropdown-content">
−
    </div>
+
            <a href="#">Experiments</a>
−
    <div class="container1">
+
            <a href="https://2018.igem.org/Team:UC_Davis/Notebook">Lab Notebook</a>
−
      <p>Hi, my name is Ares Torres and I am a third-year Biological Systems Engineer B.S. student. I plan on pursuing a career in biotechnology. I am particularly interested in biofuels and composting. I enjoy gardening, badly playing the guitar, and watching anime.</p>
+
            <a href="https://2018.igem.org/Team:UC_Davis/Safety">Safety</a>
−
<a style="padding-top: 2px;" href="https://www.linkedin.com/in/ares-torres-810b90127/" class="myButton">LinkedIn</a>
+
</div>
−
    </div>
+
</div>
 +
<div class="b-dropdown b-Acknowledgements"><a href="Acknowledgements" class="b-dropdown-main">Team</a>
 +
<div class="b-dropdown-content">
 +
<a href="https://2018.igem.org/Team:UC_Davis/Team">Meet the Team</a>
 +
<a href="https://2018.igem.org/Team:UC_Davis/Attributions">Attributions</a>
 +
<a href="https://2018.igem.org/Team:UC_Davis/Sponsors">Sponsors</a>
 +
</div>
 +
</div>
 +
        <div class="b-dropdown"><a href="Parts" class="b-dropdown-main">Achievements</a>
 +
          <div class="b-dropdown-content">
 +
            <a href="https://2018.igem.org/Team:UC_Davis/Medal_Requirements">Medal Requirements</a>
 +
            <a href="#">Awards</a>
 +
          </div>
 +
        </div>
 +
</div>
 +
</span>
 +
</li>
 +
</ul>
 +
<!--__________________________________________________________________________________________-->
  
−
    <div style='padding-top: 250px;'></div>
+
  </ul>
−
  </div>
+
−
</div>
+
 
</div>
 
</div>
  
 +
<!--______Triangle and Spacing______-->
 +
<div class="triangleb"></div>
 +
<div class="spacer"></div>
 +
  <div style='padding-top: 30px;'></div>
 +
<!--_______CONTENT  Arrow 1______________-->
 +
<div class="rectanglew">
 +
  <center>
 +
    <div style = ' padding-right: 100PX; padding-left: 60PX; padding-bottom: 25px;padding-top: 100px; font-size: 25px; color: #d9a900; line-height: 25px'; ><b>Mammalian Cell Biosensor For Environmental Toxicology</b></div>
 +
  </center>
  
−
<script>
+
    <div style='padding-top: 30px;'></div>
−
var slideIndex = 1;
+
    <div style = 'padding-right: 100PX; padding-left: 100PX; text-indent: 50px;line-height: 25px; font-size: 16px' >
−
showDivs(slideIndex);
+
      Our project aims to develop mammalian-based biosensors for use in the context of environmental toxicology. Specifically, out biosensors have been designed to co-opt the mammalian cell’s intrinsic stress response pathways and use these to trigger the production of a fluorescent reporter. We hypothesize that a device reporting on the activation of cell stress pathways will provide more physiologically and health relevant information about the potential toxins present in an environment than bioassays which seek to simply measure compound presence and/or abundance. That is, our bioassay asks not whether a compound is there, but rather whether compounds exists that may pose a health hazard. We leave the identification of the specific hazards to more sensitive and quantitative techniques.
 +
      <br></br>Our biosensors use mammalian-derived promoters of genes known to be activated in response to stress-inducing environmental pollutants. These promoters are coupled to a reporter gene (eGFP) and used in in vitro assays to report on the presence of compounds that elicit cell stress.
  
−
function plusDivs(n) {
+
</div>
−
  showDivs(slideIndex += n);
+
−
}
+
  
−
function showDivs(n) {
+
 
−
   var i;
+
 
−
   var x = document.getElementsByClassName("mySlides");
+
</div>
−
  if (n > x.length) {slideIndex = 1}
+
 
−
   if (n < 1) {slideIndex = x.length}
+
 
−
   for (i = 0; i < x.length; i++) {
+
 
−
    x[i].style.display = "none";
+
 
−
  }
+
<!--_______CONTENT  Arrow 2______________-->
−
  x[slideIndex-1].style.display = "block";
+
 
−
}
+
<div class="rectangleb">
−
</script>
+
   <!--______Triangle and Spacing______-->
 +
   <div class="trianglew"></div>
 +
  <div class="spacerw"></div>
 +
 
 +
  <!-- Page content -->
 +
    <div style='padding-top: 25px;'></div>
 +
      <center>
 +
          <div style = 'padding-left: 10PX; padding-bottom: 20px;padding-top: 20px; font-size: 25px; color: #d9a900'; ><b>Inspiration</b></div>
 +
      </center>
 +
          <div style='padding-top: 30px;'></div>
 +
          <div class="info" style = "float:right;">
 +
            <img src="https://static.igem.org/mediawiki/2018/3/35/T--UC_Davis--Klamath.jpg" style="width:300px; height: 300px;padding-left: 20PX; padding-right:20px;padding-bottom: 20px;padding-top: 5px;">
 +
          </div>
 +
 
 +
 
 +
          <div style = 'padding-right: 100PX; padding-left: 100PX;padding-bottom: 60px; text-indent:50px ;line-height: 25px; color: #fff; font-size: 16px'; >
 +
            Earlier this year, we were really fortunate to visit an indigenous tribe of people who live in Klamath, Ca -  a beautiful city in the coastal regions of northern California.
 +
            <br></br>The tribe have reported unusually elevated rates of cancer and miscarriage incidence, and have indicated they have reason to suspect that the cause may be tied to environmental pollution on their tribal land from local agricultural and forestry corporations. Researchers from UC Davis have been collaborating with the tribe’s scientists and governing council to gather data pertaining to environmental and human health.
 +
          </div>
 +
</div>
 +
<!--______Triangle and Spacing______-->
 +
<div class="triangleb"></div>
 +
 
 +
 
 +
 
 +
 
 +
<!--_______CONTENT  Arrow 3_____________-->
 +
 
 +
<img src="https://static.igem.org/mediawiki/2018/9/93/T--UC_Davis--Plates.jpg" alt="Cenozoic logo" style="margin-left: auto;margin-right: auto; z-index:1;"width="100%"; height="650px"; Padding: "0";>
 +
<!--_______CONTENT  Arrow 4_____________-->
 +
 
 +
<div class="rectangleb">
 +
   <!--______Triangle and Spacing______-->
 +
  <div class="triangleblk" ></div>
 +
   <div class="spacer" ></div>
 +
 
 +
    <div style='padding-top: 40px;'></div>
 +
      <center>
 +
        <div style = 'padding-left: 10PX; padding-bottom: 20px;padding-top: 20px; font-size: 25px; color: #d9a900'; ><b>How does it work?</b></div>
 +
      </center>
 +
        <div style='padding-top: 30px;'></div>
 +
        <div class="info" style = "float:left;">
 +
          <img src="https://static.igem.org/mediawiki/2018/4/43/T--UC_Davis--picFP.jpg" style="width:250px; height: 350px;padding-left: 50PX; padding-right:10px;padding-bottom: 5px;padding-top: 5px;">
 +
        </div>
 +
 
 +
        <div style = 'padding-right: 100PX; padding-left: 100PX;padding-bottom: 60px; text-indent:50px ;line-height: 25px; color: #fff; font-size: 16px'; >
 +
          We reasoned that health impacts from exposure to toxins, particularly low level exposure, elicits a very complex cellular response that involves the change in activity and regulation of many genes simultaneously;
 +
          these are very complex pathways that we still have a lot to learn about, but we imagine that they are similar to intricate built in sensors of health that are very hard to engineer ourselves. So we took advantage of that.
 +
          the basic premise of our project is that we are taking advantage of what mammalian cells offer as a chassis and then we engineered them to tell us the stress they are experiencing in a way that we can quantify.
 +
 
 +
<br></br>The specific promoters we have identified for our project control the expression of the following genes: Metallothionein 1, Metallothionein 2, Fibroblast growth factor(FGF21), and the Growth arrest and DNA Damage(GADD45a and GADD153). The representative environmental toxins that we plan to stimulate our engineered cells with include: 2,4-Dichlorophenoxyacetic acid, Warfarin, Metam Sodium, and Copper Sulfate. We are also using Hydrogen Peroxide as a positive control.
 +
        </div>
 +
 
 +
</div>
 +
<div class="rectanglew">
 +
<div class="triangleb"></div>
 +
<div class="spacer"></div>
 +
 
 +
    <div style='padding-top: 30px;'></div>
 +
        <center>
 +
          <div style = 'padding-left: 10PX; padding-bottom: 20px;padding-top: 20px; font-size: 25px; color: #d9a900'; ><b>Future</b></div>
 +
        </center>
 +
          <div style='padding-top: 20px;'></div>
 +
<center>
 +
          <div class="info" style = "float:right;">
 +
            <img src="https://static.igem.org/mediawiki/2018/6/6d/T--UC_Davis--filler1.png" style="width:300px; height: 200px;padding-left: 0%; padding-right:7%;padding-bottom: 20px;padding-top: 5px;">
 +
          </div>
 +
</center>
 +
          <div style = 'padding-right: 100PX; padding-left: 100PX; text-indent: 50px;line-height: 25px; font-size: 16px' >
 +
          A possible extension of our research would be to determine the effect of multiple chemicals of concern(COCs) on the physiological health of mammalian cells. This would be of value in assessing and creating sane standards for pollution, as organisms in the natural environment are exposed to a variety of COCs at once, which may not have been previously screened in conjunction with each other. A possible finding from this might be that COC “A,” at a concentration below what is currently considered to be harmful, in the presence of COC “B,” also at a concentration below what is currently considered to be harmful, interact together to trigger a response associated with stress in mammalian cells.
 +
          </div>
 +
    <div style='padding-top: 30px;'></div>
 +
</div>
 
</body>
 
</body>
 
</html>
 
</html>
 +
 +
 
{{Template: UC_Davis/footer}}
 
{{Template: UC_Davis/footer}}

Revision as of 06:45, 1 October 2018

iGEM-mainpage

uc davis logo
Cenozoic logo
iGEM logo
Mammalian Cell Biosensor For Environmental Toxicology
Our project aims to develop mammalian-based biosensors for use in the context of environmental toxicology. Specifically, out biosensors have been designed to co-opt the mammalian cell’s intrinsic stress response pathways and use these to trigger the production of a fluorescent reporter. We hypothesize that a device reporting on the activation of cell stress pathways will provide more physiologically and health relevant information about the potential toxins present in an environment than bioassays which seek to simply measure compound presence and/or abundance. That is, our bioassay asks not whether a compound is there, but rather whether compounds exists that may pose a health hazard. We leave the identification of the specific hazards to more sensitive and quantitative techniques.

Our biosensors use mammalian-derived promoters of genes known to be activated in response to stress-inducing environmental pollutants. These promoters are coupled to a reporter gene (eGFP) and used in in vitro assays to report on the presence of compounds that elicit cell stress.
Inspiration
Earlier this year, we were really fortunate to visit an indigenous tribe of people who live in Klamath, Ca - a beautiful city in the coastal regions of northern California.

The tribe have reported unusually elevated rates of cancer and miscarriage incidence, and have indicated they have reason to suspect that the cause may be tied to environmental pollution on their tribal land from local agricultural and forestry corporations. Researchers from UC Davis have been collaborating with the tribe’s scientists and governing council to gather data pertaining to environmental and human health.
Cenozoic logo
How does it work?
We reasoned that health impacts from exposure to toxins, particularly low level exposure, elicits a very complex cellular response that involves the change in activity and regulation of many genes simultaneously; these are very complex pathways that we still have a lot to learn about, but we imagine that they are similar to intricate built in sensors of health that are very hard to engineer ourselves. So we took advantage of that. the basic premise of our project is that we are taking advantage of what mammalian cells offer as a chassis and then we engineered them to tell us the stress they are experiencing in a way that we can quantify.

The specific promoters we have identified for our project control the expression of the following genes: Metallothionein 1, Metallothionein 2, Fibroblast growth factor(FGF21), and the Growth arrest and DNA Damage(GADD45a and GADD153). The representative environmental toxins that we plan to stimulate our engineered cells with include: 2,4-Dichlorophenoxyacetic acid, Warfarin, Metam Sodium, and Copper Sulfate. We are also using Hydrogen Peroxide as a positive control.
Future
A possible extension of our research would be to determine the effect of multiple chemicals of concern(COCs) on the physiological health of mammalian cells. This would be of value in assessing and creating sane standards for pollution, as organisms in the natural environment are exposed to a variety of COCs at once, which may not have been previously screened in conjunction with each other. A possible finding from this might be that COC “A,” at a concentration below what is currently considered to be harmful, in the presence of COC “B,” also at a concentration below what is currently considered to be harmful, interact together to trigger a response associated with stress in mammalian cells.


iGEM-Footer

Contact

530-752-1139

2240 Academic Surge
Davis,Ca 95616

UC Davis iGEM 2018