<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="style.css">

<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">

<title>Forms Review</title>

</head>

<body>

<section id="overlay">

<img src="https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" alt="Davie's Burgers Logo" id="logo">

<hr>

<form action="submission.html" method="POST">

<h1>Create a burger!</h1>

<section class="protein">

<label for="patty">What type of protein would you like?</label>

<input type="text" name="patty" id="patty">

</section>

<hr>

<section class="patties">

<label for="amount">How many patties would you like?</label>

<input type="number" name="amount" id="amount">

</section>

<hr>

<section class="cooked">

<label for="doneness">How do you want your patty cooked</label>

<br>

<span>Rare</span>

<input type="range" name="doneness" id="doneness" value="3" min="1" max="5">

<span>Well-Done</span>

</section>

<hr>

<section class="toppings">

<span>What toppings would you like?</span>

<br>

<input type="checkbox" name="topping" id="lettuce" value="lettuce">

<label for="lettuce">Lettuce</label>

<input type="checkbox" name="topping" id="tomato" value="tomato">

<label for="tomato">Tomato</label>

<input type="checkbox" name="topping" id="onion" value="onion">

<label for="onion">Onion</label>

</section>

<hr>

<section class="cheesy">

<span>Would you like to add cheese?</span>

<br>

<input type="radio" name="cheese" id="yes" value="yes">

<label for="yes">Yes</label>

<input type="radio" name="cheese" id="no" value="yes">

<label for="no">No</label>

</section>

<hr>

<section class="bun-type">

<label for="bun">What type of bun would you like?</label>

<select name="bun" id="bun">

<option value="sesame">Sesame</option>

<option value="potatoe">Potato</option>

<option value="pretzel">Pretzel</option>

</select>

</section>

<hr>

<section class="sauce-selection">

<label for="sauce">What type of sauce would you like?</label>

<input list="sauces" id="sauce" name="sauce">

<datalist id="sauces">

<option value="ketchup"></option>

<option value="mayo"></option>

<option value="mustard"></option>

</datalist>

</section>

<hr>

<section class="extra-info">

<label for="extra">Anything else you want to add?</label>

<br>

<textarea id="extra" name="extra" rows="3" cols="40"></textarea>

</section>

<hr>

<section class="submission">

<input type="submit" value="Submit">

</section>

</form>

</section>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<header>

<h1>Navigational Links</h1>

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#posts">Posts</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<main>

<section>

<article>

<h2>Facts About Dogs</h2>

<p>

Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times.

</p>

</article>

<aside>

<p>A study was conducted on dogs being away from their owners for varying hours and the studies show that dogs who were away from their owners the longest showed the greatest amount of affection!

</p>

</aside>

</section>

<figure>

<img src="https://content.codecademy.com/courses/SemanticHTML/dogimage.jpeg"/>

<figcaption>A cute dog.</figcaption>

</figure>

<audio controls>

<source src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3" type="audio/mp3">

</audio>

<video src="https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4" controls>

</video>

<embed src="https://content.codecademy.com/courses/SemanticHTML/dog-on-beach.gif"/>

</main>

<footer>

<p>Contact me at +1 234 567 8910 </p>

</footer>

</body>

</html>