Team:KU Leuven/Template

From 2013.igem.org

(Difference between revisions)
Line 6: Line 6:
      
      
     <style>
     <style>
-
    *{margin:0;padding:0;} html, body {font-family: 'PT Sans', sans-serif !important; color: #34495e; background-color:#f7f7f7;} .container{max-width:960px; margin-left: auto; margin-right: auto; padding-left: 20px;} .span2{float: left; max-width: 420px;} .full-width {max-width: 960px;} .full-width, .span2, .span3 {
+
    *{margin:0;padding:0;} html, body {font-family: 'PT Sans', sans-serif !important; color: #34495e; background-color:#f7f7f7;} .container{max-width:960px; margin-left: auto; margin-right: auto; padding-left: 20px;} .span2{float: left; max-width: 420px;} .full-width {max-width: 960px; clear: both;} .full-width, .span2, .span3 {
    margin-top: 20px; margin-right: 20px; padding:20px; overflow: auto;
    margin-top: 20px; margin-right: 20px; padding:20px; overflow: auto;
-
    } .white {background-color: #fff; border-bottom: 2px solid #e4e5e4;} .span3 {float: left; max-width:260px; margin-right: 0;} .greytext {color: #979ca1;} .blacktext {color: #34495e;}
+
    } .container>div {overflow: auto;} .white {background-color: #fff; border-bottom: 2px solid #e4e5e4;} .span3 {float: left; max-width:260px; margin-right: 20px;} .greytext {color: #979ca1;} .blacktext {color: #34495e;} #menu {padding-right: 20px;} .full-width .span2 {margin-top: 0px; margin-right: 0px; padding: 0px; max-width: 450px;} .full-width .span3 {margin-top:0; padding: 0px; margin-right: 0px; max-width: 300px;} .full-width p, .span2 p, .span3 p {padding-left: 20px; padding-right: 20px;} .clear-both {clear: both; height: 0px;}
 +
   
 +
    ul, li, a  {margin: 0; padding: 0;}
 +
   
 +
    #menu {
 +
    overflow: visible;
 +
    margin-bottom: 20px;
 +
    }
 +
   
 +
    a {text-decoration: none;}
 +
.toggleMenu {
 +
    display:  none;
 +
    background: #34495e;
 +
    padding: 10px 15px;
 +
    color: #fff;
 +
}
 +
.nav {
 +
    list-style: none;
 +
    *zoom: 1;
 +
    background:#fff;
 +
    float: right;
 +
}
 +
.nav:before,
 +
.nav:after {
 +
    content: " ";
 +
    display: table;
 +
}
 +
.nav:after {
 +
    clear: both;
 +
}
 +
.nav ul {
 +
    list-style: none;
 +
    width: 9em;
 +
}
 +
.nav a {
 +
    padding: 10px 15px;
 +
    color:#34495e;
 +
}
 +
.nav li {
 +
    position: relative;
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
}
 +
 +
.nav .sub li a:hover {
 +
background: #32f68b;
 +
}
 +
 +
.nav > li {
 +
    float: left;
 +
    border-top: 0px solid #e4e5e4;
 +
}
 +
.nav > li > a {
 +
    display: block;
 +
}
 +
.nav li  ul {
 +
    position: absolute;
 +
    left: -9999px;
 +
}
 +
.nav > li.hover > ul {
 +
    left: 0;
 +
}
 +
.nav li li.hover ul {
 +
    left: 100%;
 +
    top: 0;
 +
}
 +
 +
.nav li li {
 +
    padding-top: 0px;
 +
    padding-bottom: 0px;
 +
}
 +
 +
.nav li li a {
 +
    display: block;
 +
    background: #34495e;
 +
    color: #fff;
 +
    position: relative;
 +
    z-index:100;
 +
    border-top: 0px solid #e4e5e4;
 +
    padding-left: 30px;
 +
}
     </style>
     </style>
      
      
Line 15: Line 95:
@media  (min-width: 768px) and (max-width: 990px) {
@media  (min-width: 768px) and (max-width: 990px) {
.span3, .span2 {max-width: 100%;}
.span3, .span2 {max-width: 100%;}
 +
.nav {
 +
    float: none;
 +
    clear: both;
 +
}
 +
 +
.full-width .span2, .full-width .span3{max-width: 100%; margin-bottom: 20px;}
}
}
 
 
/* Landscape phone to portrait tablet */
/* Landscape phone to portrait tablet */
@media  (max-width: 767px) {
@media  (max-width: 767px) {
-
.span3, .span2 {max-width: 100%;}  
+
.span3, .span2 {max-width: 100%;}
 +
 +
.full-width .span2, .full-width .span3{max-width: 100%; margin-bottom: 20px;}
 +
 +
.active {
 +
        display: block;
 +
    }
 +
    .nav {
 +
    clear: both;
 +
    float: none;
 +
    }
 +
    .nav > li {
 +
        float: none;
 +
        padding-left: 10px;
 +
    }
 +
    .nav > li > .parent {
 +
        background-position: 95% 50%;
 +
    }
 +
    .nav li li .parent {
 +
        background-image: url("images/downArrow.png");
 +
        background-repeat: no-repeat;
 +
        background-position: 95% 50%;
 +
    }
 +
    .nav ul {
 +
        display: block;
 +
        width: 100%;
 +
    }
 +
  .nav > li.hover > ul , .nav li li.hover ul {
 +
        position: static;
 +
    }
 +
   
 +
    .toggleMenu {
 +
    float: right;
 +
    }
}
}
 
 
Line 30: Line 149:
      
      
     <script type="text/javascript">
     <script type="text/javascript">
-
  WebFontConfig = {
+
  WebFontConfig = {
-
    google: { families: [ 'PT+Sans::latin' ] }
+
    google: { families: [ 'PT+Sans::latin' ] }
-
  };
+
  };
-
  (function() {
+
  (function() {
-
    var wf = document.createElement('script');
+
    var wf = document.createElement('script');
-
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
-
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
-
    wf.type = 'text/javascript';
+
    wf.type = 'text/javascript';
-
    wf.async = 'true';
+
    wf.async = 'true';
-
    var s = document.getElementsByTagName('script')[0];
+
    var s = document.getElementsByTagName('script')[0];
-
    s.parentNode.insertBefore(wf, s);
+
    s.parentNode.insertBefore(wf, s);
-
  })(); </script>
+
  })();  
-
 
+
</script>
 +
   </head>
   </head>
   <body>
   <body>
   <div id="wrapper">
   <div id="wrapper">
    <div class="container">
    <div class="container">
 +
    <div id="menu">
 +
    <a class="toggleMenu" href="#">Menu</a>
 +
<ul class="nav">
 +
<li class="test">
 +
<a href="#">Home</a>
 +
</li>
 +
<li>
 +
<a href="#">Team</a>
 +
<ul class="sub">
 +
<li>
 +
<a href="#">Link1</a>
 +
</li>
 +
<li>
 +
<a href="#">Link2</a>
 +
</li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="#">Project</a>
 +
<ul class="sub">
 +
<li>
 +
<a href="#">Link1</a>
 +
</li>
 +
<li>
 +
<a href="#">Link2</a>
 +
</li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="#">Parts</a>
 +
<ul class="sub">
 +
<li>
 +
<a href="#">Link1</a>
 +
</li>
 +
<li>
 +
<a href="#">Link2</a>
 +
</li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="#">Notebook</a>
 +
</li>
 +
<li>
 +
<a href="#">Ethics</a>
 +
</li>
 +
<li>
 +
<a href="#">Education</a>
 +
</li>
 +
<li>
 +
<a href="#">Sponsors</a>
 +
</li>
 +
</ul>
 +
<div class="clear-both">&nbsp;</div>
 +
    </div>
 +
   
    <div class="full-width white">
    <div class="full-width white">
    <h1>Titel full-width</h1>
    <h1>Titel full-width</h1>
Line 55: Line 230:
    <h1>Titel full-width</h1>
    <h1>Titel full-width</h1>
    <div class="span3 greytext">
    <div class="span3 greytext">
-
    <p>Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.</p>
+
    <p>Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.</p>
    </div>
    </div>
   
   
    <div class="span3 greytext">
    <div class="span3 greytext">
-
    <p>Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.</p>
+
    <p>Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.</p>
    </div>
    </div>
   
   
    <div class="span3 greytext">
    <div class="span3 greytext">
-
    <p>Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.</p>
+
    <p>Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.</p>
    </div>
    </div>
</div>
</div>
-
<div class="span2 white">
+
<div>
-
    <h1>Titel span2</h1>
+
<div class="span3 white">
-
    <p>Bacon ipsum dolor sit amet leberkas filet mignon capicola drumstick ham hock pastrami corned beef boudin tail hamburger spare ribs pancetta beef tenderloin. Biltong short loin flank bacon corned beef shank beef tail boudin sirloin pancetta kielbasa. Ribeye ham jerky boudin shank prosciutto pastrami, bresaola tenderloin tail flank venison sausage drumstick. Brisket bresaola short loin filet mignon pork. Jerky fatback cow, hamburger ball tip pig short ribs chicken turkey. Pork leberkas shoulder pork belly strip steak venison spare ribs bresaola.</p>
+
    <h1>Titel span3</h1>
 +
    <p>Bacon ipsum dolor sit amet leberkas filet mignon capicola drumstick ham hock pastrami corned beef boudin tail hamburger spare ribs pancetta beef tenderloin. Biltong short loin flank bacon corned beef shank beef tail boudin sirloin pancetta kielbasa. Ribeye ham jerky boudin shank prosciutto pastrami, bresaola tenderloin tail flank venison sausage drumstick. Brisket bresaola short loin filet mignon pork. Jerky fatback cow, hamburger ball tip pig short ribs chicken turkey. Pork leberkas shoulder pork belly strip steak venison spare ribs bresaola.</p>
 +
</div>
 +
 +
<div class="span3 white">
 +
    <h1>Titel span3</h1>
 +
    <p>Bacon ipsum dolor sit amet leberkas filet mignon capicola drumstick ham hock pastrami corned beef boudin tail hamburger spare ribs pancetta beef tenderloin. Biltong short loin flank bacon corned beef shank beef tail boudin sirloin pancetta kielbasa. Ribeye ham jerky boudin shank prosciutto pastrami, bresaola tenderloin tail flank venison sausage drumstick. Brisket bresaola short loin filet mignon pork. Jerky fatback cow, hamburger ball tip pig short ribs chicken turkey. Pork leberkas shoulder pork belly strip steak venison spare ribs bresaola.</p>
 +
</div>
 +
 +
<div class="span3 white">
 +
    <h1>Titel span3</h1>
 +
    <p>Bacon ipsum dolor sit amet leberkas filet mignon capicola drumstick ham hock pastrami corned beef boudin tail hamburger spare ribs pancetta beef tenderloin. Biltong short loin flank bacon corned beef shank beef tail boudin sirloin pancetta kielbasa. Ribeye ham jerky boudin shank prosciutto pastrami, bresaola tenderloin tail flank venison sausage drumstick. Brisket bresaola short loin filet mignon pork. Jerky fatback cow, hamburger ball tip pig short ribs chicken turkey. Pork leberkas shoulder pork belly strip steak venison spare ribs bresaola.</p>
 +
</div>
</div>
</div>
-
<div class="span2 white">
+
<div class="full-width white">
    <h1>Titel span2</h1>
    <h1>Titel span2</h1>
-
    <p>Pastrami turducken filet mignon spare ribs rump tenderloin. Biltong ball tip ground round, meatloaf pork loin rump jowl tongue ribeye pastrami meatball salami. Pastrami turkey filet mignon, venison hamburger frankfurter meatloaf short ribs turducken bacon bresaola. Meatball frankfurter beef chuck. Flank turkey pork belly, swine salami leberkas pork chop tail.</p>
+
    <div class="span2 greytext">
 +
    <p>Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.</p>
 +
    </div>
 +
   
 +
    <div class="span2 greytext">
 +
    <p>Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.</p>
 +
    </div>
 +
</div>
 +
 +
<div>
 +
<div class="span2 white">
 +
    <h1>Titel span2</h1>
 +
    <p>Bacon ipsum dolor sit amet leberkas filet mignon capicola drumstick ham hock pastrami corned beef boudin tail hamburger spare ribs pancetta beef tenderloin. Biltong short loin flank bacon corned beef shank beef tail boudin sirloin pancetta kielbasa. Ribeye ham jerky boudin shank prosciutto pastrami, bresaola tenderloin tail flank venison sausage drumstick. Brisket bresaola short loin filet mignon pork. Jerky fatback cow, hamburger ball tip pig short ribs chicken turkey. Pork leberkas shoulder pork belly strip steak venison spare ribs bresaola.</p>
 +
</div>
 +
 +
<div class="span2 white">
 +
    <h1>Titel span2</h1>
 +
    <p>Pastrami turducken filet mignon spare ribs rump tenderloin. Biltong ball tip ground round, meatloaf pork loin rump jowl tongue ribeye pastrami meatball salami. Pastrami turkey filet mignon, venison hamburger frankfurter meatloaf short ribs turducken bacon bresaola. Meatball frankfurter beef chuck. Flank turkey pork belly, swine salami leberkas pork chop tail.</p>
 +
</div>
</div>
</div>
    </div>
    </div>
   </div>
   </div>
 +
 
 +
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 +
  <script>
 +
var ww = document.body.clientWidth;
 +
 +
$(document).ready(function() {
 +
$(".nav li a").each(function() {
 +
if ($(this).next().length > 0) {
 +
$(this).addClass("parent");
 +
};
 +
})
 +
 +
$(".toggleMenu").click(function(e) {
 +
e.preventDefault();
 +
$(this).toggleClass("active");
 +
$(".nav").toggle();
 +
});
 +
adjustMenu();
 +
})
 +
 +
$(window).bind('resize orientationchange', function() {
 +
ww = document.body.clientWidth;
 +
adjustMenu();
 +
});
 +
 +
var adjustMenu = function() {
 +
if (ww < 768) {
 +
$(".toggleMenu").css("display", "inline-block");
 +
if (!$(".toggleMenu").hasClass("active")) {
 +
$(".nav").hide();
 +
} else {
 +
$(".nav").show();
 +
}
 +
$(".nav li").unbind('mouseenter mouseleave');
 +
$(".nav li a.parent").unbind('click').bind('click', function(e) {
 +
// must be attached to anchor element to prevent bubbling
 +
e.preventDefault();
 +
$(this).parent("li").toggleClass("hover");
 +
});
 +
}
 +
else if (ww >= 768) {
 +
$(".toggleMenu").css("display", "none");
 +
$(".nav").show();
 +
$(".nav li").removeClass("hover");
 +
$(".nav li a").unbind('click');
 +
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
 +
// must be attached to li so that mouseleave is not triggered when hover over submenu
 +
$(this).toggleClass('hover');
 +
});
 +
}
 +
}
 +
  </script>
   </body>
   </body>
