Team:Manchester/Outreachtest

From 2013.igem.org

(Difference between revisions)
 
(16 intermediate revisions not shown)
Line 1: Line 1:
{{:Team:Manchester/layout/noheader}}
{{:Team:Manchester/layout/noheader}}
-
{{:Team:Manchester/Navbartest}}
 
-
{{:Team:Manchester/imageSlider}}
 
<html>
<html>
<head>
<head>
-
<title> Safety </title>
+
<script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
 +
<script type='text/javascript' src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 +
 
 +
<script type='text/javascript' >
 +
function showImage()
 +
{
 +
  $(".slider #1").fadeIn(300);
 +
  $(".slider #1").delay(5000).fadeOut(300);
 +
 
 +
  var size = $(".slider img").size();
 +
  var count = 2;
 +
 
 +
  setInterval(function() {
 +
    $(".slider #"+count).fadeIn(300);
 +
    $(".slider #"+count).delay(5000).fadeOut(300);
 +
 +
if(count == size){
 +
    count = 1;
 +
    }else{
 +
  count = count + 1;}
 +
  },5000);
 +
}
 +
 
 +
function hoverLink1()
 +
{
 +
  $("#block #link1").hover(function() {
 +
      $("#block #image1").toggleClass("expand");
 +
  });
 +
  $("#block #link1").mouseenter(function() {
 +
    $("#block #image1").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link1").mouseleave(function() {
 +
    $("#block #image1").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 
 +
function hoverImage1()
 +
{
 +
  $("#block #image1").mouseenter(function() {
 +
    $("#block #image1").css({marginLeft: "40px"});
 +
  });
 +
    $("#block #image1").mouseleave(function() {
 +
    $("#block #image1").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 
 +
function hoverLink2()
 +
{
 +
  $("#block #link2").hover(function() {
 +
  $("#block #image2").toggleClass("expand");
 +
  });
 +
  $("#block #link2").mouseenter(function() {
 +
    $("#block #image2").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link2").mouseleave(function() {
 +
    $("#block #image2").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 
 +
function hoverImage2()
 +
{
 +
  $("#block #image2").mouseenter(function() {
 +
    $("#block #image2").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #image2").mouseleave(function() {
 +
    $("#block #image2").css({marginLeft: "50px"});
 +
          });
 +
}
 +
 
 +
function hoverLink3()
 +
{
 +
  $("#block #link3").hover(function() {
 +
  $("#block #image3").toggleClass("expand");
 +
  });
 +
  $("#block #link3").mouseenter(function() {
 +
    $("#block #image3").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link3").mouseleave(function() {
 +
    $("#block #image3").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 
 +
function hoverImage3()
 +
{
 +
  $("#block #image3").mouseenter(function() {
 +
    $("#block #image3").css({marginLeft: "40px"});
 +
  });
 +
    $("#block #image3").mouseleave(function() {
 +
    $("#block #image3").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 
 +
function hoverLink4()
 +
{
 +
  $("#block #link4").hover(function() {
 +
  $("#block #image4").toggleClass("expand");
 +
  });
 +
  $("#block #link4").mouseenter(function() {
 +
    $("#block #image4").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link4").mouseleave(function() {
 +
    $("#block #image4").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 
 +
function hoverImage4()
 +
{
 +
  $("#block #image4").mouseenter(function() {
 +
    $("#block #image4").css({marginLeft: "40px"});
 +
  });
 +
    $("#block #image4").mouseleave(function() {
 +
    $("#block #image4").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 
 +
function hoverLink5()
 +
{
 +
  $("#block #link5").hover(function() {
 +
  $("#block #image5").toggleClass("expand");
 +
  });
 +
  $("#block #link5").mouseenter(function() {
 +
    $("#block #image5").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link5").mouseleave(function() {
 +
    $("#block #image5").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 
 +
function hoverImage5()
 +
{
 +
  $("#block #image5").mouseenter(function() {
 +
    $("#block #image5").css({marginLeft: "40px"});
 +
  });
 +
    $("#block #image5").mouseleave(function() {
 +
    $("#block #image5").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 
 +
function hoverLink6()
 +
{
 +
  $("#block #link6").hover(function() {
 +
  $("#block #image6").toggleClass("expand");
 +
  });
 +
  $("#block #link6").mouseenter(function() {
 +
    $("#block #image6").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link6").mouseleave(function() {
 +
    $("#block #image6").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 
 +
function hoverImage6()
 +
{
 +
  $("#block #image6").mouseenter(function() {
 +
    $("#block #image6").css({marginLeft: "40px"});
 +
  });
 +
    $("#block #image6").mouseleave(function() {
 +
    $("#block #image6").css({marginLeft: "50px"});
 +
  });
 +
}
 +
</script>
<style type="text/css">
<style type="text/css">
Line 74: Line 232:
width:950px;
width:950px;
height:1600px;
height:1600px;
 +
}
 +
 +
.container
 +
{
 +
height:90px;
 +
width:980px;
 +
margin:0 auto;
 +
background-color:#F2F2F2;
 +
position:absolute;
 +
top:15px;
 +
left:0;
 +
z-index:300;
 +
}
 +
 +
#block
 +
{
 +
float:left;
 +
width:150px;
 +
margin:0 6px;
 +
 +
}
 +
 +
#block a
 +
{
 +
display:block;
 +
text-decoration: none;
 +
background-color: #660099;
 +
color:white;
 +
font-size: 17px;
 +
font-family: Trebuchet MS;
 +
font-weight: bold;
 +
border-radius: 5px;
 +
width: 140px;
 +
margin:0 auto;
 +
text-align: center;
 +
padding: 3px;
 +
color:#F2F2F2;
 +
border:1px solid #4C0082;
 +
 +
transition-duration:0.1s;
 +
transition-timing-function:linear;
 +
}
 +
 +
#block img
 +
{
 +
transition-duration:0.1s;
 +
transition-timing-function:linear;
 +
margin:0 50px;
 +
display:block;
 +
}
 +
 +
#block img:hover
 +
{
 +
width:65px;
 +
height:65px;
 +
}
 +
 +
#block .list
 +
{
 +
margin:0;
 +
}
 +
 +
#block .list li
 +
{
 +
display:block;
 +
list-style:none;
 +
}
 +
 +
#block .list .submenu, .submenu1, .submenu2
 +
{
 +
position:relative;
 +
display:none;
 +
clear: both;
 +
margin:0;
 +
display: none;
 +
}
 +
 +
#block .list .submenu li
 +
{
 +
list-style:none;
 +
display: block;
 +
margin:0;
 +
float: none;
 +
}
 +
 +
#block .list .submenu li a
 +
{
 +
clear:both;
 +
display:block;
 +
border:1px solid #4C0082;
 +
margin:0 auto;
 +
width:130px;
 +
font-size: 13px;
 +
font-family: Trebuchet MS;
 +
font-weight: bold;
 +
color:#f2f2f2;
 +
}
 +
 +
#block .list li .submenu li:hover .submenu1 a
 +
{
 +
clear:both;
 +
display:block;
 +
border:1px solid #4C0082;
 +
margin:0 auto;
 +
width:100px;
 +
font-size: 12px;
 +
font-family: Trebuchet MS;
 +
font-weight: bold;
 +
color:black;
 +
background:#ffcc33;
 +
}
 +
 +
#block .list .submenu a:hover
 +
{
 +
display:block;
 +
background:#A901DB;
 +
}
 +
 +
#block .list li:hover .submenu
 +
{
 +
display:block;
 +
}
 +
 +
.submenu li:hover .submenu1
 +
{
 +
display:block;
 +
position:absolute;
 +
left:145px;
 +
top:0;
 +
}
 +
 +
.submenu li:hover .submenu2
 +
{
 +
display:block;
 +
position:absolute;
 +
left:145px;
 +
top:28px;
 +
}
 +
 +
#block .list li .submenu li:hover .submenu2 a
 +
{
 +
clear:both;
 +
display:block;
 +
border:1px solid #4C0082;
 +
margin:0 auto;
 +
width:150px;
 +
font-size: 12px;
 +
font-family: Trebuchet MS;
 +
font-weight: bold;
 +
color:black;
 +
background:#FFCC33;
 +
}
 +
 +
.expand
 +
{
 +
width:65px;
 +
height:65px;
}
}
Line 86: Line 401:
padding:10px;
padding:10px;
background-color:white;
background-color:white;
 +
 +
-webkit-border-radius: 10px;
 +
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
}
 +
 +
.slider
 +
{
 +
position:absolute;
 +
top:5;
 +
left:200px;
 +
width:600px;
 +
height:300px;
 +
overflow:hidden;
 +
z-index:200;
 +
-webkit-border-radius: 10px;
 +
border-radius: 10px;
 +
 +
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
}
 +
 +
.slider img
 +
{
 +
display:none;
 +
width:600px;
 +
height:300px;
 +
}
 +
 +
.text
 +
{
 +
width:900px;
 +
margin:0;
 +
margin-top:310px;
 +
margin-left:20px;
 +
}
 +
 +
.text p
 +
{
 +
margin:5px 5px 5px 5px;
 +
line-height:24px;
 +
background:#E6E6E6;
 +
text-align:justify;
 +
color:black;
 +
font-family:Trebuchet MS;
 +
font-size:14px;
 +
padding:10px;
 +
 +
-webkit-border-radius: 10px;
 +
border-radius: 10px;
 +
 +
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 +
}
}
Line 95: Line 465:
</head>
</head>
-
<body>
+
<body onLoad="showImage(); hoverLink1(); hoverLink2(); hoverLink3(); hoverImage1(); hoverImage2(); hoverImage3();
 +
              hoverLink4(); hoverImage4(); hoverLink5(); hoverImage5(); hoverLink6(); hoverImage6();">
<div class="header">
<div class="header">
Line 110: Line 481:
           <div class="central">  
           <div class="central">  
-
    <a><img src="https://static.igem.org/mediawiki/2013/6/6e/Human.png"></a>
+
    <a><img src="https://static.igem.org/mediawiki/2013/3/3c/Stars.png"></a>
  </div>  
  </div>  
Line 121: Line 492:
<div class="global">
<div class="global">
 +
<div class="container">
 +
        <div id="block">
 +
              <img src="https://static.igem.org/mediawiki/2013/7/74/Home.gif" width="50" height="50" id="image1"/>
 +
      <a href="#" id="link1">Home</a>
 +
        </div>
 +
        <div id="block">
 +
            <img src="https://static.igem.org/mediawiki/2013/e/e6/Group.gif" width="50" height="50" id="image2"/>
 +
                  <ul class="list">
 +
                    <li><a href="#" id="link2">About</a>
 +
                  <ul class="submenu" id="sub1">
 +
        <li><a href="#" id="link2">Our Team</a></li>
 +
                        <li><a href="#" id="link2">Team Profile</a></li>
 +
  </ul>
 +
                    </li>
 +
                  </ul>
 +
        </div>
 +
       
 +
        <div id="block">
 +
            <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image3"/>
 +
              <ul class="list">
 +
                  <li><a href="#" id="link3">Project</a>
 +
                <ul class="submenu">
 +
    <li><a href="#" id="link3">Aim</a></li>
 +
    <li><a href="#" id="link3">Notebook</a></li>
 +
                            <li><a href="#" id="link3">Lab Book</a></li>
 +
                    <li><a href="#" id="link3">Contributions</a></li>
 +
    <li><a href="#" id="link3">Safety</a></li>
 +
                            <li><a href="#" id="link3">Judging</a></li>                    
 +
    <li><a href="#" id="link3">Attributions</a></li>
 +
        </ul>
 +
                </li>
 +
              </ul>
 +
        </div>
 +
 +
        <div id="block">
 +
            <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image6"/>
 +
              <ul class="list">
 +
                  <li><a href="#" id="link6">Modelling</a>
 +
                <ul class="submenu">
 +
    <li><a href="#" id="link6">Fatty Acid Production</a></li>
 +
    <li><a href="#" id="link6">Parameter Estimation</a></li>
 +
                            <li><a href="#" id="link6">Modelling Collaboration</a></li>
 +
        </ul>
 +
                </li>
 +
              </ul>
 +
        </div>
 +
 +
        <div id="block">
 +
            <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image4"/>
 +
            <ul class="list">
 +
                  <li><a href="#" onclick="javascript:openMenu('sub3')" id="link4">Human Practices</a>
 +
                <ul class="submenu" id="sub3">
 +
    <li><a href="#" id="link4">Public Outreach</a>
 +
<ul class="submenu1" >
 +
  <a href="#" id="link4">Science Stars</a></li>
 +
  <a href="#" id="link4">Open day</a></li>
 +
</ul>
 +
    </li>
 +
                    <li><a href="#" id="link4">Ethics</a>
 +
<ul class="submenu2" id="sub3">
 +
    <a href="#" id="link4">Environmental Impact</a></li>
 +
    <a href="#" id="link4">Economical Impact</a></li>
 +
    <a href="#" id="link4">Impact Management</a></li>
 +
    <a href="#" id="link4">Conclusion</a></li>
 +
</ul>
 +
    </li>
 +
    <li><a href="#" id="link4">Business Plan</a></li>
 +
                    <li><a href="#" id="link4">Knowledge Deficit Assumption</a></li>
 +
                            <li><a href="#" id="link4">Conferences and Discussions</a></li>
 +
                            <li><a href="#" id="link4">Social Media</a></li>
 +
                </ul>
 +
                  </li>
 +
            </ul>
 +
        </div>
 +
 +
        <div id="block">
 +
            <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image5"/>
 +
            <a href="#" id="link5">Sponsorship</a>
 +
        </div>
 +
 +
</div>
 +
 +
<div class="wrapper">
 +
            <div class="slider">
 +
                  <img src="https://static.igem.org/mediawiki/2013/a/a6/Team1.jpg"    id="1"/>
 +
          <img src="https://static.igem.org/mediawiki/2013/6/6b/Modelling.png" id="2"/>
 +
          <img src="https://static.igem.org/mediawiki/2013/c/ce/Humanpractice.jpg" id="3"/>
 +
          <img src="https://static.igem.org/mediawiki/2013/0/00/Sponsors.jpg" id="4"/>
 +
          <img src="https://static.igem.org/mediawiki/2013/d/d0/Judging.jpg" id="5"/>
 +
                  <img src="https://static.igem.org/mediawiki/2013/b/bb/Attributions1.jpg" id="6"/>
 +
          </div>
 +
 +
          <div class="text">
 +
          <p>
 +
          Incididunt ut labore et dolore magna
 +
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 +
ullamco laboris nisi ut aliquip ex ea commodo consequat.
 +
Duis aute irure dolor in reprehenderit in voluptate velit
 +
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
 +
occaecat cupidatat non proident, sunt in culpa qui officia
 +
deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,
 +
consectetur adipisicing elit, ed do eiusmod tempor incididunt
 +
ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation
 +
ullamco laboris nisi ut aliquip ex ea commodo consequat.
 +
Duis aute irure dolor in reprehenderit in voluptate velit
 +
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 +
ullamco laboris nisi ut aliquip ex ea commodo consequat.
 +
Duis aute irure dolor in reprehenderit in voluptate velit
 +
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
 +
occaecat cupidatat non proident, sunt in culpa qui officia
 +
deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,
 +
consectetur adipisicing elit, ed do eiusmod tempor incididunt
 +
ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation
 +
ullamco laboris nisi ut aliquip ex ea commodo consequat.
 +
Duis aute irure dolor in reprehenderit in voluptate velit
 +
          </p>
 +
          </div>
 +
</div>
</div>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 03:22, 29 July 2013

Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, ed do eiusmod tempor incididunt ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, ed do eiusmod tempor incididunt ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit

Retrieved from "http://2013.igem.org/Team:Manchester/Outreachtest"