Difference between revisions of "Team:UCSC"

 
(46 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{UCSC-Header}}
 
{{UCSC-Header}}
 +
 
<html>
 
<html>
  
<body>
+
<style>
<div id="page">
+
<center>
+
<br>
+
  
<!--<div class="titlebox">
+
h1 {
    <div class="row no-gutters justify-content-md-center">
+
  font-family: 'objektiv-mk1'!important;
      <div class="col-sm-4">
+
  font-size: 300%; /*!important*/
        <center>
+
  font-weight: 300 !important;
          <img class="buddies" src="https://static.igem.org/mediawiki/2017/f/f9/3synechobuddies.png">
+
     width: 80%;
        </center>
+
}
      </div>
+
      <div class="col-md-6">
+
        <h1>PROJECT DESCRIPTION</h1>
+
      </div>
+
     </div>
+
</div>-->
+
  
<h1>PROJECT DESCRIPTION</h1><br>
+
h2 {
 +
  font-family: 'objektiv-mk1' !important;
 +
  font-size: 200%;
 +
  font-weight: 300;
 +
}
  
<br>
 
<br>
 
  
  <!--<div class="container">
+
.proj-button {
     <p><span class="firstword">We </span>are using the cyanobacteria genus Synechococcus as a model for the FDA-approved Arthrospira platensis, commonly known as Spirulina. By focusing on an edible cyanobacteria, we hope to generate an easily consumable, photosynthetic culture of vitamin or pharmaceutical synthesizers.</p>
+
     position: relative;
<br>
+
    width: 10%;
     <p>Of the three non-opioid pain reducers on the World Health Organization’s (WHO) list of essential medicines, we have decided to pursue acetaminophen, the active ingredient in Tylenol, due to the feasibility of recreating the metabolic pathway in a cyanobacteria. With respect to vitamins, we aim to produce human usable vitamin B12 because it is one of the few vitamins that A. platensis does not adequately produce.</p>
+
     text-decoration: none !important;
  </div>-->
+
}
  
  <div class="text-container">
+
.proj-button-image {
    <p><span class="firstword">Much</span> of the world struggles with inadequate access to essential medicines and nutrition due to high pharmaceutical prices and unreliable distribution. Our solution is to decentralize production of these resources by engineering the edible cyanobacteria, <i>Arthrospira platensis</i> -- also known as Spirulina, to produce essential medicines and nutrition supplements sustainably, photosynthetically, and on-site at pharmacies and healthcare facilities.</p><br><br>
+
  opacity: 1;
 +
  display: inline-block;
 +
  width: 14%;
 +
  height: auto;
 +
  transition: .5s ease;
 +
  backface-visibility: hidden;
 +
  margin: 20px;
 +
}
  
<center><img class="titleimg" src="https://static.igem.org/mediawiki/2017/5/59/Cyanobuddies.png"></center><br><br>
+
.proj-button-desc {
 +
  transition: .5s ease;
 +
  opacity: 0;
 +
  position: absolute;
 +
  top: 100%;
 +
  left: 50%;
 +
  background: transparent;
 +
  transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%)
 +
}
 +
 
 +
.proj-button:hover .proj-button-image {
 +
  opacity: 0.2;
 +
}
 +
 
 +
.proj-button:hover .proj-button-desc {
 +
  opacity: 0.8;
 +
}
 +
 
 +
.overlap-button-text {
 +
  background-color: transparent;
 +
  color: black;
 +
  font-size: 20px;
 +
  font-family: "Objektiv-mk1" !important;
 +
  font-weight: 400 !important;
 +
  padding: 16px 32px;
 +
}
 +
 
 +
.desktop-frontpage {
 +
display: block;
 +
user-drag: none;
 +
user-select: none;
 +
-moz-user-select: none;
 +
-webkit-user-drag: none;
 +
-webkit-user-select: none;
 +
-ms-user-select: none;
 +
        background: honeydew;
 +
        width: 80%;
 +
        padding: 40px 0px;
 +
}
 +
 
 +
.mobile-frontpage {
 +
display: none;
 +
}
 +
 
 +
