Difference between revisions of "Team:UCSC"

Line 1: Line 1:
 
{{UCSC-Header}}
 
{{UCSC-Header}}
 +
 
<html>
 
<html>
−
<style>
 
  
−
.pageflow {
+
<style type="overlap-button-text/css">
−
  margin-right: 0px;
+
−
  margin-left: 0px;
+
−
  margin-top:30px;
+
−
  background: honeydew;
+
−
}
+
  
−
h1 {
 
−
  font-family: 'objektiv-mk1'!important;
 
−
  font-size: 300%; /*!important*/
 
−
  font-weight: 300 !important;
 
−
    width: 80%;
 
−
}
 
−
 
−
h2 {
 
−
  font-family: 'objektiv-mk1' !important;
 
−
  font-size: 200%;
 
−
  font-weight: 300;
 
−
}
 
−
 
−
#page {
 
−
  background: honeydew;
 
−
}
 
  
 
.proj-button {
 
.proj-button {
Line 39: Line 18:
 
   transition: .5s ease;
 
   transition: .5s ease;
 
   backface-visibility: hidden;
 
   backface-visibility: hidden;
 +
  margin: 20px;
 
}
 
}
  
Line 69: Line 49:
 
}
 
}
  
−
.pagagraph {
+
.desktop-frontpage {
−
  font-family: 'objektiv-mk1' !important;
+
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: 50px 0px;
 +
}
  
−
}
+
.mobile-frontpage {
 +
display: none;
 +
}
  
