Team:Oxford/layouttest

From 2014.igem.org

(Difference between revisions)
Line 5: Line 5:
   @import url(http://fonts.googleapis.com/css?family=PT+Serif|Open+Sans:300italic,400,300);
   @import url(http://fonts.googleapis.com/css?family=PT+Serif|Open+Sans:300italic,400,300);
 +
 +
/* Enforce a lack of horizontal scrollbar so that the social section doesn't mess with the viewport. */
 +
  html, body {
 +
    max-width: 100%;
 +
    overflow-x: hidden;
 +
  }
   body {
   body {
Line 37: Line 43:
     display:none;
     display:none;
   }
   }
 +
 +
  #menubar {
 +
    width: auto;
 +
    margin-top:1%;
 +
}
   #menubar {
   #menubar {
Line 55: Line 66:
   #menubar:hover li a {
   #menubar:hover li a {
     color: #CCC;
     color: #CCC;
 +
  }
 +
 +
  #menubar ul li:last-child {
 +
    display:none;
   }
   }
Line 223: Line 238:
     x.style.width="38%";
     x.style.width="38%";
   }
   }
 +
 +
   function DCMation() {
   function DCMation() {
     document.getElementById('DCMationwrap').style.display = "block";
     document.getElementById('DCMationwrap').style.display = "block";
Line 229: Line 246:
     document.getElementById('DCMationwrap').style.display = "none";
     document.getElementById('DCMationwrap').style.display = "none";
   }
   }
 +
 +
 +
 +
$(document).ready(function(){
$(document).ready(function(){
Line 243: Line 264:
   $("#arrowr").click(function(){
   $("#arrowr").click(function(){
     $("#grey").animate({right:'-13%'}, "fast");
     $("#grey").animate({right:'-13%'}, "fast");
 +
  });
 +
});
 +
$(document).ready(function(){
 +
  $("#arrowl").click(function(){
 +
    $("#grey").animate({right:'-9%'}, "fast");
 +
  });
 +
});
 +
$(document).ready(function(){
 +
  $("#split").click(function(){
 +
    $("#right").animate({left:'85%'});
 +
    $("#left").animate({left:'3.1%'});
 +
    $("#abstract").animate({width:'69.9%', left:'15.1%'});
 +
  });
 +
});
 +
 +
$(document).ready(function(){
 +
  $("#x").click(function(){
 +
    $("#right").animate({left:'50%'});
 +
    $("#left").animate({left:'38.1%'});
 +
    $("#abstract").animate({width:'0%', left:'50%'});
   });
   });
});
});
Line 254: Line 295:
   <div class="outer">
   <div class="outer">
-
   <div class="iGEMlogo" style="width:6%; position:absolute; top:0.7%; right:-0.5%; z-index: 10;">
+
   <div class="iGEMlogo" style="width:6.5%; position:absolute; top:0.7%; right:-0.5%;">
-
     <a href="https://2014.igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/b/bf/Oxigem_IGEM.png" style="width:100%"/></a>
+
     <a href="https://2014.igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/98/OxigemiGEM.png" style="width:100%"/></a>
   </div>
   </div>
-
   <img id="arrowl" src="https://static.igem.org/mediawiki/2014/7/77/OxigemArrowl.png" style="position:absolute; width:2.5%; top:50%;right:0.5%; opacity:0.6;" />
+
   <a href="#"><img id="arrowl" src="https://static.igem.org/mediawiki/2014/7/77/OxigemArrowl.png" style="position:absolute; width:2.5%; top:50%;right:0.5%; opacity:0.6; z-index:4;" /></a>
-
   <div id="grey" style="width:13%; position:absolute; top:23%; right:-9.5%; z-index: 10;">
+
   <div id="grey" style="width:13%; position:absolute; top:23%; right:-13%; z-index:4;">
     <img src="https://static.igem.org/mediawiki/2014/0/0d/OxigemGrey.png" style="position:relative;width:100%;" />
     <img src="https://static.igem.org/mediawiki/2014/0/0d/OxigemGrey.png" style="position:relative;width:100%;" />
