Difference between revisions of "Team:UCSC/Demonstrate"

Line 6: Line 6:
 
<script>try{Typekit.load({ async: true });}catch(e){}</script>
 
<script>try{Typekit.load({ async: true });}catch(e){}</script>
  
−
<style type="text/css">
+
<style>
 +
 
 +
.metabolic-pathway {
 +
  margin: auto;
 +
  background: honeydew;
 +
  width: 100%;
 +
}
  
 
h1 {
 
h1 {
−
font-family: "objektiv-mk1" !important;
+
  font-family: 'objektiv-mk1'!important;
−
font-style: normal !important;
+
  font-size: 300%; /*!important*/
−
font-weight: 300 !important;
+
  font-weight: 300 !important;
−
        font-size: 275% !important;
+
    width: 90%;
−
text-align: center;  
+
 
}
 
}
  
−
h2{
+
h2 {
−
font-family: "objektiv-mk1" !important;
+
  font-family: 'objektiv-mk1' !important;
−
font-style: normal !important;
+
  font-size: 200%;
−
font-weight: 300 !important;
+
  font-weight: 300;
−
        font-size: 200% !important;
+
−
text-align: left;  
+
 
}
 
}
  
−
p{  
+
h3 {
−
font-family: "objektiv-mk1" !important;
+
font-family: 'objektiv-mk1' !important;
−
font-style: normal !important;
+
font-size: 120%;
−
        font-size: 100% !important;
+
font-weight: 200;
−
        font-weight: 300 !important;
+
}
−
        width: 75% !important;
+
 
 +
#page {
 +
  background: honeydew;
 +
}
 +
 
 +
.proj-button {
 +
    position: relative;
 +
    width: 25%;
 +
    text-decoration: none !important;
 +
}
 +
 
 +
.proj-button-image {
 +
  opacity: 1;
 +
  display: inline-block;
 +
  width: 30%;
 +
  height: auto;
 +
  transition: .5s ease;
 +
  backface-visibility: hidden;
 +
}
 +
 
 +
.proj-button-image-solo {
 +
  opacity: 1;
 +
  display: inline-block;
 +
  width: 65%;
 +
  height: auto;
 +
  transition: .5s ease;
 +
  backface-visibility: hidden;
 +
}
 +
 
 +
.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%)
 +
}
 +
 
 +
.overlap-button-text {
 +
  background-color: transparent;
 +
  color: black;
 +
  font-size: 20px;
 +
  font-family: "Objektiv-mk1" !important;
 +
  font-weight: 600 !important;
 +
  padding: 16px 32px;
 +
}
 +
 
 +
.proj-button:hover .proj-button-image {
 +
  opacity: 0.3;
 +
}
 +
 
 +
.proj-button:hover .proj-button-image-solo {
 +
  opacity: 0.3;
 +
}
 +
 
 +
.proj-button:hover .proj-button-desc {
 +
  opacity: 0.6;
 +
}
 +
 
 +
.overlap-button-text {
 +
  background-color: transparent;
 +
  color: black;
 +
  font-size: 20px;
 +
  font-family: "Objektiv-mk1" !important;
 +
  font-weight: 600 !important;
 +
  padding: 16px 32px;
 +
}
 +
 
 +
.text {
 +
  background-color: transparent;
 +
  color: black;
 +
  font-size: 20px;
 +
  padding: 16px 32px;
 +
}
 +
 
 +
.paragraph-left {
 +
font-family: 'objektiv-mk1' !important;
 +
font-size: 18px;
 +
text-align: left;
 +
vertical-align: middle;
 +
}
 +
 
 +
p {
 +
font-family: 'objektiv-mk1' !important;
 +
/* margin-left: 200px !important;
 +
margin-right: 200px !important;*/
 +
font-size: large !important;
 +
}
 +
 
 +
.firstword {
 +
font-family: 'objektiv-mk1' !important;
 +
font-size: 100px;
 +
}
 +
.quote {
 +
font-family: 'objektiv-mk1' !important;
 +
font-style: italic !important;
 +
font-size: 28px;
 +
line-height: 130%;
 +
}
 +
 
 +
.quote-person {
 +
font-family: 'objektiv-mk1' !important;
 +
font-size: 22px;
 +
width: 100% !important;
 +
text-align: right !important;
 +
padding-right: 80px !important;
 +
}
 +
 
 +
.titleimg {
 +
  vertical-align: middle;
 +
  width: 20%;
 +
}
 +
 
 +
.titlebox {
 +
margin-left: 0px !important;
 +
}
 +
 
 +
.reference-list {
 +
font-family: 'objektiv-mk1';
 +
font-size: 12px;
 +
text-align: left;
 +
list-style-type: none;
 +
line-height: 100%;
 +
margin-bottom: 80px;
 +
}
 +
 
 +
.reference-italic {
 +
font-family: 'objektiv-mk1';
 +
font-size: 12px;
 +
font-style: italic;
 +
}
 +
 
 +
