Team:UCL/Humans

From 2014.igem.org

(Difference between revisions)
 
(44 intermediate revisions not shown)
Line 2: Line 2:
<!--=================HTML===================-->
<!--=================HTML===================-->
<html>
<html>
 +
<script type="text/javascript" src="https://2014.igem.org/Team:UCL/Template:firewall.js?action=raw&amp;ctype=text/javascript"></script>
 +
<div class="banner-image-special"></div>
-
<style>
+
<div class="contentWrapper">
-
 
+
     <div class="smallParagraph">
-
.imageoverlay
+
         <p class="textSpace"><b>Humans are the engine behind the machine that is our project, and it is through humans that we tell our story. Be it who we are or the who we've influenced this is were you will find anything and everything to do with the humans involved in this project. <br>Click on the banner below to see the full story of how we as a team engaged the public and ourselves, or click one of the boxes to see some of the more individual aspects of the humans in our project.</b>
-
{
+
         </p>
-
  height:100%;
+
-
  width : 100%;
+
-
  background-color: rgba(0,0,0,0.25);
+
-
}
+
-
 
+
-
.fillerBox
+
-
{
+
-
  height:100%;
+
-
  width : 100%;
+
-
  background-color: rgba(0,0,0,0.25);
+
-
}
+
-
 
+
-
 
+
-
.textFloat h3
+
-
{
+
-
  color:white;
+
-
  background-color:black;
+
-
  border:solid 3px white;
+
-
  font-size:0.8em;
+
-
  text-transform: uppercase;
+
-
  padding-bottom:5px;
+
-
  padding-left:5px;
+
-
  padding-right:5px;
+
-
}
+
-
 
+
-
</style>
+
-
 
+
-
<div class="banner-image-special"></div>
+
-
<div style="padding-top:300px;">
+
-
     <div id='grid'>
+
-
 
+
-
<div class='box hover1'>
+
-
          <a href="https://2014.igem.org/Team:UCL/Humans/Team">
+
-
          <div class="image-location" id='team-human'>
+
-
            <div class="imageoverlay">
+
-
              <div class="textFloat"><h3>Team and Supervisors</h3></div>
+
-
            </div>
+
-
          </div>
+
-
          </a>
+
-
         </div>
+
-
 
+
-
        <div class='box hover2'>
+
-
          <a href="https://2014.igem.org/Team:UCL/Humans/Collab">
+
-
          <div class="image-location" id='collaborations-human'>
+
-
            <div class="imageoverlay">
+
-
              <div class="textFloat"><h3>Collaborations</h3></div>
+
-
            </div>
+
-
          </div>
+
-
          </a>
+
-
        </div>
+
-
+
-
        <div class='box hover3'>
+
-
          <a href="https://2014.igem.org/Team:UCL/Humans/Risk">
+
-
          <div class="image-location" id='risk-human'>
+
-
            <div class="imageoverlay">
+
-
              <div class="textFloat"><h3>Risk Assessment</h3></div>
+
-
            </div>
+
-
          </div>         
+
-
          </a>
+
-
        </div>
+
-
 
+
-
<div class='box hover4'>
+
-
          <a href="https://2014.igem.org/Team:UCL/Humans/Soci">
+
-
          <div class="image-location" id='soc-human'>
+
-
            <div class="imageoverlay">
+
-
              <div class="textFloat"><h3>Sociological Imaginations</h3></div>
+
-
            </div>
+
-
          </div>
+
-
          </a>         
+
-
        </div>
+
-
+
-
        <div class='box hover5'>
+
-
          <a href="https://2014.igem.org/Team:UCL/Humans/Sponsor">
+
-
          <div class="image-location" id='sponsor-human'>
+
-
            <div class="imageoverlay">
+
-
              <div class="textFloat"><h3>Sponsorship</h3></div>
+
-
            </div>
+
-
          </div>
+
-
          </a>
+
-
        </div>
+
-
       
+
-
        <div class='box hover6'>
+
-
          <a href="https://2014.igem.org/Team:UCL/Humans/Gallery">
