Team:Groningen/TESTPAGE2

From 2013.igem.org

(Difference between revisions)
Line 3: Line 3:
<!-- Begin floating menu code-->
<!-- Begin floating menu code-->
-
<head>
+
<html>
<style>
<style>
-
div.floating-menu {position:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150px;z-index:100;}
+
-
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
+
body {
 +
  background: #e5e5e7;
 +
}
 +
 
 +
 
 +
nav {
 +
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
 +
  line-height: 1.5;
 +
  width: 200px;
 +
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
 +
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
 +
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
 +
  position: fixed;
 +
}
 +
 +
.menu-item {
 +
  background: #fff;
 +
  width: 200px;
 +
}
 +
 
 +
/*Menu Header Styles*/
 +
.menu-item h4 {
 +
  border-bottom: 1px solid rgba(0,0,0,0.3);
 +
  border-top: 1px solid rgba(255,255,255,0.2);
 +
  color: #fff;
 +
  font-size: 15px;
 +
  font-weight: 500;
 +
  padding: 7px 12px;
 +
 
 +
  /*Gradient Heb deze site gebruikt om dit te maken: http://www.colorzilla.com/gradient-editor/*/
 +
  background: #0047ab; /* Old browsers */
 +
background: -moz-linear-gradient(left, #0047ab 33%, #258dc8 100%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, right top, color-stop(33%,#0047ab), color-stop(100%,#258dc8)); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(left, #0047ab 33%,#258dc8 100%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(left, #0047ab 33%,#258dc8 100%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(left, #0047ab 33%,#258dc8 100%); /* IE10+ */
 +
background: linear-gradient(to right, #0047ab 33%,#258dc8 100%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0047ab', endColorstr='#258dc8',GradientType=1 ); /* IE6-9 */
 +
}
 +
 
 +
.menu-item:hover ul {
 +
  height: 93px;
 +
}
 +
 
 +
.menu-item h4:hover { 
 +
  background: rgb(0,71,171); /* Old browsers */
 +
background: -moz-linear-gradient(left, rgba(0,71,171,1) 100%, rgba(125,185,232,1) 100%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, right top, color-stop(100%,rgba(0,71,171,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(left, rgba(0,71,171,1) 100%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(left, rgba(0,71,171,1) 100%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(left, rgba(0,71,171,1) 100%,rgba(125,185,232,1) 100%); /* IE10+ */
 +
background: linear-gradient(to right, rgba(0,71,171,1) 100%,rgba(125,185,232,1) 100%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0047ab', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
 +
}
 +
 
 +
/*ul Styles*/
 +
.menu-item ul {
 +
  background: #fff;
 +
  font-size: 13px;
 +
  line-height: 30px;
 +
  height: 0px;
 +
  list-style-type: none;
 +
  overflow: hidden;
 +
  padding: 0px;
 +
 
 +
  /*Animation*/
 +
  -webkit-transition: height 1s ease;
 +
    -moz-transition: height 1s ease;
 +
      -o-transition: height 1s ease;
 +
      -ms-transition: height 1s ease;
 +
          transition: height 1s ease;
 +
}
 +
 +
.menu-item ul a {
 +
  margin-left: 20px;
 +
  text-decoration: none;
 +
  color: #aaa;
 +
  display: block;
 +
  width: 200px;
 +
}
 +
 +
/*li Styles*/
 +
.menu-item li {
 +
  border-bottom: 1px solid #eee;
 +
}
 +
 +
.menu-item li:hover {
 +
  background: #eee;
 +
}
 +
 
 +
/*First Item Styles*/
 +
.alpha p {
 +
    font-size: 13px;
 +
    padding: 8px 12px;
 +
    color: #aaa;
 +
}
 +
 
 +
.menu-item h4 a {
 +
  color: white;
 +
  display: block;
 +
  text-decoration: none;
 +
  width: 200px;
 +
}
</style>
</style>
-
<div class="floating-menu">
+
 
-
<h3>Menu</h3>
+
 
-
<li><a href="#home">Home</a></li>
+
<nav>
-
<li><a href="#news">News</a></li>
+
    <div class="menu-item alpha">
-
<li><a href="#contact">Contact</a></li>
+
      <h4><a href="#">Home</a></h4>
-
<li><a href="#about">About</a></li>
+
      <p>Lorem ipsum dolor sit...</p>
-
</div>
+
    </div>
-
</head>
+
     
-
</ul>
+
    <div class="menu-item">
-
</body>
+
      <h4><a href="#">Team</a></h4>
 +
      <ul>
 +
        <li><a href="#">iGEM</a></li>
 +
        <li><a href="#">Subs</a></li>
 +
      </ul>
 +
    </div>
 +
     
 +
    <div class="menu-item">
 +
      <h4><a href="#">Project</a></h4>
 +
      <ul>
 +
        <li><a href="#">Discription</a></li>
 +
        <li><a href="#">other stuff</a></li>
 +
      </ul>
 +
    </div>
 +
     
 +
    <div class="menu-item">
 +
      <h4><a href="#">Modeling</a></h4>
 +
      <ul>
 +
        <li><a href="#">agenda</a></li>
 +
        <li><a href="#">total waiting time</a></li>
 +
      </ul>
 +
    </div>
 +
</nav>
 +
</html>
 +
 
<!-- Einde floating menu code-->
<!-- Einde floating menu code-->

Revision as of 14:31, 16 July 2013



<head> <script type="text/javascript"> var image1 = new Image() image1.src = "Groningen_team.png" var image2 = new Image() image2.src = "2013_allBlack_BIG_corr.png" var image3 = new Image() image3.src = "" </script> </head> <body>

<img src="Groningen_team.png" width="900px" height="302px%" name="slide" />

<script type="text/javascript"> 

       var step=1;
       function slideit()
       {
           document.images.slide.src = eval("image"+step+".src");
           if(step<2)
               step++;
           else
               step=1;
           setTimeout("slideit()",4000);
       }
       slideit();

</script> </body>




<script>(function(d, s, id) { 

 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>




</html>



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at fringilla sem, ac pulvinar risus. Praesent dapibus nulla ac enim vulputate, quis porttitor metus porttitor. Vestibulum aliquam eros purus, vel aliquet lacus varius id. Phasellus rhoncus mi in accumsan pellentesque. Nam turpis lectus, scelerisque at viverra ut, placerat sagittis tellus. Vestibulum tincidunt lectus quis blandit porttitor. Donec vel odio eu sem fermentum imperdiet. Sed at mollis justo, vitae dignissim est. Donec nec est in velit posuere interdum a et nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nec massa sed orci porta eleifend. Pellentesque ullamcorper lacus nisl, vel interdum mi posuere quis.

Mauris id suscipit elit. Etiam id augue consectetur tortor ultricies volutpat eu ut lorem. Morbi tristique condimentum lacus non interdum. Quisque felis augue, sodales et sem quis, molestie lacinia orci. Nam purus magna, lobortis eget sagittis ac, rutrum quis turpis. Duis a arcu et lectus fermentum feugiat elementum sit amet erat. In at nibh et erat eleifend rhoncus vel eu nisi. Suspendisse semper interdum velit sit amet laoreet. Vivamus vitae mi fermentum, gravida odio vitae, mattis diam. Vivamus pharetra non felis at blandit. Nulla malesuada, libero nec condimentum pulvinar, magna nulla vulputate erat, in hendrerit nibh urna ut leo. Curabitur gravida ligula diam, ut fermentum nulla tincidunt sit amet. Morbi gravida turpis eu sem ultricies ullamcorper. Aliquam erat volutpat. Mauris eget risus nec massa hendrerit consequat. Fusce eget est faucibus, volutpat lectus et, tincidunt sapien.

Nullam dui enim, sagittis sit amet auctor nec, blandit eu augue. Pellentesque magna nibh, eleifend fermentum diam dictum, feugiat porttitor erat. Duis volutpat tellus est, quis interdum est malesuada sed. Fusce laoreet pulvinar imperdiet. Vestibulum congue ultricies sem ut egestas. Duis vestibulum mi sit amet magna semper pretium. Fusce a mi libero. Aliquam vel mauris nec odio adipiscing lobortis. Sed rhoncus urna nibh, et aliquam lorem viverra sed. Suspendisse consectetur faucibus leo in pharetra. Cras vulputate massa diam, id dictum dui bibendum sit amet.

Donec blandit, lacus sed pharetra ultrices, metus libero placerat dolor, a consequat neque purus sed mi. Phasellus dapibus dolor vel eleifend mollis. Nullam lacinia diam vitae venenatis tempor. Nunc pretium justo eu auctor ultrices. Nam eros lorem, sollicitudin non tellus at, pharetra consequat sapien. Pellentesque viverra blandit tortor in scelerisque. Proin nec volutpat libero, ut dapibus justo. Morbi eget consectetur ante. Duis eget leo accumsan, tristique turpis eu, imperdiet ipsum. Nam vulputate massa id tellus dignissim placerat. Ut rutrum bibendum tortor ac sodales. In id magna a nunc tincidunt consectetur sit amet quis magna. Quisque sed erat ipsum.

Curabitur congue velit nec lorem dignissim ultricies. In purus sapien, tempus non dolor vitae, dictum bibendum nunc. Pellentesque lobortis ac quam a sodales. In ut mauris eu mauris consequat ornare ut ut magna. Nulla sit amet auctor odio. Integer ac sodales metus. Curabitur laoreet enim ut purus ultricies elementum. Curabitur nec sem lobortis, aliquam metus a, cursus arcu.

Retrieved from "http://2013.igem.org/Team:Groningen/TESTPAGE2"