Difference between revisions of "Team:UCSC"

 
(197 intermediate revisions by 5 users not shown)
Line 2: Line 2:
  
 
<html>
 
<html>
 +
 +
<style>
 +
 +
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;
 +
}
 +
 +
 +
.proj-button {
 +
    position: relative;
 +
    width: 10%;
 +
    text-decoration: none !important;
 +
}
 +
 +
.proj-button-image {
 +
  opacity: 1;
 +
  display: inline-block;
 +
  width: 14%;
 +
  height: auto;
 +
  transition: .5s ease;
 +
  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%)
 +
}
 +
 +
.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>
 
   <head>
 
       <meta name="UCSC IGEM" content="The legendary, UCSC igem Science Superheros">
 
       <meta name="UCSC IGEM" content="The legendary, UCSC igem Science Superheros">
 
         <title>Santa Cruz IGEM</title>
 
         <title>Santa Cruz IGEM</title>
 
   </head>
 
   </head>
−
<style>
 
−
    sideMenu,
 
−
    #top_title {
 
−
        display: none;
 
−
    }
 
−
    content {
 
−
        padding: 50px;
 
−
        width: 100%;
 
−
        margin-top: -10px;
 
−
        margin-left: 0%;
 
−
        , margin-right: 0%
 
−
    }
 
−
    body {
 
−
        background-color: honeydew;
 
−
    }
 
−
    bodyContent h1,
 
−
    #bodyContent h2,
 
−
    #bodyContent h3,
 
−
    #bodyContent h4,
 
−
    #bodyContent h5 {
 
−
        margin-bottom: 0px;
 
−
        margin-left: 0px;
 
−
        margin-right: 0px;
 
−
        margin-top: 0px
 
−
    }
 
−
    #page {
 
−
        width: 100%;
 
−
        height: max-content;
 
  
−
        horizontal-align: middle;
+
<div class="page">
−
    }
+
<center>
−
    .layout {
+
<div class="desktop-frontpage">
−
        display: inline-block;
+
<img src="https://static.igem.org/mediawiki/2017/e/e6/UCSC-Frontpage.png" style="width: 100%;">
−
        width: 100%;
+
</div>
−
        height: 100%;
+
<center>
−
        z-index: 0;
+
−
        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% height: 10px;
+
−
    }
+
−
    .headerbox {
+
−
        /* Main */
+
−
       
+
−
        float: center;
+
  
−
        height: 100%;
+
<div class="mobile-frontpage">
−
        border-radius: 0px;
+
<img src="https://static.igem.org/mediawiki/2017/d/dd/UCSC-Frontpage_Mobile.png" style="width: 100%;">
−
        postion: fixed;
+
</div>
−
        /*margin-top: -460px;*/
+
−
       
+
−
        background-color: honeydew;
+
−
        background-size: contain;
+
−
        background-position: center;
+
−
        background-position: 100% 0%;
+
−
        display: block;
+
−
        clear: both;
+
−
        padding: 80px;
+
−
        horizontal-align:middle;
+
−
    }
+
−
    .box2 {
+
−
        /* Projects */
+
−
       
+
−
        width: 50%;
+
−
        height: 360px;
+
−
        /* background-color: red;*/
+
−
       
+
−
        float: left;
+
−
    }
+
−
    .infobox {
+
−
        width: 50px;
+
−
        height: 100% background-color: yellow;
+
  
−
    .mainLinks:hover {
+
<br>
−
        opacity: 1.0;
+
<h2>Click on an icon below to learn more about our project!</h2>
−
        filter: alpha(opacity=80);
+
<br>
−
    }
+
 
−
    .subLinks {
+
<div class="row">
−
        /* Main */
+
  <!-- <a href="https://2017.igem.org/Team:UCSC/Team" class="proj-button">
−
       
+
      <img src="https://static.igem.org/mediawiki/2017/d/dd/Team-icon.png" class="proj-button-image">
−
         float: left;
+
      <div class="proj-button-desc">
−
        width: 40%;
+
         <div class="overlap-button-text">TEAM</div>
−
        height: 150px;
+
      </div>
−
        border-radius: 8px;
+
  </a>
−
        margin-left: 4.5%;
+
-->
−
        margin-right: 5%;
+
  <a href="https://2017.igem.org/Team:UCSC/Project" class="proj-button">
−
        margin-top: 20px;
+
      <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">
−
        float: left;
+
      <div class="proj-button-desc">
−
        text-align: center;
+
         <div class="overlap-button-text">OUR PROJECT</div>
−
        font-size: 26px;
+
      </div>
−
        background-repeat: no-repeat;
+
  </a>
−
         background-color: red;
+
 
−
        display: flex;
+
  <a href="https://2017.igem.org/Team:UCSC/Human_Practices" class="proj-button">
−
        justify-content: center;
+
      <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">
−
        vertical-align: center;
+
      <div class="proj-button-desc">
−
        align-items: center;
+
         <div class="overlap-button-text">HUMAN PRACTICES</div>
−
        -webkit-display: flex;
+
      </div>
−
        -webkit-justify-content: center;
+
  </a>
−
        -webkit-align-items: center;
+
−
    }
+
−
    .subLinks:hover {
+
−
         opacity: 0.8;
+
−
        filter: alpha(opacity=80)
+
−
    }
+
−
</style>
+
  
−
<div id="page">
+
  <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="headerbox">  
+
  <a href="https://2017.igem.org/Team:UCSC/Notebook" class="proj-button">
−
<img src="https://static.igem.org/mediawiki/2017/5/50/Frontpage1.png" style="user-drag: none;
+
      <img src="https://static.igem.org/mediawiki/2017/c/cc/Labnotebook.png" class="proj-button-image">
−
user-select: none;
+
      <div class="proj-button-desc">
−
-moz-user-select: none;
+
        <div class="overlap-button-text">NOTEBOOK</div>
−
-webkit-user-drag: none;
+
      </div>
−
-webkit-user-select: none;
+
  </a>
−
-ms-user-select: none;
+
−
        width: 100%;
+
−
        padding: 0px;">
+
−
</div>
+
−
    </div>
+
  
 +
  <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>
  
 
</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