</html>
</html>

Revision as of 16:57, 19 August 2013

iGem

Titel full-width

Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.

Titel full-width

Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.

Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.

Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.

Titel span3

Bacon ipsum dolor sit amet leberkas filet mignon capicola drumstick ham hock pastrami corned beef boudin tail hamburger spare ribs pancetta beef tenderloin. Biltong short loin flank bacon corned beef shank beef tail boudin sirloin pancetta kielbasa. Ribeye ham jerky boudin shank prosciutto pastrami, bresaola tenderloin tail flank venison sausage drumstick. Brisket bresaola short loin filet mignon pork. Jerky fatback cow, hamburger ball tip pig short ribs chicken turkey. Pork leberkas shoulder pork belly strip steak venison spare ribs bresaola.

Titel span3

Bacon ipsum dolor sit amet leberkas filet mignon capicola drumstick ham hock pastrami corned beef boudin tail hamburger spare ribs pancetta beef tenderloin. Biltong short loin flank bacon corned beef shank beef tail boudin sirloin pancetta kielbasa. Ribeye ham jerky boudin shank prosciutto pastrami, bresaola tenderloin tail flank venison sausage drumstick. Brisket bresaola short loin filet mignon pork. Jerky fatback cow, hamburger ball tip pig short ribs chicken turkey. Pork leberkas shoulder pork belly strip steak venison spare ribs bresaola.

