Team:Oxford/layouttest

From 2014.igem.org

(Difference between revisions)
Line 56: Line 56:
     color: #CCC;
     color: #CCC;
   }
   }
-
 
   #search-controls {
   #search-controls {
Line 142: Line 141:
   }
   }
-
.left {margin-top:20px; width:10%; margin-left:5%; float:left;}
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
-
.test { background: #222222; width:40%; height:300px; float:left; padding: 10px 40px; opacity:0.8; border-radius:15px;}
+
-
.right {margin-top:20px; width:10%;float:left;}
+
-
 
+
-
 
+
   </style>
   </style>
   <script type="text/javascript">
   <script type="text/javascript">
   function iconleft(x) {
   function iconleft(x) {
-
     x.style.right="1.2%";
+
     x.style.left="6%";
   }
   }
   function iconnormal(x) {
   function iconnormal(x) {
-
     x.style.right="0.7%";
+
     x.style.left="9%";
   }
   }
-
 
   function DCMationbig(x) {
   function DCMationbig(x) {
     x.style.height="12.5%";
     x.style.height="12.5%";
Line 236: Line 230:
   }
   }
-
$(".left, .right").click(function () {
+
$(document).ready(function(){
-
     $(".test").animate({width: 'toggle'});;
+
  $("#Heading1").click(function(){
 +
    $("#DCMation1").animate({
 +
      opacity:'1',
 +
      height:'400px',
 +
      width:'400px',
 +
    });
 +
  });
 +
});
 +
 
 +
$(document).ready(function(){
 +
  $("#arrowr").click(function(){
 +
     $("#grey").animate({right:'-13%'}, "fast");
 +
  });
});
});
Line 248: Line 254:
   <div class="outer">
   <div class="outer">
-
   <div class="iGEMlogo" style="width:7.5%; position:absolute; top:0.7%; right:-0.5%;">
+
   <div class="iGEMlogo" style="width:6%; position:absolute; top:0.7%; right:-0.5%; z-index: 10;">
-
     <a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2014/4/49/Oxigen_IGEM.png" style="width:100%"/></a>
+
     <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>
   </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;" />
-
   <div class="fbicon" style="width:3.2%; height:5%; position:absolute; top:14.8%; right:0.7%; opacity: 0.6;" onmouseover=
+
  <div id="grey" style="width:13%; position:absolute; top:23%; right:-9.5%; z-index: 10;">
 +
    <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%;">
 +
    <div class="fbicon" style="position:absolute;width:23%; top:20%; left:9%; z-index: 10;" 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>
 +
    </div> 
 +
  <div class="twicon" style="position:absolute;width:23%; top:35%; left:9%; z-index: 10;" onmouseover=
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
-
     <a href="https://www.facebook.com/oxfordigem"><img src="https://static.igem.org/mediawiki/2014/8/88/OxigemIconfacebook.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="twicon" style="width:3%; position:absolute; top:22.9%; right:0.7%; opacity: 0.6;" onmouseover=
+
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
-
     <a href="https://twitter.com/OxfordiGEM" ><img src="https://static.igem.org/mediawiki/2014/3/3d/OxigemIgemtwitter.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="yticon" style="width:3%; position:absolute; top:30.6%; right:0.7%; opacity: 0.6;" onmouseover=
+
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
       "iconleft(this)" onmouseout="iconnormal(this)" border="0">
-
     <a href="https://www.youtube.com/channel/UCx1QJHqQcZ09aT97V2f4Xdw"><img src="https://static.igem.org/mediawiki/2014/e/ea/OxigemIconyoutube.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="width:3%; position:absolute; top:38.3%; right:0.7%; opacity: 0.6;" 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"><img src="https://static.igem.org/mediawiki/2014/3/35/OxigemIconmail.png" style="width:100%;" /></a>
+
   </div>
   </div>
 +
</div>
 +
    <div class="inner">
 +
      <img src="https://static.igem.org/mediawiki/2014/6/68/Oxigemmenubg.png" class="supercoil">
-
 
+
      <div class="Heading" id="Heading1" style="top: 72%; left: 35.5%; width:11%;" onclick="DCMation()" onmouseover=
-
    <div class="inner">
+
-
      <img src="https://static.igem.org/mediawiki/2014/e/e3/OxigemSupercoiltop.png" class="supercoil">
+
-
 
+
-
 
+
-
 
+
-
 
+
-
      <img src="https://static.igem.org/mediawiki/2014/d/dd/OxigemSupercoilbottom.png" class="supercoil" style="margin-top:-4.035%; margin-right:17.52%; width:65.15%;">
+
-
 
+
-
 
+
-
 
+
-
 
+
-
      <div class="Heading" 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=
-
       "https://static.igem.org/mediawiki/2014/2/22/OxigemDCMationheading.png" style="width: 100%;"></a></div>
+
       "https://static.igem.org/mediawiki/2014/2/22/OxigemDCMationheading.png" style="width: 100%;" ></a></div>
       <div class="Heading" style="top: 77.8%; left: 53%; width:11.1%;" onmouseover="Achievementsbig(this)" onmouseout=
       <div class="Heading" style="top: 77.8%; left: 53%; width:11.1%;" onmouseover="Achievementsbig(this)" onmouseout=
Line 331: Line 331:
         style="width: 100%;"></a>
         style="width: 100%;"></a>
       </div>
       </div>
-
 
-
<div style="width:100%; margin-top:-31%; margin-left:12%; position:absolute;">
 
-
<img class="left" src="https://static.igem.org/mediawiki/2014/7/7b/OxigemLeft.png">
 
-
<div class="test"><font color="white">TEST</font></div>
 
-
<img class="right" src="https://static.igem.org/mediawiki/2014/7/7b/OxigemRight.png">
 
-
</div>
 
       <div id="DCMationwrap" onClick="DCMationHide()"
       <div id="DCMationwrap" onClick="DCMationHide()"
-
         style="background: rgba(0,0,0,.3); position: absolute; 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=
-
         "top: 15%; left: 33%; width:24%; position:absolute;">
+
         "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 02:54, 2 September 2014

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