-
     <img id="arrowr" src="https://static.igem.org/mediawiki/2014/0/03/OxigemArrowr.png" style="position:absolute;width:16%;top:5%;left:10%;">
+
     <a href="#"><img id="arrowr" src="https://static.igem.org/mediawiki/2014/0/03/OxigemArrowr.png" style="position:absolute;width:16%;top:5%;left:10%;"></a>
-
     <div class="fbicon" style="position:absolute;width:23%; top:20%; left:9%; z-index: 10;" onmouseover=
+
     <div class="fbicon" style="position:absolute;width:23%; top:20%; left:9%;" onmouseover=
       "iconleft(this)" onmouseout="iconnormal(this)" border="0"><a href="https://www.facebook.com/oxfordigem" target="_blank" style="background-image: none;"><img src="https://static.igem.org/mediawiki/2014/8/88/OxigemIconfacebook.png" style="width:100%;" /></a>
       "iconleft(this)" onmouseout="iconnormal(this)" border="0"><a href="https://www.facebook.com/oxfordigem" target="_blank" style="background-image: none;"><img src="https://static.igem.org/mediawiki/2014/8/88/OxigemIconfacebook.png" style="width:100%;" /></a>
     </div>   
     </div>   
-
   <div class="twicon" style="position:absolute;width:23%; top:35%; left:9%; z-index: 10;" onmouseover=
+
   <div class="twicon" style="position:absolute;width:23%; top:35%; left:9%;" onmouseover=
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
     <a href="https://twitter.com/OxfordiGEM" target="_blank" style="background-image: none;"><img src="https://static.igem.org/mediawiki/2014/3/3d/OxigemIgemtwitter.png" style="width:100%;" /></a>
     <a href="https://twitter.com/OxfordiGEM" target="_blank" style="background-image: none;"><img src="https://static.igem.org/mediawiki/2014/3/3d/OxigemIgemtwitter.png" style="width:100%;" /></a>
   </div>
   </div>
-
   <div class="yticon" style="position:absolute;width:23%; top:50%; left:9%; z-index: 10;" onmouseover=
+
   <div class="yticon" style="position:absolute;width:23%; top:50%; left:9%;" onmouseover=
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
     <a href="https://www.youtube.com/channel/UCx1QJHqQcZ09aT97V2f4Xdw" target="_blank" style="background-image: none;"><img src="https://static.igem.org/mediawiki/2014/e/ea/OxigemIconyoutube.png" style="width:100%;" /></a>
     <a href="https://www.youtube.com/channel/UCx1QJHqQcZ09aT97V2f4Xdw" target="_blank" style="background-image: none;"><img src="https://static.igem.org/mediawiki/2014/e/ea/OxigemIconyoutube.png" style="width:100%;" /></a>
   </div>
   </div>
-
   <div class="oxicon" style="position:absolute;width:23%; top:65%; left:9%; z-index: 10;" onmouseover=
+
   <div class="oxicon" style="position:absolute;width:23%; top:65%; left:9%;" onmouseover=
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
     <a href="http://www.ox.ac.uk" target="_blank"><img src="https://static.igem.org/mediawiki/2014/8/8d/Iconoxford.png" style="width:100%;" /></a>
     <a href="http://www.ox.ac.uk" target="_blank"><img src="https://static.igem.org/mediawiki/2014/8/8d/Iconoxford.png" style="width:100%;" /></a>
   </div>
   </div>
-
   <div class="mailicon" style="position:absolute;width:23%; top:80%; left:9%; z-index: 10;" onmouseover=