+
-
          <div class="image-location" id='gallery-human'>
+
-
            <div class="imageoverlay">
+
-
              <div class="textFloat"><h3>Gallery</h3></div>
+
-
            </div>
+
-
          </div>         
+
-
          </a>
+
-
         </div>
+
-
 
+
     </div>
     </div>
-
 
+
    <div class="storyBlock">
-
<!--    <div id='fillers'>
+
         <a href="https://2014.igem.org/Team:UCL/Humans/Story">
-
         <div class='fillerBox' id='redd'></div>
+
<div id="BPimagewrapperHeader">
-
<div class='fillerBox' id='bluee'></div>
+
  <img src="https://static.igem.org/mediawiki/2014/c/c2/Story_logo-01.png" width="100%" height="100%" alt="Story" />
-
<div class='fillerBox' id='yelloww'></div>
+
</div>
-
    </div> -->
+
</a>
-
 
+
-
    <div id='fillers'>
+
-
        <div class='fillerBox'></div>
+
-
<div class='fillerBox'></div>
+
-
<div class='fillerBox'></div>
+
     </div>
     </div>
 +
</div>
 +
 +
<div style="padding-top:20px;">
 +
    <div id='grid'>
 +
<div class='box team-human'><a href="https://2014.igem.org/Team:UCL/Humans/Team"><span class="overlayx"></span></a></div>
 +
<div class='box collaborations-human' ><a href="https://2014.igem.org/Team:UCL/Humans/Collab"><span class="overlayx"></span></a></div>
 +
<div class='box risk-human'><a href="https://2014.igem.org/Team:UCL/Humans/Risk"><span class="overlayx"></span></a></div>
 +
<div class='box soc-human'><a href="https://2014.igem.org/Team:UCL/Humans/Soci"><span class="overlayx"></span></a></div>
 +
<div class='box sponsor-human'><a href="https://2014.igem.org/Team:UCL/Humans/Sponsor"><span class="overlayx"></span></a></div>
 +
<!--<div class='box gallery-human'><a href="https://2014.igem.org/Team:UCL/Humans/Gallery"><span class="overlayx"></span></a></div>
 +
<div class='box attributions-human'><a href="https://2014.igem.org/Team:UCL/Humans/Attributions"><span class="overlayx"></span></a></div>-->
 +
</div>
</div>
</div>
-
 
-
 
<!--=================CSS===================-->
<!--=================CSS===================-->
<style>
<style>
-
/*This styles the span which makes each block a link, the gif is for IE*/
+
.contentWrapper {
 +
    padding-top:470px;
 +
    z-index: 999;
 +
}
 +
.smallParagraph {
 +
    float:center;
 +
    width:95%;
 +
    text-align:left;
 +
    color: black;
 +
    margin: 10px auto;
 +
    font-size: 85%;
 +
    background: white;
 +
}
 +
.textSpace {
 +
    width: 95%;
 +
    margin: 5px auto;
 +
    text-align: center;
 +
}
 +
.storyBlock {
 +
    width:95%;
 +
    border: 1px solid #ccc;
 +
    text-align: center;
 +
    margin-left:auto;
 +
    margin-right:auto;
 +
    margin-top: 10px;
 +
    font-size: 130%;
 +
    text-transform:uppercase;
 +
    background: white;     
 +
}
 +
 
.overlayx {
.overlayx {
   position:absolute;  
   position:absolute;  
Line 128: Line 73:
   background-image: url('empty.gif');
   background-image: url('empty.gif');
}
}
-
/*Standard for blocks*/
 
#grid{
#grid{
-
  width: 100%;  
+
width: 96%;
-
  position: relative;
+
margin:2% 0% 2% 2%; 
-
  font-size: 25px;
+
position: relative;
-
  font-family: 'Helvetica';
+
font-size: 25px;
-
  color: #eaeaea;
+
font-family: 'Helvetica';
 +
