Difference between revisions of "Template:TU Delft All pages"

Line 1: Line 1:
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
 
<html>
−
<head>
 
 
<!-- Start of CSS-->
 
<!-- Start of CSS-->
 
<style type="text/css">
 
<style type="text/css">
Line 26: Line 25:
 
/*left align Black Menu Bar  
 
/*left align Black Menu Bar  
 
#top_menu_inside {  
 
#top_menu_inside {  
−
 
 
margin-left: 20px;*/
 
margin-left: 20px;*/
−
}
+
}*/
−
             
+
 +
 
 +
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 +
  margin: 0;
 +
  padding: 0;
 +
  border: 0;
 +
  font-size: 100%;
 +
 
 +
}
 +
html { height: 101%; }
 +
body { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 62.5%; line-height: 1; padding-bottom: 65px; background-color: #fff ; }
 +
 
 +
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
 +
ol, ul { list-style: none; }
 +
 
 +
 
 +
 
 +
h2 {
 +
  font-family: 'Capriola', Tahoma, Arial, sans-serif;
 +
  font-weight: normal;
 +
  font-size: 2.95em;
 +
  line-height: 1.2em;
 +
  letter-spacing: -.0.03em;
 +
  color: #383838;
 +
  margin-bottom: 16px;
 +
}
 +
 
 +
p { font-size: 1.7em; line-height: 1.45em; margin-bottom: 15px; color: #434343; }
 +
 
 +
a { color: #5b77a4; text-decoration: underline; }
 +
a:hover { color: #7d94bb; }
 +
 
 +
 
 +
 
 +
 
 +
#content {
 +
  display: block;
 +
  background: #fff;
 +
  padding: 14px 20px;
 +
}
 +
 
 +
 
 +
 
 +
/* top navigation */
 +
#navigation {
 +
  width:100%;
 +
  display: block;
 +
  height: 35px;
 +
  background-color: #131313;
 +
}
 +
 
 +
#navigation ul { list-style: none; padding: 0px 7px; }
 +
 
 +
#navigation ul li { display: inline; float: left; }
 +
#navigation ul li a {
 +
  display: block;
 +
  padding: 0 8px;
 +
  color: #fff;
 +
  font-size: 1.1em;
 +
  text-decoration: none;
 +
  line-height: 35px;
 +
  font-weight: bold;
 +
  margin-right: 6px;
 +
 
 +
}
 +
#navigation ul li a:hover { color: #a8d6e7; }
 +
 
 +
/* hidden fixed navigation */
 +
#fixedbar {
 +
  display: none;
 +
  position: fixed;
 +
  top: 0;
 +
  width: 100%;
 +
  height: 80px;
 +
  background: rgba(0,0,0,0.85);
 +
}
 +
 
 +
#fixednav {
 +
  display: block;
 +
  width: 100%;
 +
  margin: 0 auto;
 +
  padding: 0px 25px;
 +
}
 +
 
 +
#fixednav li { }
 +
 
 +
#fixednav li a {
 +
  display: block;
 +
  float: left;
 +
  font-size: 1.25em;
 +
  font-weight: bold;
 +
  color: #96aed8;
 +
  line-height: 80px;
 +
  text-decoration: none;
 +
  padding: 0px 8px;
 +
  margin-right: 6px;
 +
  -webkit-transition: all 0.2s linear;
 +
  -moz-transition: all 0.2s linear;
 +
  transition: all 0.2s linear;
 +
}
 +
 
 +
#fixednav li a:hover {
 +
  color: #fff;
 +
  background: rgba(0,0,0,0.3);
 +
}
 
</style>
 
</style>
 +
 +
<div style="height:100px; background-color:red;">
 +
header
 +