Titel span3

Bacon ipsum dolor sit amet leberkas filet mignon capicola drumstick ham hock pastrami corned beef boudin tail hamburger spare ribs pancetta beef tenderloin. Biltong short loin flank bacon corned beef shank beef tail boudin sirloin pancetta kielbasa. Ribeye ham jerky boudin shank prosciutto pastrami, bresaola tenderloin tail flank venison sausage drumstick. Brisket bresaola short loin filet mignon pork. Jerky fatback cow, hamburger ball tip pig short ribs chicken turkey. Pork leberkas shoulder pork belly strip steak venison spare ribs bresaola.

Titel span2

Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.

Pig doner filet mignon ham, fatback biltong swine chicken kielbasa sirloin corned beef. Corned beef turducken sausage sirloin salami beef pancetta. Flank venison filet mignon capicola spare ribs beef ribs. T-bone strip steak short loin pastrami beef. Cow biltong tri-tip salami pork doner hamburger meatloaf flank pancetta venison.

Titel span2

Bacon ipsum dolor sit amet leberkas filet mignon capicola drumstick ham hock pastrami corned beef boudin tail hamburger spare ribs pancetta beef tenderloin. Biltong short loin flank bacon corned beef shank beef tail boudin sirloin pancetta kielbasa. Ribeye ham jerky boudin shank prosciutto pastrami, bresaola tenderloin tail flank venison sausage drumstick. Brisket bresaola short loin filet mignon pork. Jerky fatback cow, hamburger ball tip pig short ribs chicken turkey. Pork leberkas shoulder pork belly strip steak venison spare ribs bresaola.

Titel span2

Pastrami turducken filet mignon spare ribs rump tenderloin. Biltong ball tip ground round, meatloaf pork loin rump jowl tongue ribeye pastrami meatball salami. Pastrami turkey filet mignon, venison hamburger frankfurter meatloaf short ribs turducken bacon bresaola. Meatball frankfurter beef chuck. Flank turkey pork belly, swine salami leberkas pork chop tail.

Retrieved from "http://2013.igem.org/Team:KU_Leuven/Template"