Codecademy Project: Healthy Recipes

STYLE.CSS

img {
  height: 150px;
}

.description {
  font-size: 20px;
}

#cook-time {
  font-weight: bold;
}

.ingredients li {
  list-style: square;
}

p.time {
  color: gray;
}

.external_link {
  color: SeaGreen;
}

font-family h1 h2 p li{
  font-family: Helvetica;
}

INDEX.HTML

<!DOCTYPE html>
<html>

<head>
  <title>Quinoa and Kale Salad Recipe</title>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

  <img src="https://content.codecademy.com/courses/freelance-1/unit-2/salad.jpg" alt="Kale Caeasar Salad"/>
  <h1>Kale Caesar Quinoa Salad with Roasted Chicken</h1>
  <p class="description">Kale and quinoa provide a healthy base for roasted chicken topped with a light Caesar sauce.</p>

  <p id="cook-time">Total time: 45 minutes</p>

  <h2>Ingredients</h2>
  <ul class="ingredients">
    <li>1/4 cup kale</li>
    <li>1 cup Quinoa</li>
    <li>2 tbsp Olive Oil</li>
    <li>1 chicken breast</li>
    <li>Caesar Dressing</li>
  </ul>

  <h2>Preparation</h2>
  <ol>
    <li>
      <p>Prepare quinoa and roast chicken until golden brown and 165 in middle.</p>
      <p class="time">Time: 40 minutes</p>
    </li>
    <li>
      <p>Toss quinoa, chicken, kale, and Caesar dressing until coated.</p>
      <p class="time">Time: 4 minutes</p>
    </li>
    <li>
      <p>Add walnuts and olive oil as garnish.</p>
      <p class="time">Time: 1 minute</p>
    </li>
  </ol>

  <p class="citation">Find this recipe and more <a href="http://www.myrecipes.com/recipe/kale-caesar-salad-chicken" target="_blank" class="external-link">here</a>.</p>

</body>

</html>