@media (max-width: 768px) {
 +
 
 +
  h1 {
 +
      font-family: 'objektiv-mk1'; /*!important*/
 +
      font-size: 250%; /*!important*/
 +
  }
 +
 
 +
  h2 {
 +
      font-family: 'objektiv-mk1'; /*!important*/
 +
      font-size: 20px; /*!important*/
 +
  }
 +
 
 +
.overlap-button-text {
 +
background-color: rgba(94, 94, 94, 0.5);
 +
border-radius: 60px;
 +
color: white;
 +
}
 +
 
 +
.proj-button-image {
 +
opacity: 0.7;
 +
      display: inline-block;
 +
      width: 30%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
      backface-visibility: hidden;
 +
}
 +
 
 +
.desktop-frontpage {
 +
width: 95%;
 +
}
 +
 
 +
    .proj-button-desc {
 +
      transition: .5s ease;
 +
      opacity: 1;
 +
      position: absolute;
 +
      top: 100%;
 +
      left: 50%;
 +
      transform: translate(-50%, -50%);
 +
      -ms-transform: translate(-50%, -50%)
 +
  }
 +
}
 +
 
 +
@media (max-width: 576px) {
 +
 
 +
.proj-button-image {
 +
      opacity: 0.7;
 +
      display: inline-block;
 +
      width: 38%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
      backface-visibility: hidden;
 +
    }
 +
 
 +
    .proj-button-desc {
 +
      transition: .5s ease;
 +
      opacity: 1;
 +
      position: absolute;
 +
      top: 100%;
 +
      left: 50%;
 +
      transform: translate(-50%, -50%);
 +
      -ms-transform: translate(-50%, -50%)
 +
  }
 +
 
 +
.desktop-frontpage {
 +
display: none;
 +
}
 +
 
 +
.mobile-frontpage {
 +
display: block;
 +
user-drag: none;
 +
user-select: none;
 +
-moz-user-select: none;
 +
-webkit-user-drag: none;
 +
-webkit-user-select: none;
 +
-ms-user-select: none;
 +
        background: honeydew;
 +
        width: 96%;
 +
        padding-top: 5px;
 +
}
 +
 
 +
.overlap-button-text {
 +
background-color: rgba(94, 94, 94, 0.5);
 +
border-radius: 60px;
 +
color: white;
 +
font-size: 13px;
 +
}
 +
}
 +
 
 +
</style>
 +
  <head>
 +
      <meta name="UCSC IGEM" content="The legendary, UCSC igem Science Superheros">
 +
        <title>Santa Cruz IGEM</title>
 +
  </head>
 +
 
 +
<div class="page">
 +
<center>
 +
<div class="desktop-frontpage">
 +
<img src="https://static.igem.org/mediawiki/2017/e/e6/UCSC-Frontpage.png" style="width: 100%;">
 +
</div>
 +
<center>
  
    <p>Due to insufficient research into the genetics of <i>A. platensis</i>, we are using the metabolically similar <i>Synechococcus elongatus PCC 7942</i> to model two separate engineering endeavors for producing acetaminophen and human-usable vitamin B12. The genes for acetaminophen production, 4ABH and nhoA, and those for B12 production, ssuE and bluB, have been transformed into <i>PCC 7942</i> with the aim of pathway validation and subsequent migration to <i>A. platensis</i>, once a genetic system has been established. In addition, we are performing a whole genome sequencing of <i>A. platensis UTEX 2340</i> to further this organism for research and medical applications.</p>
+
<div class="mobile-frontpage">
    </div>
+
<img src="https://static.igem.org/mediawiki/2017/d/dd/UCSC-Frontpage_Mobile.png" style="width: 100%;">
 +
</div>
  
 
<br>
 
<br>
 +
<h2>Click on an icon below to learn more about our project!</h2>
 
<br>
 
<br>
<br>
 
<br>
 
 
<h2>Click on an icon below to learn more about our project!</h2>
 
  
 
<div class="row">
 
<div class="row">
   <a href="https://2017.igem.org/Team:UCSC/Acetaminophen" class="proj-button">
+
   <!-- <a href="https://2017.igem.org/Team:UCSC/Team" class="proj-button">
       <img src="https://static.igem.org/mediawiki/2017/7/74/Ace_icon.png" class="proj-button-image">
