Difference between revisions of "Team:UCSC"

 
(45 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{UCSC-Header}}
 
{{UCSC-Header}}
 +
 
<html>
 
<html>
 +
 
<style>
 
<style>
−
 
−
.pageflow {
 
−
  margin-right: 0px;
 
−
  margin-left: 0px;
 
−
  margin-top:30px;
 
−
  background: honeydew;
 
−
}
 
  
 
h1 {
 
h1 {
Line 23: Line 18:
 
}
 
}
  
−
#page {
 
−
  background: honeydew;
 
−
}
 
  
 
.proj-button {
 
.proj-button {
 
     position: relative;
 
     position: relative;
 
     width: 10%;
 
     width: 10%;
 +
    text-decoration: none !important;
 
}
 
}
  
Line 39: Line 32:
 
   transition: .5s ease;
 
   transition: .5s ease;
 
   backface-visibility: hidden;
 
   backface-visibility: hidden;
 +
  margin: 20px;
 
}
 
}
  
Line 53: Line 47:
  
 
.proj-button:hover .proj-button-image {
 
.proj-button:hover .proj-button-image {
−
   opacity: 0.3;
+
   opacity: 0.2;
 
}
 
}
  
 
.proj-button:hover .proj-button-desc {
 
.proj-button:hover .proj-button-desc {
−
   opacity: 0.6;
+
   opacity: 0.8;
 
}
 
}
  
Line 65: Line 59:
 
   font-size: 20px;
 
   font-size: 20px;
 
   font-family: "Objektiv-mk1" !important;
 
   font-family: "Objektiv-mk1" !important;
−
   font-weight: 600 !important;
+
   font-weight: 400 !important;
 
   padding: 16px 32px;
 
   padding: 16px 32px;
 
}
 
}
  
−
.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: 40px 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 {
+
  h1 {
−
  font-family: 'objektiv-mk1' !important;
+
      font-family: 'objektiv-mk1'; /*!important*/
−
  font-size: 100px;
+
      font-size: 250%; /*!important*/
−
}
+
  }
  
−
.titleimg {
+
  h2 {
−
  vertical-align: middle;
+
      font-family: 'objektiv-mk1'; /*!important*/
−
  width: 100%;
+
      font-size: 20px; /*!important*/
−
}
+
−
 
+
−
.titlebox {
+
−
  margin-left: 200px !important;
+
−
}
+
−
 
+
−
@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) {
+
.overlap-button-text {
 +
background-color: rgba(94, 94, 94, 0.5);
 +
border-radius: 60px;
 +
color: white;
 +
}
  
−
    .titlebox {
+
.proj-button-image {
−
      margin-left: auto !important;
+
opacity: 0.7;
−
    }
+
      display: inline-block;
 +
      width: 30%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
      backface-visibility: hidden;
 +
}
  
−
  .text-container {
+
.desktop-frontpage {
−
    width: 80%;
+
width: 95%;
−
    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 120:
 
       -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: 38%;
 
       height: auto;
 
       height: auto;
 
       transition: .5s ease;
 
       transition: .5s ease;
Line 193: Line 143:
 
   }
 
   }
  
−
  .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;
 +
-webkit-user-drag: none;
 +
-webkit-user-select: none;
 +
-ms-user-select: none;
 +
        background: honeydew;
 +
        width: 96%;
 +
        padding-top: 5px;
 +
}
  
−
  .text-container {
+
.overlap-button-text {
−
    width: 100%;
+
background-color: rgba(94, 94, 94, 0.5);
−
    margin-left: -15px;
+
border-radius: 60px;
−
    margin-right: -15px;
+
color: white;
−
  }
+
font-size: 13px;
−
 
+
}
−
  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="mobile-frontpage">
−
    <div class="row no-gutters justify-content-md-center">
+
<img src="https://static.igem.org/mediawiki/2017/d/dd/UCSC-Frontpage_Mobile.png" style="width: 100%;">
−
      <div class="col-sm-4">
+
</div>
−
        <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>
 +
<h2>Click on an icon below to learn more about our project!</h2>
 
<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="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!


image sources from http://simpleicon.com/dev/light-bulb-10.html
OUR PROJECT
 http://www.clker.com/clipart-398063.html
HUMAN PRACTICES
 http://clipartix.com/hands-clip-art-image-38330/
ATTRIBUTIONS
NOTEBOOK
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