figcaption {
 +
font-family: 'objektiv-mk1';
 +
font-style: italic;
 +
font-size: 13px;
 +
}
 +
 
 +
 
 +
@media (min-width: 1144px) {
 +
.container {
 +
    width: 100% !important;
 +
    }
 +
 
 +
  .text-container {
 +
    width: 70%;
 +
    padding-left: 15px;
 +
    padding-right: 15px;
 +
  }
 +
 
 +
  .titlebox {
 +
    width: 80%;
 +
  }
 +
 
 +
  figcaption {
 +
    font-size: 16px;
 +
  }
 +
}
 +
 
 +
@media (max-width: 1144px) {
 +
 
 +
    .titlebox {
 +
    margin-left: auto !important;
 +
    }
 +
 
 +
p {
 +
font-family: 'objektiv-mk1' !important;
 +
margin-left: 10px !important;
 +
margin-right: 10px !important;
 +
font-size: medium !important;
 +
}
 +
 +
.quote {
 +
font-family: 'objektiv-mk1' !important;
 +
font-style: italic !important;
 +
font-size: 26px;
 +
}
 +
 
 +
.quote-person {
 +
font-family: 'objektiv-mk1' !important;
 +
font-size: 20px;
 +
width: 100%;
 +
text-align: right;
 +
padding-right: 80px !important;
 +
}
 +
 
 +
.metabolic-pathway {
 +
  margin: auto;
 +
  background: honeydew;
 +
  width: 100%;
 +
}
 +
 
 +
.container {
 +
width: 80% !important;
 +
padding-left: 0px !important;
 +
padding-right: 0px !important;
 +
}
 +
 
 +
.text-container {
 +
width: 80%;
 +
padding-left: 0px;
 +
padding-right: 0px;
 +
}
 +
 
 +
figcaption {
 +
font-size: 14px;
 +
}
 +
}
 +
 
 +
@media (max-width: 992px) {
 +
.proj-button-image-solo {
 +
  opacity: 1;
 +
  display: inline-block;
 +
  width: 30%;
 +
  height: auto;
 +
  transition: .5s ease;
 +
  backface-visibility: hidden;
 +
  }
 +
}
 +
 
 +
@media (max-width: 768px) {
 +
.proj-button-image {
 +
      opacity: 1;
 +
      display: inline-block;
 +
      width: 32%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
      backface-visibility: hidden;
 +
    }
 +
 
 +
    .proj-button-image-solo {
 +
      opacity: 1;
 +
      display: inline-block;
 +
      width: 35%;
 +
      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%)
 +
  }
 +
 
 +
  .overlap-button-text {
 +
background-color: rgba(94, 94, 94, 0.4);
 +
border-radius: 60px;
 +
color: white;
 +
}
 +
 
 +
h1 {
 +
      font-family: 'objektiv-mk1'; /*!important*/
 +
      font-size: 220%; /*!important*/
 +
      width: 80%;
 +
  }
 +
 
 +
  h2 {
 +
      font-family: 'objektiv-mk1'; /*!important*/
 +
      font-size: 20px; /*!important*/
 +
  }
 +
 +
.quote {
 +
font-family: 'objektiv-mk1' !important;
 +
font-style: italic !important;
 +
font-size: 20px;
 +
}
 +
 
 +
.quote-person {
 +
width: 100%;
 +
font-family: 'objektiv-mk1' !important;
 +
font-size: 16px;
 +
text-align: right !important;
 +
padding-right: 20px !important;
 +
}
 +
 
 +
.text-container {
 +
width: 82%;
 +
padding-left: 0px;
 +
padding-right: 0px;
 +
}
 +
 
 +
figcaption {
 +
font-size: 14px;
 +
line-height: 140%;
 +
}
 +
 
 +
.reference-list {
 +
font-family: 'objektiv-mk1';
 +
font-size: 12px;
 +
text-align: left;
 +
list-style-type: none;
 +
line-height: 100%;
 +
margin-bottom: 80px;
 +
margin-right: -70px;
 +
margin-left: -70px;
 +
}
 +
}
 +
/* p {
 +
margin-left: 10px !important;
 +
margin-right: 10px !important;
 +
}
 +
}*/
 +
 
 +
@media (max-width: 576px) {
 +
.proj-button-image {
 +
      opacity: 1;
 +
      display: inline-block;
 +
      width: 50%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
      backface-visibility: hidden;
 +
    }
 +
 
 +
    .proj-button-image-solo {
 +
      opacity: 1;
 +
      display: inline-block;
 +
      width: 50%;
 +
      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%)
 +
  }
 +
 
 +
  .overlap-button-text {
 +
background-color: rgba(94, 94, 94, 0.5);
 +
border-radius: 60px;
 +
color: white;
 +
font-size: 12px;
 +
}
 +
 
 +