+
       <img src="https://static.igem.org/mediawiki/2017/d/dd/Team-icon.png" class="proj-button-image">
 
       <div class="proj-button-desc">
 
       <div class="proj-button-desc">
         <div class="overlap-button-text">Acetaminophen</div>
+
         <div class="overlap-button-text">TEAM</div>
 
       </div>
 
       </div>
 
   </a>
 
   </a>
 
+
-->
   <a href="https://2017.igem.org/Team:UCSC/B-12" class="proj-button">
+
   <a href="https://2017.igem.org/Team:UCSC/Project" class="proj-button">
       <img src="https://static.igem.org/mediawiki/2017/1/19/B12_icon.png" class="proj-button-image">
+
       <img src="https://static.igem.org/mediawiki/2017/6/64/UCSCproject.png" class="proj-button-image" alt="image sources from http://simpleicon.com/dev/light-bulb-10.html">
 
       <div class="proj-button-desc">
 
       <div class="proj-button-desc">
         <div class="overlap-button-text">Vitamin B-12</div>
+
         <div class="overlap-button-text">OUR PROJECT</div>
 
       </div>
 
       </div>
 
   </a>
 
   </a>
  
   <a href="https://2017.igem.org/Team:UCSC/Model" class="proj-button">
+
   <a href="https://2017.igem.org/Team:UCSC/Human_Practices" class="proj-button">
       <img src="https://static.igem.org/mediawiki/2017/d/d8/Modeling_icon.png" class="proj-button-image">
+
       <img src="https://static.igem.org/mediawiki/2017/7/72/Hp-icon.png" class="proj-button-image" alt="http://www.clker.com/clipart-398063.html">
 
       <div class="proj-button-desc">
 
       <div class="proj-button-desc">
         <div class="overlap-button-text">Modeling</div>
+
         <div class="overlap-button-text">HUMAN PRACTICES</div>
 
       </div>
 
       </div>
 
   </a>
 
   </a>
  
   <a href="https://2017.igem.org/Team:UCSC/Results" class="proj-button">
+
   <a href="https://2017.igem.org/Team:UCSC/Attributions" class="proj-button">
       <img src="https://static.igem.org/mediawiki/2017/e/e6/Results_icon.png" class="proj-button-image">
+
       <img src="https://static.igem.org/mediawiki/2017/7/77/Attributionsicon.png" class="proj-button-image" alt="http://clipartix.com/hands-clip-art-image-38330/">
 
       <div class="proj-button-desc">
 
       <div class="proj-button-desc">
         <div class="overlap-button-text">Results</div>
+
         <div class="overlap-button-text">ATTRIBUTIONS</div>
 +
      </div>
 +
  </a>
 +
 
 +
  <a href="https://2017.igem.org/Team:UCSC/Notebook" class="proj-button">
 +
      <img src="https://static.igem.org/mediawiki/2017/c/cc/Labnotebook.png" class="proj-button-image">
 +
      <div class="proj-button-desc">
 +
        <div class="overlap-button-text">NOTEBOOK</div>
 
       </div>
 
       </div>
 
   </a>
 
   </a>
  
   <a href="https://2017.igem.org/Team:UCSC/Parts" class="proj-button">
+
   <a href="https://2017.igem.org/Team:UCSC/Judging" class="proj-button">
       <img src="https://static.igem.org/mediawiki/2017/9/9c/Parts_icon.png" class="proj-button-image">
+
       <img src="https://static.igem.org/mediawiki/2017/1/1e/Medals_Transparent.png" class="proj-button-image">
 
       <div class="proj-button-desc">
 
       <div class="proj-button-desc">
         <div class="overlap-button-text">Parts</div>
+
         <div class="overlap-button-text">JUDGING</div>
 
       </div>
 
       </div>
 
   </a>
 
   </a>
  
 
</div>
 
</div>
</center>
+
 
</div>
+
</body>
+
 
</html>
 
</html>
 +
 
{{UCSC-Footer}}
 
{{UCSC-Footer}}

Latest revision as of 04:26, 1 November 2017

Santa Cruz IGEM


Click on an icon below to learn more about our project!