Difference between revisions of "Team:UCSC"

 
(402 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{UCSC-Header}}
  
 
<html>
 
<html>
 +
 
<style>
 
<style>
  
 +
h1 {
 +
  font-family: 'objektiv-mk1'!important;
 +
  font-size: 300%; /*!important*/
 +
  font-weight: 300 !important;
 +
    width: 80%;
 +
}
  
−
#sideMenu, #top_title {display:none;}
+
h2 {
−
#content { padding:0px; width:90%; margin-top:-7px; margin-left:5%;, margin-right: 5%}
+
  font-family: 'objektiv-mk1' !important;
−
body {background-color:white; }
+
  font-size: 200%;
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  font-weight: 300;
 +
}
  
  
−
#page {
+
.proj-button {
−
width : 80%;  
+
    position: relative;
−
height : 1000px;
+
    width: 10%;
−
                    margin-left : 10%;
+
    text-decoration: none !important;
−
}
+
}
  
−
nav li a {
+
.proj-button-image {
−
display: block; padding: 15px 25px;
+
  opacity: 1;
−
color: #e6b800 !important; text-decoration: none;
+
  display: inline-block;
−
     
+
  width: 14%;
−
}
+
  height: auto;
−
nav ul li:hover > ul {
+
  transition: .5s ease;
−
display: block;
+
  backface-visibility: hidden;
 +
  margin: 20px;
 +
}
  
−
}
+
.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%)
 +
}
  
−
.layout {
+
.proj-button:hover .proj-button-image {
−
display : inline-block;
+
  opacity: 0.2;
−
width : 100%;
+
−
height : 100%;
+
−
z-index : 90;
+
−
vertical-align : middle;
+
−
line-height : 300px;
+
−
text-align : center;
+
−
display: flex;
+
−
justify-content: center;
+
−
align-items: center;
+
−
-webkit-display: flex;
+
−
-webkit-justify-content: center;
+
−
-webkit-align-items: center;
+
−
                        vertical-align : middle;
+
−
}
+
−
 
+
−
.leadingQuestions { /* Projects */
+
−
                     
+
−
                        width : 100%;  
+
−
height : 300px;
+
−
                        background-color: yellow;
+
−
                        float:left;
+
−
 
+
 
}
 
}
  
−
.boxAll {
+
.proj-button:hover .proj-button-desc {
−
clear: both;
+
  opacity: 0.8;
−
width: 100%
+
−
 
+
−
 
+
−
height: 10px;
+
 
}
 
}
  
−
 
+
.overlap-button-text {
−
.headerbox { /* Main */
+
  background-color: transparent;
−
                        float:right;
+
  color: black;
−
                        width : 100%;
+
  font-size: 20px;
−
                        height : 300px;
+
  font-family: "Objektiv-mk1" !important;
−
                        border-radius: 8px;
+
  font-weight: 400 !important;
−
                 
+
  padding: 16px 32px;
−
                        margin-top: 5px;
+
−
                        background-color: red;
+
−
                    background-size:contain;
+
−
                        background-position:center;
+
−
                      background-position: 50% 50%;
+
−
display: inline
+
−
 
+
−
clear: both;
+
−
                 
+
−
 
+
 
}
 
}
  
 +
.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;
 +
}
  