</div>
 +
 +
 +
  <nav id="fixedbar">
 +
    <ul id="fixednav">
 +
      <li><a href="#">Homepage</a></li>
 +
      <li><a href="#">About Us</a></li>
 +
      <li><a href="#">Community</a></li>
 +
      <li><a href="#">Staff Members</a></li>
 +
      <li><a href="#">Contact</a></li>
 +
    </ul>
 +
  </nav>
 +
   
 +
    <div id="content">
 +
      <h2>Content headline</h2>
 +
      <p>Content is courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>. Logo Icon freebie released by <a href="http://365psd.com/day/176/">Pontus Johansson</a>.</p>
 +
     
 +
      <p>I've used one adjective to describe myself. What is it? Professional. Yeah, like I'm going to spill coffee all over this $3,000 suit? Come on! It's not like envy, or even hungry!</p>
 +
     
 +
     
 +
   
 +
    <nav id="navigation">
 +
      <ul>
 +
        <li><a href="#">Homepage</a></li>
 +
        <li><a href="#">About Us</a></li>
 +
        <li><a href="#">Community</a></li>
 +
        <li><a href="#">Staff Members</a></li>
 +
        <li><a href="#">Contact</a></li>
 +
      </ul>
 +
    </nav>
 +
     
 +
      <p>It's so watery. And yet there's a smack of ham to it. George Michael may be suffering from what we in the soft-sciences call Obsessive Compulsive Disorder, or the "OC Disorder." Dad would stage elaborate situations using a one-armed man to teach us lessons. I'd want to get in there and find some answers.</p>
 +
     
 +
      <h3>Another Top Heading</h3>
 +
      <p>These are my awards, Mother. From Army. The seal is for marksmanship, and the gorilla is for sand racing. I run a pretty tight ship around here. With a pool table? It's a gaming ship.</p>
 +
     
 +
      <p>Absolutely. And we're going to be here every day. I don't care if it takes from now till the end of Shrimpfest. Look at us, crying like a bunch of girls on the last day of camp.</p>
 +
     
 +
      <p>No borders, no limits… go ahead, touch the Cornballer... you know best? I will pack your sweet pink mouth with so much ice cream you'll be the envy of every Jerry and Jane on the block! She wanted to look 48. I nearly airbrushed her into oblivion. Ended up checking "albino" on the form. I am going to my spin class. I thought you had vertigo.</p>
 +
     
 +
      <p>Well, obviously, I'm not a big guy. I'm not a Carl Weathers, par example. Probably out there without a flipper, swimming around in a circle, freaking out his whole family.</p>
 +
     
 +
      <h1>Last Section</h1>
 +
      <p>She calls it a Mayonegg. So Ann, the question is, do you want a man or a boy? I know how I would answer. No, she's in it. She's a contestant. It's sorta like an inner beauty pageant. Ah, there it is. I think I might have someone who's going to circumvrent the law.</p>
 +
     
 +
      <p>Perhaps an attic, shall I seek.</p>
 +
     
 +
      <p>George Michael I'm sure Egg is a very nice person. Buster's in what we like to call a light to no coma. In layman's terms, it might be considered a very heavy nap. There's unlimited juice? This party is gonna be off the hook.</p>
 +
</div>
 +
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
  $('#navigation a, #fixedbar a').on('click', function(e) {
 +
    e.preventDefault();
 +
  });
 +
 
 +
  $(window).on('scroll',function() {
 +
    var scrolltop = $(this).scrollTop();
 +
    var topOfDiv = $('#navigation').position().top;
 +
    var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);
 +
 +
    if(scrolltop >= bottomOfDiv) {
 +
      $('#fixedbar').fadeIn(250);
 +
    }
 +
   
 +
    else if(scrolltop <= topOfDiv) {
 +
      $('#fixedbar').fadeOut(250);
 +
    }
 +
  });
 +
});
 +
</script>
 +
</html>

Revision as of 10:01, 8 July 2015

header

Content headline

Content is courtesy of Bluth Ipsum. Logo Icon freebie released by Pontus Johansson.

I've used one adjective to describe myself. What is it? Professional. Yeah, like I'm going to spill coffee all over this $3,000 suit? Come on! It's not like envy, or even hungry!

It's so watery. And yet there's a smack of ham to it. George Michael may be suffering from what we in the soft-sciences call Obsessive Compulsive Disorder, or the "OC Disorder." Dad would stage elaborate situations using a one-armed man to teach us lessons. I'd want to get in there and find some answers.

Another Top Heading

These are my awards, Mother. From Army. The seal is for marksmanship, and the gorilla is for sand racing. I run a pretty tight ship around here. With a pool table? It's a gaming ship.

Absolutely. And we're going to be here every day. I don't care if it takes from now till the end of Shrimpfest. Look at us, crying like a bunch of girls on the last day of camp.

No borders, no limits… go ahead, touch the Cornballer... you know best? I will pack your sweet pink mouth with so much ice cream you'll be the envy of every Jerry and Jane on the block! She wanted to look 48. I nearly airbrushed her into oblivion. Ended up checking "albino" on the form. I am going to my spin class. I thought you had vertigo.

Well, obviously, I'm not a big guy. I'm not a Carl Weathers, par example. Probably out there without a flipper, swimming around in a circle, freaking out his whole family.

Last Section

She calls it a Mayonegg. So Ann, the question is, do you want a man or a boy? I know how I would answer. No, she's in it. She's a contestant. It's sorta like an inner beauty pageant. Ah, there it is. I think I might have someone who's going to circumvrent the law.

Perhaps an attic, shall I seek.

George Michael I'm sure Egg is a very nice person. Buster's in what we like to call a light to no coma. In layman's terms, it might be considered a very heavy nap. There's unlimited juice? This party is gonna be off the hook.