recipe2.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .recipe img {
        display: block;
        margin: 0 auto;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      }

      .recipe {
  font-size: 16px;
}

.recipe-title {
  font-size: 35px;
  font-family: 'DM Serif Display', serif;
font-family: 'Rufina', serif;
}

.ingredients-title {
  font-size: 30px;
}

.ingredients-list {
  font-size: 20px;
}

.instructions-title{
  font-size: 30px;
}

.instructions-list{
  font-size: 20px;
}
    </style>
  </head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Rufina&display=swap" rel="stylesheet">
<body>
<div class="recipe">
    <h2 class="recipe-title">Turkey Sandwich</h2>
    <img src="turkey_sandwich2.jpg" alt="Dish image">
    <!--<p class="recipe-description">Recipe description</p>-->
    <h3 class="ingredients-title">Ingredients:</h3>
    <ul class="ingredients-list">
      <li> ½ ripe avocado, pitted and peeled</li>
      <li>2 slices rustic whole wheat bread</li>
      <li>1 tablespoon mayonnaise</li>
      <li>4 to 5 rounds of very thinly sliced red onion</li>
      <li>2 pieces red oak or green leaf lettuce</li>
      <li>2 slices ripe tomato</li>
      <li>3-4 slices of oven roasted turkey</li>
    </ul>
    <h3 class="instructions-title">Instructions:</h3>
    <ol class="instructions-list">
      <li>Using a fork, lightly mash the avocado over one slice of bread.</li>
      <li>Spread the mayonnaise over the other slice of bread.</li>
      <li>Scatter the onions over the avocado.</li>
      <li>Top with the lettuce, tomato and turkey.</li>
      <li>Lay the remaining slice of bread over top and cut in half. Sandwich can be made up to 4 hours in advance and kept, tightly wrapped, in the refrigerator.</li>
      
    </ol>
  </div>
  </body>
  </html>
 




