Team:UCL/Project
From 2014.igem.org
(Difference between revisions)
Lewismoffat (Talk | contribs) |
Lewismoffat (Talk | contribs) |
||
Line 1: | Line 1: | ||
{{:Team:UCL/Template:headerx}} | {{:Team:UCL/Template:headerx}} | ||
+ | <!--=================HTML===================--> | ||
<html> | <html> | ||
- | < | + | <div class="banner-image-special"></div> |
- | < | + | <div style="padding-top:300px;"> |
+ | <div id='grid'> | ||
+ | <div class='box' id='about-pro'>About</div> | ||
+ | <div class='box' id='biobricks-pro'>Biobricks</div> | ||
+ | <div class='box' id='achievements-pro'>Achievements</div> | ||
+ | <div class='box' id='future-pro'>Future</div> | ||
+ | <div class='box' id='manuf-pro'>Manufacturing</div> | ||
+ | </div> | ||
+ | <div id='fillers'> | ||
+ | <div class='fillerBox' id='redd'></div> | ||
+ | <div class='fillerBox' id='bluee'></div> | ||
+ | <div class='fillerBox' id='yelloww'></div> | ||
+ | </div> | ||
+ | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | <!--=================CSS===================--> | |
- | + | ||
- | + | <style> | |
- | < | + | #grid{ |
- | + | width: 100%; | |
- | + | position: relative; | |
- | + | font-size: 25px; | |
- | + | font-family: 'Helvetica'; | |
- | + | color: #eaeaea; | |
- | + | } | |
- | + | .box { | |
- | + | background-color: #c23822; | |
- | + | box-shadow: 0px 0px 1px #222; | |
- | + | float: left; | |
- | + | position: relative; | |
- | + | } | |
- | + | #fillers{ | |
- | + | display: none; | |
- | + | } | |
- | + | .fillerBox { | |
- | + | background-color: #751e11; | |
- | + | box-shadow: 0px 0px 1px #222; | |
- | + | float: left; | |
- | + | position: relative; | |
- | + | } | |
- | + | ||
- | + | .banner-image-special { | |
- | + | background: url('https://static.igem.org/mediawiki/2014/2/27/UCLHumanElementsBanner.png') center no-repeat; | |
- | + | width:100%; | |
- | + | background-size:100%; | |
- | < | + | max-width:850px; |
- | </ | + | height:100px; |
+ | position:fixed; | ||
+ | padding-top:170px; | ||
+ | } | ||
+ | @media (min-width: 1140px) { | ||
+ | .banner-image-special { | ||
+ | max-width:none; | ||
+ | width:850px; | ||
+ | left:25%; | ||
+ | padding-top:250px; | ||
+ | } | ||
+ | } | ||
+ | #about-pro { | ||
+ | background: url('') center no-repeat; | ||
+ | background-size:100%; | ||
+ | } | ||
+ | #biobricks-pro { | ||
+ | background: url('') center no-repeat; | ||
+ | background-size:100%; | ||
+ | } | ||
+ | #achievements-pro { | ||
+ | background: url('') center no-repeat; | ||
+ | background-size:100%; | ||
+ | } | ||
+ | #future-pro { | ||
+ | background: url('') center no-repeat; | ||
+ | background-size:100%; | ||
+ | } | ||
+ | #manuf-pro { | ||
+ | background: url('') center no-repeat; | ||
+ | background-size:100%; | ||
+ | } | ||
+ | #redd { | ||
+ | background: red center no-repeat; | ||
+ | background-size:100%; | ||
+ | opacity:0.5; | ||
+ | } | ||
+ | #bluee { | ||
+ | background: blue center no-repeat; | ||
+ | background-size:100%; | ||
+ | opacity:0.5; | ||
+ | } | ||
+ | #yelloww { | ||
+ | background: yellow center no-repeat; | ||
+ | background-size:100%; | ||
+ | opacity:0.5; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <!--=================Javascript===================--> | ||
+ | |||
+ | <script type="text/javascript" src="https://2014.igem.org/Team:UCL/Template:mason.js?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | <!-- This is to initialize the above js which aims to reorder box divs with no spaces --> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $(function(){ | ||
+ | $("#grid").mason({ | ||
+ | itemSelector: ".box", | ||
+ | ratio: 1.5, | ||
+ | sizes: [ | ||
+ | [1,1], | ||
+ | [1,2], | ||
+ | [2,1], | ||
+ | [2,2] | ||
+ | ], | ||
+ | columns: [ | ||
+ | [0,480,1], | ||
+ | [480,780,2], | ||
+ | [780,1080,3], | ||
+ | [1080,1320,4], | ||
+ | [1320,1680,5] | ||
+ | ], | ||
+ | filler: { | ||
+ | itemSelector: '.fillerBox', | ||
+ | filler_class: 'custom_filler' | ||
+ | }, | ||
+ | layout: 'fluid', | ||
+ | }); | ||
+ | }); }); | ||
+ | </script> | ||
+ | |||
</html> | </html> | ||
{{:Team:UCL/Template:footerx}} | {{:Team:UCL/Template:footerx}} |
Revision as of 12:18, 3 September 2014
About
Biobricks
Achievements
Future
Manufacturing