Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Telekom Layout</title>
	<link rel="stylesheet" type="text/css" href="exercise9.css">
</head>
<body>
	<!-- Header Start-->
	<header>

			<div id="menu_wrapper">
				<ul id="logo">
					<li id="logo_image"></li>
				</ul>

				<!--Navigation menu-->
				<nav id="navigation_menu">
						<ul id="navigation_menu">
							<li class="menu_item"><a href="#">Menu1</a></li>
							<li class="menu_item"><a href="#">Menu2</a></li>
							<li class="menu_item"><a href="#">Menu3</a></li>
							<li class="menu_item"><a href="#">Menu4</a></li>
						</ul>
				</nav>
			</div>
	</header>

	<!-- Main Content -->
	<main id="wrapper">


		<!--Slider Section -->
		<section id="slider_section">
			<div id="slider"></div>
		</section>

		<!--Phones Section -->
		<section id="phones_section">
			<aside id="asideLeft"></aside>
			<article class="phone" id="phone1"></article>
			<article class="phone" id="phone2"></article>
			<article class="phone" id="phone3"></article>
			<aside id="asideRight"></aside>
		</section>


		<!--Info Section -->
		<section id="info_section">
			<div class="info"></div>
			<div class="info"></div>
			<div class="info"></div>
		</section>

		<!--Links Section -->
		<section id="links_section">
			<div class="link"></div>
			<div class="link"></div>
			<div class="link"></div>
			<div class="link"></div>
		</section>

		</main>

</body>
</html>


*{
	padding: 0px;
	margin: 0px;
}

body {
	background-color: #fff;
}

/*Navigation Menu */

header {
	position: fixed;
	background-color: #5c5c5c;
	width: 100%;
	height: 60px;
}

#menu_wrapper {
	width: 60%;
	margin: 0px auto 0px auto;
}

#navigation_menu {
	float: right;
	display: table;
	list-style: none;
	height: 60px;
}

#navigation_menu > li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	height: 60px;
	padding: 0px 10px 0px 10px;
}

#navigation_menu > li:hover {
	background-color: #222222;
}

#navigation_menu a {
	color: #fff;
	text-decoration: none;
}

#logo {
	float: left;
	height: 60px;
	width: 200px;
	background-color: #a2a2a2;
	list-style: none;
}

/* Main Content */

#wrapper{
	width: 60%;
	background-color: #a1a1a1;
	margin: 0px auto 0px auto;
}

#slider_section {
	background-color: #7f7d7d;
	height: 400px;
	padding-top: 60px;
}

/* Phones Section*/

#phones_section{
	background-color: #a2a2a2;
	height: 600px;
}

#asideLeft{
	height: 100%;
	width: 9.5%;
	background-color: #575757;
	float: left;
}


#asideRight{
	height: 100%;
	width: 9.5%;
	background-color: #575757;
	float: left;
}

.phone{
	width: 27%;
	height: 100%;
	float: left;
}

#phone1 {
	background-color: #888686;
}

#phone2 {
	background-color: #6e6e6e;
}

#phone3 {
	background-color: #888686;
}

/*Info Section*/

#info_section {
	clear: both;
	background-color:
}