color: #eaeaea;
}
}
.box {
.box {
-
  background-clip: border-box;
+
background-color: white;
-
  background-color: white;
+
box-shadow: 0px 0px 1px #222;
-
  opacity:0.95;
+
float: left;
-
  background-image: none;
+
position: relative;
-
  background-origin: padding-box;
+
height:300px;
-
  background-size: auto;
+
width:300px;
-
  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;
 
-
}
 
-
 
-
/*Banner*/
 
.banner-image-special {
.banner-image-special {
     background: url('https://static.igem.org/mediawiki/2014/6/6f/Human_Elements.png') center no-repeat;
     background: url('https://static.igem.org/mediawiki/2014/6/6f/Human_Elements.png') center no-repeat;
     width:100%;
     width:100%;
-
     margin-top: 70px;
+
     margin-top: 1%;
-
background-size:100%;
+
    background-size:100%;
     max-width:850px;
     max-width:850px;
-
     height:100px;
+
     height:270px;
     position:fixed;
     position:fixed;
-
     padding-top:170px;
+
     padding-top:150px;
 +
    z-index:-1;
}
}
@media (min-width: 1140px) {
@media (min-width: 1140px) {
     .banner-image-special {
     .banner-image-special {
-
     margin-left:-425px;
+
     max-width: none;
-
     left:50%;
+
     width:100%;
-
     padding-top:250px;
+
     margin-top:70px;
     }
     }
}
}
-
.image-location {
+
.team-human {
-
     /*margin-left:12.5%;
+
     background: white url('https://static.igem.org/mediawiki/2014/7/75/Team_and_SupervisorsUCL.png') center no-repeat;  
-
     margin-right:12.5%;
+
     background-size:56%;
-
    margin-top:7%;*/
+
}
-
     height:100%;
+
.collaborations-human {
-
    width:100%;
+
     background: white url('https://static.igem.org/mediawiki/2014/0/0c/CollaborationsUCL.png') center no-repeat;  
-
    position:absolute;
+
     background-size:56%;
-
     background-color:transparent;
+
}
}
-
.textFloat {
+
.risk-human {
-
z-index:3;
+
    background: white url('https://static.igem.org/mediawiki/2014/b/be/Risk_AssessmentUCL.png') center no-repeat;  
-
float:center;
+
    background-size:56%;
-
position:absolute;
+
-
width:50%;
+
-
margin:0 25%;
+
-
top:35%;
+
}
}
-
 
+
.soc-human {
-
 
+
     background: white url('https://static.igem.org/mediawiki/2014/e/eb/SociologicalImagUCL.png') center no-repeat;  
-
/* Individual Blocks */
+
     background-size:56%;
-
#team-human {
+
-
     background: url('https://static.igem.org/mediawiki/2014/f/f4/TeamissupersexyLine.png') center no-repeat;  
+
-
     background-size:100%;
+
-
    color:black;
+
}
}
-
.hover1:hover #team-human {
+
.sponsor-human {
-
     background: url('https://static.igem.org/mediawiki/2014/7/73/Teamissupersexy.png') center no-repeat;  
+
     background: white url('https://static.igem.org/mediawiki/2014/3/32/SponsorshipUCL.png') center no-repeat;  
-
     background-size:100%;
+
     background-size:56%;
-
    color:black;
+
-
}
+
-
 
+
-
#collaborations-human {
+
-
    background: url('https://static.igem.org/mediawiki/2014/2/21/CollabLineUCL.png') center no-repeat;
+
-
    background-size:100%;
+
-
    color:black;
+
}
}
-
.hover2:hover #collaborations-human {
+
.gallery-human {
-
     background: url('https://static.igem.org/mediawiki/2014/3/3d/10491123_10204437153717396_7991059471759774917_n.jpg') center no-repeat;  
+
     background: white url('https://static.igem.org/mediawiki/2014/5/55/GalleryUCL.png') center no-repeat;  
-
     background-size:100%;
+
     background-size:56%;
-
    color:black;
+
}
}
-
#risk-human {
+
.attributions-human {
-
     background: url('https://static.igem.org/mediawiki/2014/f/f3/UCL_clipboard_Line.png') center no-repeat;  
+
     background: white url('https://static.igem.org/mediawiki/2014/7/75/UCLAttributions_logo_transparent-01.png') center no-repeat;  
-
     background-size:100%;
+
     background-size:56%;
-
    color:black;
+
}
}
-
.hover3:hover #risk-human {
 
