Difference between revisions of "Team:UCSC"

 
(419 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{UCSC}}
+
{{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 {
+
−
width : 80%;
+
−
height : 1000px;
+
−
                    margin-left : 10%;
+
−
                     
+
−
+
−
                     
+
−
 
+
−
}
+
−
 
+
−
nav li a {
+
−
display: block; padding: 15px 25px;
+
−
color: #e6b800 !important; text-decoration: none;
+
−
     
+
−
}
+
−
nav ul li:hover > ul {
+
−
display: block;
+
−
 
+
−
}
+
−
             
+
−
             
+
−
+
−
 
+
−
.layout {
+
−
display : inline-block;
+
−
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 {
 
−
clear: both;
 
−
width: 100%
 
  
−
 
+
.proj-button {
−
height: 10px;
+
    position: relative;
 +
    width: 10%;
 +
    text-decoration: none !important;
 
}
 
}
  
−
 
+
.proj-button-image {
−
.headerbox { /* Main */
+
  opacity: 1;
−
                        float:right;
+
  display: inline-block;
−
                        width : 100%;
+
  width: 14%;
−
                        height : 100px;
+
  height: auto;
−
                        border-radius: 8px;
+
  transition: .5s ease;
−
                 
+
  backface-visibility: hidden;
−
                        margin-top: 5px;
+
  margin: 20px;
−
                        background-color: red;
+
−
                    background-size:contain;
+
−
                        background-position:center;
+
−
                      background-position: 50% 50%;
+
−
display: inline
+
−
 
+
−
clear: both;
+
−
                 
+
−
 
+
 
}
 
}
  
−
 
+
.proj-button-desc {
−
 
+
  transition: .5s ease;
−
.box2 { /* Projects */
+
  opacity: 0;
−
                     
+
  position: absolute;
−
                        width : 50%;  
+
  top: 100%;
−
height : 360px;
+
  left: 50%;
−
                      /* background-color: red;*/
+
  background: transparent;
−
                        float:left;
+
  transform: translate(-50%, -50%);
−
    
+
   -ms-transform: translate(-50%, -50%)
 
}
 
}
−
 
  
−
 
+
.proj-button:hover .proj-button-image {
−
.infobox {
+
  opacity: 0.2;
−
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{
+
.proj-button:hover .proj-button-desc {
−
 
+
  opacity: 0.8;
−
opacity:1.0;
+
−
+
−
    filter: alpha(opacity=80);
+
−
 
+
 
}
 
}
  
−
.subLinks { /* Main */
+
.overlap-button-text {
−
                        float:left;
+
  background-color: transparent;
−
                        width : 40%;
+
  color: black;
−
height : 150px;
+
  font-size: 20px;
−
                        border-radius: 8px;
+
  font-family: "Objektiv-mk1" !important;
−
                        margin-left: 4.5%;
+
  font-weight: 400 !important;
−
                        margin-right: 5%;
+
  padding: 16px 32px;
−
                        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 {
 +
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;
 +
}
  
−
opacity:0.8;
+
@media (max-width: 768px) {
−
    filter: alpha(opacity=80);
+
  
 +
  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>
 
</style>
−
<div id=page>
+
  <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>
  
−
<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: 600px;" </div> </div>
+
<div class="mobile-frontpage">
 +
<img src="https://static.igem.org/mediawiki/2017/d/dd/UCSC-Frontpage_Mobile.png" style="width: 100%;">
 +
</div>
  
−
</div>
+
<br>
 +
<h2>Click on an icon below to learn more about our project!</h2>
 +
<br>
  
−
<div class="column full_size" >
+
<div class="row">
−
<h1> Welcome to UCSC's iGEM Wiki! </h1>
+
  <!-- <a href="https://2017.igem.org/Team:UCSC/Team" class="proj-button">
−
<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>
+
      <img src="https://static.igem.org/mediawiki/2017/d/dd/Team-icon.png" class="proj-button-image">
−
</div>  
+
      <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>
  
−
<div class="clear"></div>
+
  <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>
  
−
<div class="column half_size" >
+
  <a href="https://2017.igem.org/Team:UCSC/Attributions" class="proj-button">
−
<h5>Spirulina </h5>
+
      <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/">
−
<img src="http://spirulinapowdermarket.com/sites/default/files/spirulinahealthbenefits_4_1.jpg">
+
      <div class="proj-button-desc">
 +
        <div class="overlap-button-text">ATTRIBUTIONS</div>
 +
      </div>
 +
  </a>
  
−
</div>
+
  <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>
 +
  </a>
  
−
<div class="column half_size" >
+
  <a href="https://2017.igem.org/Team:UCSC/Judging" class="proj-button">
−
<div class="highlight">
+
      <img src="https://static.igem.org/mediawiki/2017/1/1e/Medals_Transparent.png" class="proj-button-image">
−
<h5> Project Description </h5>
+
      <div class="proj-button-desc">
−
<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>
+
        <div class="overlap-button-text">JUDGING</div>
−
</div>
+
      </div>
−
</div>
+
  </a>
−
 
+
−
<div class="column half_size" >
+
−
<h5> Get Involved! </h5>
+
−
<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 class="column half_size">
+
−
<h5> What is iGEM? </h5>
+
−
<p> Answered by the team in beautiful Santa Cruz </p>
+
−
<iframe width="560" height="315" src="https://www.youtube.com/embed/jk9ltT2MosQ" frameborder="0" allowfullscreen></iframe>
+
−
 
+
−
 
+
−
 
+
−
<div class="column full_size" >
+
−
<h6> This website is still in progress. </h6>
+
  
 
</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