−
.box2 { /* Projects */
+
@media (max-width: 768px) {
−
                     
+
−
                        width : 50%;
+
−
height : 360px;
+
−
                      /* background-color: red;*/
+
−
                        float:left;
+
−
 
+
−
}
+
−
.infobox {
+
−
width : 50px;
+
−
height : 100%
+
−
                        background-color: yellow;
+
−
                     
+
−
}
+
−
.mainLinks { /* Main */
+
−
                        float:left;
+
−
                        width : 30%;
+
−
height : 150px;
+
−
                        border-radius: 8px;
+
−
                        margin-left: 1.53%;
+
−
                        margin-right: 1.53%;
+
−
                        margin-top: 20px;
+
−
                       
+
−
opacity:0.65;
+
−
                        float:left;
+
−
                            text-align:center;
+
−
                          font-size:26px;
+
−
                    background-size:contain;
+
−
                        background-position:center;
+
−
                      background-position: 50% 50%;
+
−
background-repeat: no-repeat;
+
−
}
+
  
−
.mainLinks:hover{
+
  h1 {
 +
      font-family: 'objektiv-mk1'; /*!important*/
 +
      font-size: 250%; /*!important*/
 +
  }
  
−
opacity:1.0;
+
  h2 {
−
+
      font-family: 'objektiv-mk1'; /*!important*/
−
    filter: alpha(opacity=80);
+
      font-size: 20px; /*!important*/
 +
  }
  
−
}
+
.overlap-button-text {
 +
background-color: rgba(94, 94, 94, 0.5);
 +
border-radius: 60px;
 +
color: white;
 +
}
  
−
.subLinks { /* Main */
+
.proj-button-image {
−
                        float:left;
+
opacity: 0.7;
−
                        width : 40%;
+
      display: inline-block;
−
height : 150px;
+
      width: 30%;
−
                        border-radius: 8px;
+
      height: auto;
−
                        margin-left: 4.5%;
+
      transition: .5s ease;
−
                        margin-right: 5%;
+
      backface-visibility: hidden;
−
                        margin-top: 20px;
+
}
−
                       
+
−
                        float:left;
+
−
                            text-align:center;
+
−
                          font-size:26px;
+
−
                        background-repeat: no-repeat;
+
−
                      background-color: red;
+
−
                 
+
−
           
+
−
display: flex;
+
−
justify-content: center;
+
−
                        vertical-align : center;
+
−
align-items: center;
+
−
-webkit-display: flex;
+
−
-webkit-justify-content: center;  
+
−
-webkit-align-items: center;
+
−
 
+
−
}
+
−
 
+
−
.subLinks:hover{
+
  
 +
.desktop-frontpage {
 +
width: 95%;
 +
}
  
−
opacity:0.8;
+
    .proj-button-desc {
−
    filter: alpha(opacity=80)
+
      transition: .5s ease;
 +
      opacity: 1;
 +
      position: absolute;
 +
      top: 100%;
 +
      left: 50%;
 +
      transform: translate(-50%, -50%);
 +
      -ms-transform: translate(-50%, -50%)
 +
  }
 
}
 
}
  
−
</style>
+
@media (max-width: 576px) {
−
<div id=page>
+
  
−
<div class = "headerbox" style=" text-align:center; background-color: transparent; background-image: url(https://static.igem.org/mediawiki/2017/1/16/Ucscbanner.png); background-repeat: no-repeat; height: 400px;" </div> </div>
+
.proj-button-image {
 +
      opacity: 0.7;
 +
      display: inline-block;
 +
      width: 38%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
      backface-visibility: hidden;
 +
    }
  
−
</div>
+
    .proj-button-desc {
 +
      transition: .5s ease;
 +
      opacity: 1;
 +
      position: absolute;
 +
      top: 100%;
 +
      left: 50%;
 +
      transform: translate(-50%, -50%);
 +
      -ms-transform: translate(-50%, -50%)
 +
  }
  
−
<div class="column full_size" >
+
.desktop-frontpage {
−
<h1> Welcome to UCSC's iGEM Wiki! </h1>
+
display: none;
−
<p>Our team is made of 15 motivated interdisciplinary undergraduate students including Biomolecular Engineers, Molecular, Cellular and Developmental Biologists, Biochemists, and Chemical Engineers. We hope to alleviate a range of burdens associated with global malnutrition and contribute to Millennium Development Goals 2 and 3. </p>
+
}
−
</div>
+
  
−
<div class="clear"></div>
+
.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;
 +
}
  
−
<div class="column half_size" >
+
.overlap-button-text {
−
<h5>Spirulina </h5>
+
background-color: rgba(94, 94, 94, 0.5);
−
<img src="http://spirulinapowdermarket.com/sites/default/files/spirulinahealthbenefits_4_1.jpg">
+
border-radius: 60px;
 +
color: white;
 +
font-size: 13px;
 +
}
 +
}
  
