sonerufler/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Simple Responsive Website</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<!-- test -->
</head>
<body>
	<header>
		<h1>Simple Responsive Website</h1>
	</header>
	<nav>
		<ul>
			<a href="#"><li>Home</li></a>
			<a href="#"><li>About</li></a>
			<a href="#"><li>Blog</li></a>
			<a href="#"><li>Shop</li></a>
			<a href="#"><li>Gallery</li></a>
			<a href="#"><li>Contact</li></a>
		</ul>
		<div class="handle">Menu</div>
	</nav>
	<section>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat debitis repellat porro asperiores fugiat rerum, tempore optio omnis ipsum, deleniti ab non commodi provident eveniet beatae tempora architecto nulla distinctio quos quia nihil voluptate sed impedit enim! Voluptate laboriosam doloremque culpa ipsa, temporibus! Quibusdam similique voluptate, facilis minus optio asperiores libero non pariatur commodi, natus adipisci ex, eum laborum, accusantium odio soluta nemo in debitis assumenda aperiam consectetur iusto laboriosam possimus. Magnam quibusdam ipsa, debitis, beatae tempore labore quasi laborum nihil dolorem sapiente, nam impedit suscipit doloremque nisi nesciunt ratione dolores rerum, ullam. Tenetur assumenda rerum quam, repellat dignissimos quo porro sed itaque suscipit, nobis eius illo, saepe, est sapiente ab voluptatum unde sit reprehenderit mollitia. Deserunt itaque nulla assumenda quos nostrum. Tenetur libero accusantium culpa eum, nesciunt autem itaque exercitationem sint veritatis laborum temporibus, atque porro aliquid, dignissimos facere accusamus officia deserunt eveniet. Non soluta maiores ipsam, voluptas quos vitae exercitationem accusamus ducimus. Obcaecati debitis blanditiis placeat hic adipisci sequi, impedit dignissimos fuga, in quod id! Officia voluptatem sed quos veritatis quod expedita veniam mollitia omnis sunt laboriosam non, id delectus temporibus. Magnam, id, ad. Rerum enim fugit, quisquam blanditiis assumenda vero quidem voluptate iste magni amet possimus aliquid harum eligendi obcaecati quis odit deserunt provident vel, natus! Itaque nulla quod illo est, cupiditate, voluptatem ipsa eum vero porro delectus quis non tempora accusamus iusto laudantium necessitatibus nam magni molestiae labore quibusdam libero odit facere! Quod, dolores. Veniam perspiciatis non harum consectetur officia asperiores libero recusandae, dolore quae reiciendis aliquid quos assumenda mollitia nesciunt nemo vero similique voluptate voluptates, id voluptatem obcaecati dignissimos? Placeat eligendi alias cupiditate aliquam provident. Placeat tempore reprehenderit explicabo laborum exercitationem ratione neque dolorem praesentium ullam aperiam! Excepturi laborum enim hic vero aspernatur tempore deleniti accusantium, expedita est sequi quia eveniet tenetur? Enim ducimus, tenetur.
	</section>
	<!-- JQERY -->
	<script>
		$('.handle').on('click', function(){
			$('nav ul').toggleClass('showing')
		})
	</script>
</body>
</html>

## style.css
body{
	margin: 0;
	padding: 0;
	font-family: Sans-serif;
}
header{
	background-color: #00795f;
	width:100%;
	padding:40px 0;
	color: white;
	text-align: center;
}
a{
	text-decoration: none;
	color:inherit;
}
nav ul{
	background-color: #43a286;
	overflow: hidden;
	color:white;
	padding:0;
	text-align: center;
	margin: 0;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
}
nav ul li{
	display: inline-block;
	padding: 20px;
}
nav ul li:hover{
	background-color: #399077;
}
section{
	line-height: 1.5em;
	font-size: 0.9em;
	padding:40px;
	width: 75%;
	margin: 0 auto;
}
.handle{
	width:100%;
	background: #005c48;
	text-align: left;
	box-sizing: border-box;
	padding:15px 10px;
	cursor:pointer;
	color:white;
	display:none;
}