+
   <div class="mailicon" style="position:absolute;width:23%; top:80%; left:9%;" onmouseover=
       "iconleft(this)" onmouseout="iconnormal(this)" border="0" >
       "iconleft(this)" onmouseout="iconnormal(this)" border="0" >
     <a href="mailto:oxfordigem@bioch.ox.ac.uk" target="_blank" style="background-image: none;"><img src="https://static.igem.org/mediawiki/2014/3/35/OxigemIconmail.png" style="width:100%;" /></a>
     <a href="mailto:oxfordigem@bioch.ox.ac.uk" target="_blank" style="background-image: none;"><img src="https://static.igem.org/mediawiki/2014/3/35/OxigemIconmail.png" style="width:100%;" /></a>
Line 284: Line 325:
     <div class="inner">
     <div class="inner">
 +
    <div style="position: relative; width:65% left: 0; top: 0;">
 +
      <img src="https://static.igem.org/mediawiki/2014/9/97/OxigemUp.png" style="position: relative; width:65%; left: 17%; top: 0;">
-
       <img src="https://static.igem.org/mediawiki/2014/9/97/OxigemUp.png" class="supercoil">
+
       <img id="left" src="https://static.igem.org/mediawiki/2014/7/7b/OxigemLeft.png" style="position: absolute; width:12%; top: 18%; left: 38.1%;">
 +
      <img id="right" src="https://static.igem.org/mediawiki/2014/7/7b/OxigemRight.png" style="position: absolute; width:12%; top: 18%; left: 50%;">
 +
   
 +
      <div id="abstract" style="position: absolute; width:0%; height:100%; top: 0%; left: 50%; background-color: #000000; opacity:0.6; z-index:10; border-radius:15px;">
 +
      <div id="abstract2">
 +
<img id="x" src="https://static.igem.org/mediawiki/2014/a/a5/X.png" style="position:absolute;right:0%;" />
 +
      </div>
 +
      </div>
-
       <img src="https://static.igem.org/mediawiki/2014/7/7b/OxigemLeft.png" class="supercoil" style="width:10%; position:absolute; top:10%; left:30%;">
+
       <img id="down" src="https://static.igem.org/mediawiki/2014/1/1c/OxigemDown.png" style="position: absolute; width:65%; top: 0; left: 17%;">
-
       <img src="https://static.igem.org/mediawiki/2014/7/7b/OxigemRight.png" class="supercoil" style="width:10%;position:absolute;top:10%; left:40%;">
+
       <a href="#"><img id="split" src="https://static.igem.org/mediawiki/2014/2/21/OxigemBlank.png" style="position: absolute; width:24%; top:35%; left: 38%;" /></a>
-
      <img src="https://static.igem.org/mediawiki/2014/1/1c/OxigemDown.png" class="supercoil" style="margin-top:-38.5%;">
 
 +
    </div>
       <div class="Heading"  id="Heading1" style="top: 72%; left: 35.5%; width:11%;" onclick="DCMation()" onmouseover=
       <div class="Heading"  id="Heading1" style="top: 72%; left: 35.5%; width:11%;" onclick="DCMation()" onmouseover=
       "DCMationbig(this)" onmouseout="DCMationnormal(this)" border="0"><a href="#"><img src=
       "DCMationbig(this)" onmouseout="DCMationnormal(this)" border="0"><a href="#"><img src=
Line 341: Line 391:
         style="background: rgba(0,0,0,.4); position: fixed; top:0; left: 0; right: 0; bottom: 0; display:none">
         style="background: rgba(0,0,0,.4); position: fixed; top:0; left: 0; right: 0; bottom: 0; display:none">
         <div class="Heading" id="DCMationpopup" style=
         <div class="Heading" id="DCMationpopup" style=
-
         "left: 37.15%; width:26%; position:absolute; margin-top:12.5%">
+
         "left: 37.15%; width:26%; position:absolute; margin-top:12.5%;">
           <img src="https://static.igem.org/mediawiki/2014/3/3c/OxigemDcmationsub.png" style="width: 100%;">
           <img src="https://static.igem.org/mediawiki/2014/3/3c/OxigemDcmationsub.png" style="width: 100%;">

Revision as of 10:25, 3 September 2014

Retrieved from "http://2014.igem.org/Team:Oxford/layouttest"