−
</div>
+
</style>
 +
  <head>
 +
      <meta name="UCSC IGEM" content="The legendary, UCSC igem Science Superheros">
 +
        <title>Santa Cruz IGEM</title>
 +
  </head>
  
−
<div class="column half_size" >
+
<div class="page">
−
<div class="highlight">
+
<center>
−
<h5> Project Description </h5>
+
<div class="desktop-frontpage">  
−
<p>UCSC's 2017 iGEM team recognized how global malnutrition amplifies problems for many low income regions; causing economic burden as well as diseases like blindness, disabilities, and anemia. In hopes to address these crippling medical issues, we are creating a decentralized, self-sustaining biological source of nutrition that could be grown cheaply anywhere in the world. Spirulina is a fast growing, nutrient dense cyanobacteria which is already utilized for nutritional supplementation all over the world. The goal for our team is to optimize Spirulina to make it more accessible and fill the nutritional gaps to make it an effective and complete vitamin. This reflects our ultimate goal: To deliver nutrition to underdeveloped regions.</p>  
+
<img src="https://static.igem.org/mediawiki/2017/e/e6/UCSC-Frontpage.png" style="width: 100%;">
−
</div>
+
</div>
−
</div>
+
<center>
  
−
<div class="column half_size" >
+
<div class="mobile-frontpage">
−
<h5> Get Involved! </h5>
+
<img src="https://static.igem.org/mediawiki/2017/d/dd/UCSC-Frontpage_Mobile.png" style="width: 100%;">
−
<p>You can help us accomplish our goals!  We appreciate any contribution whether ideas, connections, or financial.  We are 100% donation funded, donate <a href=https://crowdfund.ucsc.edu/project/6945>here!</a>We are always looking for creativity and collaborations; if you have an idea to share or a connection with an interested party, please contact us at <b> ucscigem2017@gmail.com</b> </p>
+
</div>
  
−
</div>  
+
<br>
 +
<h2>Click on an icon below to learn more about our project!</h2>
 +
<br>
  
−
<div class="column half_size">
+
<div class="row">
−
<h5> What is iGEM? </h5>
+
  <!-- <a href="https://2017.igem.org/Team:UCSC/Team" class="proj-button">
−
<p> Answered by the team in beautiful Santa Cruz </p>
+
      <img src="https://static.igem.org/mediawiki/2017/d/dd/Team-icon.png" class="proj-button-image">
−
<iframe width="560" height="315" src="https://www.youtube.com/embed/jk9ltT2MosQ" frameborder="0" allowfullscreen></iframe>
+
      <div class="proj-button-desc">
 +
        <div class="overlap-button-text">TEAM</div>
 +
      </div>
 +
  </a>
 +
-->
 +
  <a href="https://2017.igem.org/Team:UCSC/Project" class="proj-button">
 +
      <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="overlap-button-text">OUR PROJECT</div>
 +
      </div>
 +
  </a>
  
 +
  <a href="https://2017.igem.org/Team:UCSC/Human_Practices" class="proj-button">
 +
      <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="overlap-button-text">HUMAN PRACTICES</div>
 +
      </div>
 +
  </a>
  
 +
  <a href="https://2017.igem.org/Team:UCSC/Attributions" class="proj-button">
 +
      <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="overlap-button-text">ATTRIBUTIONS</div>
 +
      </div>
 +
  </a>
  
−
<div class="column full_size" >
+
  <a href="https://2017.igem.org/Team:UCSC/Notebook" class="proj-button">
−
<h6> This website is still in progress. </h6>
+
      <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>
 +
  </a>
 +
 
 +
  <a href="https://2017.igem.org/Team:UCSC/Judging" class="proj-button">
 +
      <img src="https://static.igem.org/mediawiki/2017/1/1e/Medals_Transparent.png" class="proj-button-image">
 +
      <div class="proj-button-desc">
 +
        <div class="overlap-button-text">JUDGING</div>
 +
      </div>
 +
  </a>
  
 
</div>
 
</div>
  
 
</html>
 
</html>
 +
 +
{{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