Create an example of a web page.
<!DOCTYPE html>
<html>
<head>
	<title>My Awesome Web Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<style type="text/css">
		body { font-family: 'Open Sans', sans-serif; }
		.container { width: 80%; margin: 0 auto; padding: 20px 0; }
		header { display: flex; align-items: center; justify-content: space-between; }
		header img { height: 80px; }
		header h1 { margin: 0; }
		nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
		nav li { margin: 0 10px; }
		nav a { text-decoration: none; color: #000; }
		.hero { height: 400px; background-image: url(https://source.unsplash.com/1600x900/?nature); background-size: cover; background-position: center; margin: 20px 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; }
		section { margin: 20px 0; }
		footer { background: #eee; padding: 20px; text-align: center; }
	</style>
</head>
<body>
	<div class="container">
		<header>
			<img src="https://www.logodesign.net/logo/abstract-cuboid-building-4519ld.png" alt="logo">
			<h1>My Awesome Web Page</h1>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</header>
		<div class="hero">
			<p>Welcome to my web page</p>
		</div>
		<section>
			<h2>About Me</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maxim
Below is an instruction that describes a task, write a response that appropriately completes the request.

### Instruction:
Create an example of a web page.

### Response:
<!DOCTYPE html>
<html>
<head>
	<title>My Awesome Web Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<style type="text/css">
		body { font-family: 'Open Sans', sans-serif; }
		.container { width: 80%; margin: 0 auto; padding: 20px 0; }
		header { display: flex; align-items: center; justify-content: space-between; }
		header img { height: 80px; }
		header h1 { margin: 0; }
		nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
		nav li { margin: 0 10px; }
		nav a { text-decoration: none; color: #000; }
		.hero { height: 400px; background-image: url(https://source.unsplash.com/1600x900/?nature); background-size: cover; background-position: center; margin: 20px 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; }
		section { margin: 20px 0; }
		footer { background: #eee; padding: 20px; text-align: center; }
	</style>
</head>
<body>
	<div class="container">
		<header>
			<img src="https://www.logodesign.net/logo/abstract-cuboid-building-4519ld.png" alt="logo">
			<h1>My Awesome Web Page</h1>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</header>
		<div class="hero">
			<p>Welcome to my web page</p>
		</div>
		<section>
			<h2>About Me</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maxim