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

(Undo revision 184623 by AchalaR (talk))
(Blanked the page)
 
Line 1: Line 1:
<html>
 
<head>
 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
<title>iGEM-mainpage</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
 
<style>
 
  body { margin:0px; background-color: #fff; max-width: 100%; min-width: 700px; font-family:BernardMT;}
 
  /*------------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-size:16px;
 
line-height: 200%;
 
      min-width: 700px;
 
      margin-bottom:-17px;
 
    }
 
/*--Top Navigation Styling--*/
 
#topnav {
 
  text-align: center;
 
  margin: 0 auto;
 
}
 
#topnav li ul{
 
  position: relative;
 
  display: none;
 
}
 
#topnav li ul li a {display:block !important;}
 
/* -- dropdown container-- */
 
.dropdown {
 
  display: inline-block
 
}
 
/* --Dropdown button-- */
 
 
.dropdown .dropbtn {
 
  font-size: 20px;
 
  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;
 
  }
 
 
 
 
/* --Show the dropdown menu on hover --*/
 
.dropdown:hover .dropdown-content {
 
  display: block;
 
}
 
 
/*-----------Burger Menu Styling-------------*/
 
 
.topnav .burger {
 
  display: none;
 
  float: right;
 
  margin-right: 20px;
 
  z-index: 1;
 
  color: #d9a900;
 
  font-size: 20px;
 
}
 
.topnav .b-dropdown-content {
 
  display: none;
 
  font-size: 16px;
 
  border-radius: 7px;
 
 
}
 
 
 
.burger-content {
 
  display: none;
 
  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;
 
 
}
 
 
.burger-content div, .burger-content a {
 
text-decoration: none;
 
color: #525b65;
 
padding: 6px 8px;
 
text-decoration: none;
 
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;
 
}
 
 
input[type=checkbox]{
 
  display: none;
 
}
 
input[type=checkbox]:checked ~ .burger-content {
 
  display: block;
 
}
 
 
@media screen and (max-width:750px) {
 
  #topnav .dropdown .dropbtn {
 
    display: none;
 
  }
 
  #topnav {
 
    justify-content: center;
 
  }
 
 
  #topnav li.burger {
 
    display: flex;
 
    justify-content: center;
 
    padding-right: 46%;
 
 
  }
 
}
 
/*-------------------------------------------*/
 
 
/*--alignment--*/
 
 
.content {
 
  margin:0 auto;
 
  background-color:#002855;
 
}
 
.contentb {
 
  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;
 
}
 
 
 
.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>
 
<div class="content">
 
  <div class="contentb">
 
  <!-- Page content -->
 
  <div style='padding-top: 50px;'></div>
 
<!--______________UC Davis logo____________-->
 
 
  <div class="logos" style="background-color: #002855;">
 
 
      <a href="http://ucdavis.com">
 
        <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'"
 
        onmouseout="this.src='https://static.igem.org/mediawiki/2018/a/a5/T--UC_Davis--whitelogo.png'
 
        " alt="uc davis logo" style="margin-left: auto;margin-right:auto; width: 50%;" Padding: "0";>
 
      </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>
 
 
  <!--______________iGEM logo____________-->
 
 
 
  <div class="logos" style="background-color: #002855">
 
        <div class="iGEM">
 
    <a href="https://2018.igem.org">
 
    <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";>
 
    </a>
 
  </div>
 
</div>
 
 
 
 
 
 
</div>
 
 
<div style='padding-top: 200px;'></div>
 
 
<!--______________Top Navigation Bar____________-->
 
  <ul class="topnav" id="topnav">
 
 
      <!--______________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>
 
    <!--______________Achievements____________-->
 
    <div class="dropdown">
 
      <button class="dropbtn">ACHIEVEMENTS</button>
 
        <div class="dropdown-content">
 
          <a href="https://2018.igem.org/Team:UC_Davis/Medal_Requirements">Medal Requirements</a>
 
          <a href="#">Awards</a>
 
          </div>
 
    </div>
 
 
 
<!--___________________________________Burger Menu____________________________________________-->
 
<li class="burger"><input type="checkbox" id="b-control"><label for="b-control">&#9776;</label>
 
<div class="burger-content">
 
<div class="b-dropdown"><a href="Project" class="b-dropdown-main">Project</a>
 
<div class="b-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>
 
<div class="b-dropdown"><a href="Practices" class="b-dropdown-main"> Human Practices</a>
 
<div class="b-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>
 
<div class="b-dropdown"><a href="Parts" class="b-dropdown-main">Parts</a>
 
<div class="b-dropdown-content">
 
            <a href="#">Parts Overview</a>
 
            <a href="#">Basic</a>
 
            <a href="#">Composite</a>
 
            <a href="#">Parts Collection</a>
 
</div>
 
</div>
 
        <div class="b-dropdown"><a href="Lab" class="b-dropdown-main">Lab Work</a>
 
<div class="b-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>
 
<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>
 
<!--__________________________________________________________________________________________-->
 
 
  </ul>
 
</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>
 
 
    <div style='padding-top: 30px;'></div>
 
    <div style = 'padding-right: 100PX; padding-left: 100PX; text-indent: 50px;line-height: 25px; font-size: 16px' >
 
      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.
 
 
</div>
 
 
 
 
</div>
 
 
 
 
 
<!--_______CONTENT  Arrow 2______________-->
 
 
<div class="rectangleb">
 
  <!--______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>
 
</html>
 
 
 
{{Template: UC_Davis/footer}}
 

Latest revision as of 21:28, 17 October 2018