.firstword {
 +
font-family: 'objektiv-mk1' !important;
 +
font-size: 70px;
 +
}
 +
 
 +
  .titleimg {
 +
    vertical-align: middle;
 +
    width: 40%;
 +
  }
 +
 
 +
p {
 +
    font-family: 'objektiv-mk1' !important;
 +
    margin-left: 10px !important;
 +
    margin-right: 10px !important;
 +
    font-size: small !important;
 +
  }
 +
 
 +
h1 {
 +
    font-size: 160%;
 +
  }
 +
 
 +
.quote {
 +
font-family: 'objektiv-mk1' !important;
 +
font-style: italic !important;
 +
font-size: 17px;
 +
}
 +
 
 +
.quote-person {
 +
width: 60% !important;
 +
font-family: 'objektiv-mk1' !important;
 +
font-size: 12px;
 +
text-align: right !important;
 +
margin-right: -120px !important;
 +
}
 +
 
 +
.paragraph-left {
 +
font-size: 13px;
 +
line-height: 170%;
 +
}
 +
 
 +
.text-container {
 +
width: 85%;
 +
padding-left: 0px;
 +
padding-right: 0px;
 +
}
 +
 
 +
.metabolic-pathway {
 +
  margin: auto;
 +
  background: honeydew;
 +
  width: 110%;
 +
  margin-left: -20px;
 +
  margin-right: -20px;
 +
}
 +
 
 +
figcaption {
 +
font-size: 12px;
 +
line-height: 130%;
 +
}
 +
 
 +
.reference-list {
 +
font-family: 'objektiv-mk1';
 +
font-size: 12px;
 +
text-align: left;
 +
list-style-type: none;
 +
line-height: 100%;
 +
margin-bottom: 80px;
 +
margin-right: -50px;
 +
margin-left: -50px;
 +
}
 +
}
 +
 
 +
@media (max-width: 400px) {
 +
.quote {
 +
font-size: 15px;
 +
}
 
}
 
}
  
−
      .page{
 
−
background-color: honeydew;
 
−
padding: 0px 70px;
 
−
}
 
  
 
</style>
 
</style>
  
−
<div class="page">
+
<body style="background-color: honeydew;">
−
<h1>RESULTS</h1><br>
+
<div id="page">
 +
<center>
 +
<br>
  
−
</div>
+
<img class="titleimg" src="">
  
−
</html>
+
<h1>RESULTS</h1>
  
 +
<br>
 +
 +
 +
 +
<div class="container" style="width: 100%">
 +
<div class="row">
 +
<div class="col-md-4">
 +
<h3><b>Project Homepage</b></h3>
 +
<hr>
 +
<a href="https://2017.igem.org/Team:UCSC/Project" class="proj-button">
 +
<img src="https://static.igem.org/mediawiki/2017/0/0b/Cyano_button_icon.png" class="proj-button-image-solo">
 +
<div class="proj-button-desc">
 +
<div class="overlap-button-text">PROJECT</div>
 +
</div>
 +
</a>
 +
</div>
 +
 +
<div class="col-md-8">
 +
<h3><b>Click here to learn more!</b></h3>
 +
<hr>
 +
<div class="row">
 +
 +
<a href="https://2017.igem.org/Team:UCSC/B-12" class="proj-button">
 +
      <img src="https://static.igem.org/mediawiki/2017/7/74/Ace_icon.png" class="proj-button-image">
 +
      <div class="proj-button-desc">
 +
        <div class="overlap-button-text">ACETAMINOPHEN</div>
 +
      </div>
 +
  </a>
 +
 +
<a href="https://2017.igem.org/Team:UCSC/B-12" class="proj-button">
 +
      <img src="https://static.igem.org/mediawiki/2017/a/a2/B12_flask_button.png" class="proj-button-image">
 +
      <div class="proj-button-desc">
 +
        <div class="overlap-button-text">VITAMIN B<sub>12</sub></div>
 +
      </div>
 +
  </a>
 +
 +
  <a href="https://2017.igem.org/Team:UCSC/Model" class="proj-button">
 +
      <img src="https://static.igem.org/mediawiki/2017/b/be/Modeling_button.png" class="proj-button-image">
 +
    <div class="proj-button-desc">
 +
        <div class="overlap-button-text">MODELING</div>
 +
      </div>
 +
  </a>
 +
  </div>
 +
  <div class="row">
 +
 +
  <a href="https://2017.igem.org/Team:UCSC/Target-Organism" class="proj-button">
 +
    <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="overlap-button-text">TARGET ORGANISM</div>
 +
    </div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:UCSC/Parts" class="proj-button">
 +
    <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>
 +
</div>
 +
</div>
 +
<br>
 +
 +
 +
</center>
 +
</div>
 +
</html>
 
{{UCSC-Footer}}
 
{{UCSC-Footer}}

Revision as of 23:53, 28 October 2017


RESULTS


Project Homepage

PROJECT

Click here to learn more!

ACETAMINOPHEN
VITAMIN B12
MODELING
TARGET ORGANISM
PARTS

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