Team:UCL/Project

{{:Team:UCL/Template:headerx}}
<!--=================HTML===================-->
<html>
<div class="banner-image-special"><h1>PROJECT</h1></div>		
<div style="padding-top:300px;">
    <div id='grid'>
	<div class='box'><a href="https://2014.igem.org/Team:UCL/Project/About"><span class="overlayx"></span></a><div class="image-location" id='about-pro'></div>About</div>
	<div class='box'><a href="https://2014.igem.org/Team:UCL/Project/Biobricks"><span class="overlayx"></span></a><div class="image-location" id='biobricks-pro'></div>Biobricks</div>
	<div class='box'><a href="https://2014.igem.org/Team:UCL/Project/Achievements"><span class="overlayx"></span></a><div class="image-location" id='achievements-pro'></div>Achievements</div>
	<div class='box'><a href="https://2014.igem.org/Team:UCL/Project/Future"><span class="overlayx"></span></a><div class="image-location" id='future-pro'></div>Future</div>
	<div class='box'><a href="https://2014.igem.org/Team:UCL/Project/Manufacturing"><span class="overlayx"></span></a><div class="image-location" id='manuf-pro'></div>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>
.overlayx {
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
  background-image: url('empty.gif');
}
#grid{
			width: 100%; 
			position: relative;
			font-size: 25px;
			font-family: 'Helvetica';
			color: #eaeaea;
		}
		.box {
			background-clip: border-box;
                        background-color: white;
                        opacity:0.95;
                        background-image: none;
                        background-origin: padding-box;
                        background-size: auto;
                        box-sizing: border-box;
                        color: rgb(167, 160, 162);
                        display: block;
                        font-family: Lato, Arial, sans-serif;
                        font-size: 16px;
                        font-weight: normal;
			box-shadow: 0px 0px 1px #222;
			float: left;
			position: relative;
                        margin:0;
                        text-align: center;
		}
		#fillers{
			display: none;
		}
		.fillerBox {
			background-color: #751e11;
			box-shadow: 0px 0px 1px #222;
			float: left;
			position: relative;
		}

.banner-image-special {
    background: white center no-repeat;
    width:100%;
    background-size:100%;
    height:100px;
    position:fixed;
}
.banner-image-special > h1 {
    font-size:5em;
}
@media (min-width: 1140px) {
    .banner-image-special {
    max-width:none;
    width:850px;
    left:25%;
    padding-top:250px;
    }
}
.image-location {
    margin-left:12.5%;
    margin-right:12.5%;
    margin-top:7%;
    height:66%;
    background-color:transparent;
}
#about-pro {
    background: url('https://static.igem.org/mediawiki/2014/7/73/Teamissupersexy.png') center no-repeat; 
    background-size:100%;
    opacity:0.95;
}	
#biobricks-pro {
    background: url('https://static.igem.org/mediawiki/2014/3/3d/10491123_10204437153717396_7991059471759774917_n.jpg') center no-repeat; 
    background-size:100%;
}
#achievements-pro {
    background: url('https://static.igem.org/mediawiki/2014/d/d1/UCL_clipboard.png') center no-repeat; 
    background-size:100%;
}
#future-pro {
    background: url('https://static.igem.org/mediawiki/2014/8/83/Group_social_350x450.png') center no-repeat; 
    background-size:100%;
}
#manuf-pro {
    background: url('https://static.igem.org/mediawiki/2014/1/1a/UCL_Eng_logo_2.png') 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&amp;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>
{{:Team:UCL/Template:footerx}}