<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Easy Eats</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
</head>
<body>
<head>
<title>Easy Eats!</title>
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#home">Easy Eats!</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#naan-bread">Naan Bread<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#german-pancakes">German Pancakes</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#french-toast">French Toast</a>
</li>
</ul>
</div>
</div> <!-- end of container -->
</nav>
<!-- End of Navbar -->
<!-- Start of Banner -->
<div class="jumbotron jumbotron-fluid my-5">
<div class="container text-sm-center pb-3 pt-4">
<h1 class="display-2 pb-1">Easy Eats</h1>
<p class="lead">Delicious recipes that anyone can make!</p>
</div>
</div>
<!-- End of Banner -->
<!-- Start of Content -->
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3 id="naan-bread" class="pb-3">Naan Bread</h3>
<img class="img-fluid rounded float-left" src="https://www.grainchain.com/sites/default/files/naan-bread.jpg" alt="picture of Naan Bread">
</div> <!-- /img div -->
<div class="col-sm-8">
<p class="">A delicious yeasty Indian bread perfect for scooping up delicious curries. You can also eat it plain with butter or ghee!</p>
<hr>
<p>Ingredients</p>
<ul>
<li>4 cups all-purpose flour or 1/2 all-purpose 1/2 whole wheat</li>
<li>1 1/2 tsp baking powder</li>
<li>1 tsp baking Soda</li>
<li>1/4 tsp salt</li>
<li>1 tbsp sugar</li>
<li>3/4 tsp active dry yeast</li>
<li>1 cup milk</li>
<li>1/4 cup water, hot</li>
</ul>
</div> <!-- /of 1st p div -->
</div> <!-- end of row 1-->
<div class="row mb-5">
<p class="col-sm-12 my-4"><strong>Directions:</strong>
Mix hot water, sugar and yeast and let stand for 10 mins or until froathy. Then add baking powder, baking soda, salt, milk and flour(a little at a time). Let stand for an hour. Then seperate into 12-15 small balls and let stand for another 30 minutes. After that roll them flat and bake at 500 degrees for 2-3 minutes on each side. </p>
</div>
<div class="row">
<div class="col-sm-4">
<h3 id="german-pancakes" class="pb-3">German Pancakes</h3>
<img class=" img-fluid" src="http://sugar-n-spicegals.com/wp-content/uploads/2016/07/german-pancakes-edit-4.jpg" alt="A slice of German Pancake with Strawberries.">
</div> <!-- /img div -->
<div class="col-sm-8">
<p>German pancakes are super yummy and super easy to make.</p>
<hr>
<p>Ingredients</p>
<ul>
<li>1 cup milk</li>
<li>6 eggs, lightly beaten</li>
<li>1/8 tsp salt</li>
<li>1/4 cup butter</li>
<li>1 cup all-purpose flour</li>
</ul>
</div> <!-- /of 1st p div -->
</div> <!-- end of row 1-->
<div class="col-xs-12 my-5">
<p><strong>Directions:</strong>Preheat oven to 350 degrees F. Melt butter ina medium baking dish. In a medium bowl, mix flour, milk, eggs and salt. pour the mixture into a prepared baking dish. Bake on center rack in the preheated oven for 30 - 40 minutes, until golden brown.</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3 id="french-toast" class="pb-3">French Toast</h3>
<img class=" img-fluid" src="https://www.mommypotamus.com/wp-content/uploads/2016/07/french-toast-recipe-paleo-gluten-free.jpg" alt="A breakfast of French Toast">
</div> <!-- /img div -->
<div class="col-sm-8">
<p>French toast is easy and delicious breakfast when you are in a hurry.</p>
<hr>
<ul>
<li>4 eggs</li>
<li>1/4 cup milk</li>
<li>1 teaspoon ground cinnamon</li>
<li>1/2 teaspoon vanilla extract</li>
<li>8 slices of french bread</li>
<li>1/4 tablespoon butter</li>
</ul>
</div> <!-- /of 1st p div -->
</div> <!-- end of row 1-->
<div class="row">
<p class="col-sm-12 my-5"><strong>Directions:</strong>
In a small bowl, combine, cinnamon, vanilla, milk, eggs.In a 10 inch skillet, melt butter over medium heat. Whisk together cinnamon, vanilla, milk, eggs and pour in to a shallow container. Dip bread in egg mixture. Fry slices until golden brown, then flip to cook other side. Serve with syrup </p>
</div>
</div> <!-- end of container -->
<!-- Footer Start -->
<footer class="text-muted bg-dark py-1">
<div class="container">
<p class="text-center">Coded by Kristen 2017</p>
</div>
</footer>
<!-- Footer End -->
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
</body>
</html>
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
