Evan pepper (Talk | contribs) |
Evan pepper (Talk | contribs) |
||
(46 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{UCSC-Header}} | {{UCSC-Header}} | ||
+ | |||
<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; | ||
+ | } | ||
− | <center>< | + | .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> | ||
+ | <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="mobile-frontpage"> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/d/dd/UCSC-Frontpage_Mobile.png" style="width: 100%;"> | |
+ | </div> | ||
<br> | <br> | ||
+ | <h2>Click on an icon below to learn more about our project!</h2> | ||
<br> | <br> | ||
− | |||
− | |||
− | |||
− | |||
<div class="row"> | <div class="row"> | ||
− | <a href="https://2017.igem.org/Team:UCSC/ | + | <!-- <a href="https://2017.igem.org/Team:UCSC/Team" class="proj-button"> |
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <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"> | + | <div class="overlap-button-text">TEAM</div> |
</div> | </div> | ||
</a> | </a> | ||
− | + | --> | |
− | <a href="https://2017.igem.org/Team:UCSC/ | + | <a href="https://2017.igem.org/Team:UCSC/Project" class="proj-button"> |
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <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"> | + | <div class="overlap-button-text">OUR PROJECT</div> |
</div> | </div> | ||
</a> | </a> | ||
− | <a href="https://2017.igem.org/Team:UCSC/ | + | <a href="https://2017.igem.org/Team:UCSC/Human_Practices" class="proj-button"> |
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <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"> | + | <div class="overlap-button-text">HUMAN PRACTICES</div> |
</div> | </div> | ||
</a> | </a> | ||
− | <a href="https://2017.igem.org/Team:UCSC/ | + | <a href="https://2017.igem.org/Team:UCSC/Attributions" class="proj-button"> |
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <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"> | + | <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/ | + | <a href="https://2017.igem.org/Team:UCSC/Judging" class="proj-button"> |
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <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"> | + | <div class="overlap-button-text">JUDGING</div> |
</div> | </div> | ||
</a> | </a> | ||
</div> | </div> | ||
− | + | ||
− | + | ||
− | + | ||
</html> | </html> | ||
+ | |||
{{UCSC-Footer}} | {{UCSC-Footer}} |
Latest revision as of 04:26, 1 November 2017