Easy Eats

In this example below you will see how to do a Easy Eats with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Kmillie, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Kmillie ©

Technologies

  • HTML
<!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>

Comments