-
    background: url('https://static.igem.org/mediawiki/2014/d/d1/UCL_clipboard.png') center no-repeat;
 
-
    background-size:100%;
 
-
    color:black;
 
-
}
 
-
 
-
#soc-human {
 
-
    background: url('https://static.igem.org/mediawiki/2014/d/d5/Group_Social_UCL_Line.png') center no-repeat;
 
-
    background-size:100%;
 
-
    color:black;
 
-
}
 
-
.hover4:hover #soc-human {
 
-
    background: url('https://static.igem.org/mediawiki/2014/8/83/Group_social_350x450.png') center no-repeat;
 
-
    background-size:100%;
 
-
    color:black;
 
-
}
 
-
 
-
#sponsor-human {
 
-
    background: url('https://static.igem.org/mediawiki/2014/d/df/UCL_Eng_Logo_Line.png') center no-repeat;
 
-
    background-size:100%;
 
-
    color:black;
 
-
}
 
-
.hover5:hover #sponsor-human {
 
-
    background: url('https://static.igem.org/mediawiki/2014/1/1a/UCL_Eng_logo_2.png') center no-repeat;
 
-
    background-size:100%;
 
-
    color:black;
 
-
}
 
-
 
-
#gallery-human {
 
-
    background: url('https://static.igem.org/mediawiki/2014/3/32/UCL_Pile_of_Polariods_Line.png') center no-repeat;
 
-
    background-size:100%;
 
-
    color:black;
 
-
}
 
-
.hover6:hover #gallery-human {
 
-
        background: url('https://static.igem.org/mediawiki/2014/f/f7/UCL_Pile_of_Polaroids.png') center no-repeat;
 
-
        background-size:100%;
 
-
        color:black; 
 
-
}
 
-
 
-
 
-
/*Filler Blocks*/
 
-
#redd {
 
-
    background: red center no-repeat;
 
-
    background-size:100%;
 
-
    opacity:0.6;
 
-
}
 
-
#bluee {
 
-
    background: blue center no-repeat;
 
-
    background-size:100%;
 
-
    opacity:0.6;
 
-
}
 
-
#yelloww {
 
-
    background: yellow center no-repeat;
 
-
    background-size:100%;
 
-
    opacity:0.6;
 
-
}
 
-
 
</style>
</style>
<!--=================Javascript===================-->
<!--=================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 -->
<!-- This is to initialize the above js which aims to reorder box divs with no spaces -->
<script>
<script>
-
$(document).ready(function(){
+
var wall = new freewall("#grid");
-
$(function(){
+
wall.reset({
-
$("#grid").mason({
+
selector: '.box',
-
itemSelector: ".box",
+
animate: true,
-
ratio: 1.5,
+
cellW: 300,
-
sizes: [
+
cellH: 300,
-
[1,1],
+
onResize: function() {
-
[1,2],
+
wall.refresh();
-
                                        [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',
+
});
});
-
}); });
+
wall.fitWidth();
 +
// for scroll bar appear;
 +
$(window).trigger("resize");
</script>
</script>

Latest revision as of 03:03, 18 October 2014

Goodbye Azodye UCL iGEM 2014

Humans are the engine behind the machine that is our project, and it is through humans that we tell our story. Be it who we are or the who we've influenced this is were you will find anything and everything to do with the humans involved in this project.
Click on the banner below to see the full story of how we as a team engaged the public and ourselves, or click one of the boxes to see some of the more individual aspects of the humans in our project.

Story

Contact Us

University College London
Gower Street - London
WC1E 6BT
Biochemical Engineering Department
Phone: +44 (0)20 7679 2000
Email: ucligem2014@gmail.com

Follow Us

Retrieved from "http://2014.igem.org/Team:UCL/Humans"