gustinmi/html5template.html

## html5template.html
<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>HTML5Template</title>
		<style type="text/css">
		html, body { height: 100%; width: 100%; }  /* occupy whole viewport.  */
		body,div,p {
		 	/* css reset techique; We are resetting the UserAgent (browser) style  */
		 	/* the problems with UserAgent defaults is, that they differ browser to browser.
		 	How can you make a design (position, distances) if you cannot say how much padding is for UL element ?  */
		 	margin: 0; padding:0;
		  }
		body, body * {
			position: relative; /* Preparation for all absolute positioning. Absolute positions are "relative" to first relative containing element*/
			font-family: Tahoma, Arial, sans-serif; /* Take first, if not second, etc. The small letter goes for font-family. Big capital goes for font name. So this reads as: Take font by name "Tahoma". If you do not have it,
			take Arial. If you do not have it, take your default font for font-family sans-serif. */
		}
		body {
			font-size: 0.35cm; /* Fix font size to something physical. Afterwards, all units should be em's  (width and heigth of small m letter */
			line-height: 1.4; /* the heigth of text line. If font-size is smaller, it will be centered vertically inside line */
			text-align: center; /* this affects all contained text inside block containers */
			background-color: LightGray; /* web color name. It could be in #HEX as well*/
		}
		div.header {
			position: fixed; /* fixed elements are taken out of the (static) flow. You position them with left, top, right, etc..*/
			left: 0;
			top: 0;
			right: 0;
			background-color: gray;
			z-index: 10; /* z-axis - visibility of elements - higher number means make this visible, hide content underneath them  */
			line-height: 2.4
		}
		div.header ul {
			padding: 0; /* reseting the UserAgent's default*/
			margin: 0;
			list-style-type: none; /* do not put each element in new line (UserAgent default) */
			text-align: center; /* this will center all 'inline' or text elements contained within this container */
			word-spacing: 1.5em; /* bewteen words*/
			font-weight: bold;
		}
		div.header ul li {
			cursor: pointer; /* mouse cursor, when mouse pointer is above element */
			display: inline; /* treat it as if text*/
			text-transform: uppercase;
			letter-spacing: 0.2em; /* between letters (characters)*/
		}
		div.header ul li:hover{ /* hover - pseudo class, affective when mouse cursor is hovering above the element */
			color: white;
			transition: color 0.7s ease; /* animate color property*/
			-webkit-transition: color 0.7s ease; /* overrides for different browsers (compatibility issues) */
			-moz-transition: color 0.7s ease;
			-o-transition: color 0.7s ease;
		}
		div.content {
			margin: 0 auto -2em; /*(margin 0 auto means equal distance on left in right sizes. This is managed by browser. ). Negative margin makes space for push div */
			min-height: 100%; /* min-height >> fill all available view port. Stretch through all available space  */
			text-align: left;
			background-color: white;
		}
		div.content p{
			text-align: justify; /* Stretches the lines so that each line has equal width*/
		}
		div.center {
			width: 30em;
			padding-top: 2.4em;
			margin: 0px auto;
		}
		div.footer {
			background-color: LightGray;
			height: 2em;
			line-height: 2em;
			word-spacing: 1.5em;
		}
		h1 {
			font-size: 1.2em;
			line-height: 1.8em;
		}
		::selection { /* pseudo class - selected text (right click mouse or press shift and move cursor) */
			background: red;
			text-shadow: none;
		}
		div#push {
			height: 2em; /* must be the same heigth as negative margine on div.content */
		}
		button {
			background-color: LightGray;
			border: 4px solid gray;
			border-radius: 15px; /* round corners */
			-moz-border-radius: 15px;
			padding: 0.5em;
			cursor: pointer;
		}
		</style>
    </head>
    <body>
		<div class="header">
			<ul>
				<li>Menu1</li>
				<li>Menu2</li>
				<li>Menu3</li>
				<li>Menu4</li>
				<li>Menu5</li>
			</ul>
		</div>
		<div class="content">
			<div class="center">
				<h1>Title 1</h1>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
				<button id="more1">More ...</button>
				<h1>Title 2</h1>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
				<button id="more2">More ...</button>
			</div>
			<div id="push">
			</div>
		</div>
		<div class="footer">
			<a href="www.google.com">Link1</a>
			<a href="www.bing.com">Link2</a>
			<a href="www.google.com">Link3</a>
			<a href="www.bing.com">Link4</a>
		</div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>HTML5Template</title>
	<style type="text/css">
	html, body { height: 100%; width: 100%; } /* occupy whole viewport. */
	body,div,p {
	/* css reset techique; We are resetting the UserAgent (browser) style */
	/* the problems with UserAgent defaults is, that they differ browser to browser.
	How can you make a design (position, distances) if you cannot say how much padding is for UL element ? */
	margin: 0; padding:0;
	}
	body, body * {
	position: relative; /* Preparation for all absolute positioning. Absolute positions are "relative" to first relative containing element*/
	font-family: Tahoma, Arial, sans-serif; /* Take first, if not second, etc. The small letter goes for font-family. Big capital goes for font name. So this reads as: Take font by name "Tahoma". If you do not have it,
	take Arial. If you do not have it, take your default font for font-family sans-serif. */
	}
	body {
	font-size: 0.35cm; /* Fix font size to something physical. Afterwards, all units should be em's (width and heigth of small m letter */
	line-height: 1.4; /* the heigth of text line. If font-size is smaller, it will be centered vertically inside line */
	text-align: center; /* this affects all contained text inside block containers */
	background-color: LightGray; /* web color name. It could be in #HEX as well*/
	}
	div.header {
	position: fixed; /* fixed elements are taken out of the (static) flow. You position them with left, top, right, etc..*/
	left: 0;
	top: 0;
	right: 0;
	background-color: gray;
	z-index: 10; /* z-axis - visibility of elements - higher number means make this visible, hide content underneath them */
	line-height: 2.4
	}
	div.header ul {
	padding: 0; /* reseting the UserAgent's default*/
	margin: 0;
	list-style-type: none; /* do not put each element in new line (UserAgent default) */
	text-align: center; /* this will center all 'inline' or text elements contained within this container */
	word-spacing: 1.5em; /* bewteen words*/
	font-weight: bold;
	}
	div.header ul li {
	cursor: pointer; /* mouse cursor, when mouse pointer is above element */
	display: inline; /* treat it as if text*/
	text-transform: uppercase;
	letter-spacing: 0.2em; /* between letters (characters)*/
	}
	div.header ul li:hover{ /* hover - pseudo class, affective when mouse cursor is hovering above the element */
	color: white;
	transition: color 0.7s ease; /* animate color property*/
	-webkit-transition: color 0.7s ease; /* overrides for different browsers (compatibility issues) */
	-moz-transition: color 0.7s ease;
	-o-transition: color 0.7s ease;
	}
	div.content {
	margin: 0 auto -2em; /(margin 0 auto means equal distance on left in right sizes. This is managed by browser. ). Negative margin makes space for push div /
	min-height: 100%; /* min-height >> fill all available view port. Stretch through all available space */
	text-align: left;
	background-color: white;
	}
	div.content p{
	text-align: justify; /* Stretches the lines so that each line has equal width*/
	}
	div.center {
	width: 30em;
	padding-top: 2.4em;
	margin: 0px auto;
	}
	div.footer {
	background-color: LightGray;
	height: 2em;
	line-height: 2em;
	word-spacing: 1.5em;
	}
	h1 {
	font-size: 1.2em;
	line-height: 1.8em;
	}
	::selection { /* pseudo class - selected text (right click mouse or press shift and move cursor) */
	background: red;
	text-shadow: none;
	}
	div#push {
	height: 2em; /* must be the same heigth as negative margine on div.content */
	}
	button {
	background-color: LightGray;
	border: 4px solid gray;
	border-radius: 15px; /* round corners */
	-moz-border-radius: 15px;
	padding: 0.5em;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div class="header">
	<ul>
	<li>Menu1</li>
	<li>Menu2</li>
	<li>Menu3</li>
	<li>Menu4</li>
	<li>Menu5</li>
	</ul>
	</div>
	<div class="content">
	<div class="center">
	<h1>Title 1</h1>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
	<button id="more1">More ...</button>
	<h1>Title 2</h1>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
	<button id="more2">More ...</button>
	</div>
	<div id="push">
	</div>
	</div>
	<div class="footer">
	<a href="www.google.com">Link1</a>
	<a href="www.bing.com">Link2</a>
	<a href="www.google.com">Link3</a>
	<a href="www.bing.com">Link4</a>
	</div>
	</body>
	</html>