−
p {
+
@media (max-width: 768px) {
−
  font-family: 'objektiv-mk1' !important;
+
−
  /*margin-left: 200px !important;
+
−
  margin-right: 200px !important;*/
+
−
  /*width: 70%;*/
+
−
  font-size: large !important;
+
−
}
+
  
−
.firstword {
+
.overlap-button-text {
−
  font-family: 'objektiv-mk1' !important;
+
background-color: rgba(94, 94, 94, 0.5);
−
  font-size: 100px;
+
border-radius: 60px;
−
}
+
color: white;
 +
}
  
−
.titleimg {
+
.proj-button-image {
−
  vertical-align: middle;
+
opacity: 0.7;
−
  width: 100%;
+
      display: inline-block;
−
}
+
      width: 30%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
      backface-visibility: hidden;
 +
}
  
−
.titlebox {
+
.desktop-frontpage {
−
  margin-left: 200px !important;
+
width: 95%;
−
}
+
}
−
 
+
−
@media (min-width: 1144px) {
+
−
  .container {
+
−
    width: 70% !important;
+
−
  }
+
−
  .text-container {
+
−
    width: 60%;
+
−
    padding-left: 15px;
+
−
    padding-right: 15px;
+
−
  }
+
−
  .titlebox {
+
−
    width: 80%;
+
−
  }
+
−
  figcaption {
+
−
    font-size: 16px;
+
−
  }
+
−
}
+
−
 
+
−
@media (max-width: 1144px) {
+
−
 
+
−
    .titlebox {
+
−
      margin-left: auto !important;
+
−
    }
+
−
 
+
−
  .text-container {
+
−
    width: 80%;
+
−
    padding-left: 15px;
+
−
    padding-right: 15px;
+
−
  }
+
−
 
+
−
  p {
+
−
    font-family: 'objektiv-mk1' !important;
+
−
    margin-left: 20px !important;
+
−
    margin-right: 20px !important;
+
−
    font-size: medium !important;
+
−
  }
+
−
}
+
−
 
+
−
@media (max-width: 768px) {
+
−
  .proj-button-image {
+
−
      opacity: 1;
+
−
      display: inline-block;
+
−
      width: 40%;
+
−
      height: auto;
+
−
      transition: .5s ease;
+
−
      backface-visibility: hidden;
+
−
    }
+
  
 
     .proj-button-desc {
 
     .proj-button-desc {
Line 152: Line 96:
 
       -ms-transform: translate(-50%, -50%)
 
       -ms-transform: translate(-50%, -50%)
 
   }
 
   }
 +
}
  
−
  h1 {
+
@media (max-width: 576px) {
−
      font-family: 'objektiv-mk1'; /*!important*/
+
−
      font-size: 250%; /*!important*/
+
−
  }
+
  
−
  h2 {
+
.proj-button-image {
−
      font-family: 'objektiv-mk1'; /*!important*/
+
       opacity: 0.7;
−
      font-size: 20px; /*!important*/
+
−
  }
+
−
 
+
−
  .text-container {
+
−
    width: 80%;
+
−
  }
+
−
 
+
−
/*  p {
+
−
    margin-left: 10px !important;
+
−
    margin-right: 10px !important;
+
−
  }
+
−
}*/
+
−
 
+
−
@media (max-width: 576px) {
+
−
  .proj-button-image {
+
−
       opacity: 1;
+
 
       display: inline-block;
 
       display: inline-block;
−
       width: 60%;
+
       width: 50%;
 
       height: auto;
 
       height: auto;
 
       transition: .5s ease;
 
       transition: .5s ease;
Line 193: Line 119:
 
   }
 
   }
  
−
  .firstword {
+
.desktop-frontpage {
−
    font-family: 'objektiv-mk1' !important;
+
display: none;
−
    font-size: 70px;
+
}
−
  }
+
  
−
  .titleimg {
+
.mobile-frontpage {
−
    vertical-align: middle;
+
display: block;
−
    width: 90%;
+
user-drag: none;  
−
  }
+
user-select: none;
−
 
+
-moz-user-select: none;
−
  .text-container {
+
-webkit-user-drag: none;
−
    width: 100%;
+
-webkit-user-select: none;
−
    margin-left: -15px;
+
-ms-user-select: none;
−
    margin-right: -15px;
+
        background: honeydew;
−
  }
+
        width: 100%;
−
 
+
        padding-top: 0px;
−
  p {
+
}
−
    font-family: 'objektiv-mk1' !important;
+
−
    margin-left: 10px !important;
+
−
    margin-right: 10px !important;
+
−
    font-size: small !important;
+
−
  }
+
 
}
 
}
−
 
  
 
</style>
 
</style>
 +
  <head>
 +
      <meta name="UCSC IGEM" content="The legendary, UCSC igem Science Superheros">
 +
        <title>Santa Cruz IGEM</title>
 +
  </head>
  
−
<body>
+
<div class="page">
−
<div id="page">
+
<center>
 +
<div class="desktop-frontpage">
 +
<img src="https://static.igem.org/mediawiki/2017/e/e6/UCSC-Frontpage.png" style="width: 100%;">
 +
</div>
 
<center>
 
<center>
−
<br>
 
−
 
−
<!--<div class="titlebox">
 
−
    <div class="row no-gutters justify-content-md-center">
 
−
      <div class="col-sm-4">
 
−
        <center>
 
−
          <img class="buddies" src="https://static.igem.org/mediawiki/2017/f/f9/3synechobuddies.png">
 
−
        </center>
 
−
      </div>
 
−
      <div class="col-md-6">
 
−
        <h1>PROJECT DESCRIPTION</h1>
 
−
      </div>
 
−
    </div>
 
−
</div>-->
 
−
 
−
<h1>PROJECT DESCRIPTION</h1><br>
 
−
 
−
<br>
 
−
<br>
 
−
 
−
  <!--<div class="container">
 
−
    <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>
 
−
<br>
 
−
    <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>
 
−
  </div>-->
 
−
 
−
  <div class="text-container">
 
−
    <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>
 
−
 
−
<center><img class="titleimg" src="https://static.igem.org/mediawiki/2017/5/59/Cyanobuddies.png"></center><br><br>
 
−
 
−
    <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>
 
−
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
  
−
<h2>Click on an icon below to learn more about our project!</h2>
+
<div class="mobile-frontpage">
 +
<img src="https://static.igem.org/mediawiki/2017/c/cb/Mobile_frontpage.png" style="width: 100%;">
 +
</div>
  
 
<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/Team1" 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/0/0b/Cyano_button_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">Meet The 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/0/0b/Cyano_button_icon.png" class="proj-button-image">
 
       <div class="proj-button-desc">
 
       <div class="proj-button-desc">
−
         <div class="overlap-button-text">Vitamin B-12</div>
+
         <div class="overlap-button-text">The 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/Integrated-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/0/0b/Cyano_button_icon.png" class="proj-button-image">
 
       <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/Judging" 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/2/2d/Medal_button.png" class="proj-button-image">
 
       <div class="proj-button-desc">
 
       <div class="proj-button-desc">
−
         <div class="overlap-button-text">Results</div>
+
         <div class="overlap-button-text">Judging</div>
 
       </div>
 
       </div>
 
   </a>
 
   </a>
  
−
  <a href="https://2017.igem.org/Team:UCSC/Parts" class="proj-button">
+
</div>
−
      <img src="https://static.igem.org/mediawiki/2017/9/9c/Parts_icon.png" class="proj-button-image">
+
−
      <div class="proj-button-desc">
+
−
        <div class="overlap-button-text">Parts</div>
+
−
      </div>
+
−
  </a>
+
  
−
</div>
 
−
</center>
 
−
</div>
 
−
</body>
 
 
</html>
 
</html>
 +
 
{{UCSC-Footer}}
 
{{UCSC-Footer}}

Revision as of 22:33, 16 October 2017

Santa Cruz IGEM

Meet The Team
The Project
Human Practices
Judging

S P O N S O R S
S O C I A L
C O N T A C T
Jack Baskin School of Engineering
University of California, Santa Cruz
1156 High Street
Santa Cruz, California, 95064