@media (max-width:767px) {
	nav ul{
		max-height:0px;
	}
	.showing{
		max-height: 20em;
	}
	nav ul li{
		width: 100%;
		box-sizing: border-box;
		padding:15px;
		text-align: left;
	}
	.handle{
		display:block;
	}
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Simple Responsive Website</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<!-- test -->
	</head>
	<body>
	<header>
	<h1>Simple Responsive Website</h1>
	</header>
	<nav>
	<ul>
	<a href="#"><li>Home</li></a>
	<a href="#"><li>About</li></a>
	<a href="#"><li>Blog</li></a>
	<a href="#"><li>Shop</li></a>
	<a href="#"><li>Gallery</li></a>
	<a href="#"><li>Contact</li></a>
	</ul>
	<div class="handle">Menu</div>
	</nav>
	<section>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat debitis repellat porro asperiores fugiat rerum, tempore optio omnis ipsum, deleniti ab non commodi provident eveniet beatae tempora architecto nulla distinctio quos quia nihil voluptate sed impedit enim! Voluptate laboriosam doloremque culpa ipsa, temporibus! Quibusdam similique voluptate, facilis minus optio asperiores libero non pariatur commodi, natus adipisci ex, eum laborum, accusantium odio soluta nemo in debitis assumenda aperiam consectetur iusto laboriosam possimus. Magnam quibusdam ipsa, debitis, beatae tempore labore quasi laborum nihil dolorem sapiente, nam impedit suscipit doloremque nisi nesciunt ratione dolores rerum, ullam. Tenetur assumenda rerum quam, repellat dignissimos quo porro sed itaque suscipit, nobis eius illo, saepe, est sapiente ab voluptatum unde sit reprehenderit mollitia. Deserunt itaque nulla assumenda quos nostrum. Tenetur libero accusantium culpa eum, nesciunt autem itaque exercitationem sint veritatis laborum temporibus, atque porro aliquid, dignissimos facere accusamus officia deserunt eveniet. Non soluta maiores ipsam, voluptas quos vitae exercitationem accusamus ducimus. Obcaecati debitis blanditiis placeat hic adipisci sequi, impedit dignissimos fuga, in quod id! Officia voluptatem sed quos veritatis quod expedita veniam mollitia omnis sunt laboriosam non, id delectus temporibus. Magnam, id, ad. Rerum enim fugit, quisquam blanditiis assumenda vero quidem voluptate iste magni amet possimus aliquid harum eligendi obcaecati quis odit deserunt provident vel, natus! Itaque nulla quod illo est, cupiditate, voluptatem ipsa eum vero porro delectus quis non tempora accusamus iusto laudantium necessitatibus nam magni molestiae labore quibusdam libero odit facere! Quod, dolores. Veniam perspiciatis non harum consectetur officia asperiores libero recusandae, dolore quae reiciendis aliquid quos assumenda mollitia nesciunt nemo vero similique voluptate voluptates, id voluptatem obcaecati dignissimos? Placeat eligendi alias cupiditate aliquam provident. Placeat tempore reprehenderit explicabo laborum exercitationem ratione neque dolorem praesentium ullam aperiam! Excepturi laborum enim hic vero aspernatur tempore deleniti accusantium, expedita est sequi quia eveniet tenetur? Enim ducimus, tenetur.
	</section>
	<!-- JQERY -->
	<script>
	$('.handle').on('click', function(){
	$('nav ul').toggleClass('showing')
	})
	</script>
	</body>
	</html>
	body{
	margin: 0;
	padding: 0;
	font-family: Sans-serif;
	}
	header{
	background-color: #00795f;
	width:100%;
	padding:40px 0;
	color: white;
	text-align: center;
	}
	a{
	text-decoration: none;
	color:inherit;
	}
	nav ul{
	background-color: #43a286;
	overflow: hidden;
	color:white;
	padding:0;
	text-align: center;
	margin: 0;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	}
	nav ul li{
	display: inline-block;
	padding: 20px;
	}
	nav ul li:hover{
	background-color: #399077;
	}
	section{
	line-height: 1.5em;
	font-size: 0.9em;
	padding:40px;
	width: 75%;
	margin: 0 auto;
	}
	.handle{
	width:100%;
	background: #005c48;
	text-align: left;
	box-sizing: border-box;
	padding:15px 10px;
	cursor:pointer;
	color:white;
	display:none;
	}

	@media (max-width:767px) {
	nav ul{
	max-height:0px;
	}
	.showing{
	max-height: 20em;
	}
	nav ul li{
	width: 100%;
	box-sizing: border-box;
	padding:15px;
	text-align: left;
	}
	.handle{
	display:block;
	}
	}