<body class="hero-recipe-img">
  <figure class="hero-recipe-img">
    <figcaption>Photo by Shania Pinnata</figcaption>
  </figure>
  <div class="recipe-card">
    <section class="inner-recipe-card">
      <h1 class="recipe-name">Pasta with Pesto and Tomatoes</h1>
      <div class="description">
        <p>This quick and delicious pasta dish is the perfect way to use up a summer bounty of basil and tomatoes! </p>
        <p>Don't have a green thumb? Never fear! You can knock out this classic pasta dish in no time with a jar of prepared pesto sauce. </p>
        <div class="recipe_details">
          <ul>
            <li>
              <p class="details">Servings:</p>
              <p>4</p>
            </li>
            <li>
              <p class="details">Prep Time:</p>
              <p>5 minutes</p>
            </li>
            <li>
              <p class="details">Cook Time:</p>
              <p>25 minutes</p>
            </li>
            <li>
              <p class="details">Total Time:</p>
              <p>30 minutes</p>
            </li>
          </ul>
        </div>
        <figure>
          <img src="https://assets.codepen.io/652/tamanna-rumee-nswz6tIpgZk-unsplash.jpg" class="tomatoes" alt="tomato halves surrounded by basil leaves and peppercorns.">
          <figcaption>Photo by Tamanna Rumee</figcaption>
        </figure>
        <h2>The Ingredients</h2>
        <ul class="ingredients">
          <li>8 oz. spaghetti or linguine pasta</li>
          <li>2 cups fresh basil leaves, plus 4-8 reserved leaves for garnish</li>
          <li>2 cloves garlic</li>
          <li>2 tbsp. pine nuts or blanched almonds</li>
          <li>1/2 cup olive oil</li>
          <li>1/2 cup grated Parmesan cheese, plus 2 tbsp. for garnish.</li>
          <li>1/8 tsp salt</li>
          <li>1 pint cherry tomatoes</li>
          <li>1 tsp olive oil</li>
        </ul>

        <p class="variation">Variation: Got no time, or no fresh basil? Use a 6 ounce jar of prepared pesto instead.</p>

        <h2>The Process</h2>
        <ol class="instructions">
          <li>Bring 4 quarts of water to a rolling boil in a large pot. Salt the water generously and add the pasta. </li>
          <li>While the pasta cooks, make the pesto.
            <ul class="pesto-instructions">
              <li>Remove stems from basil leaves.</li>
              <li>Put the basil, garlic, and pine nuts or almonds into the bowl of a food processor and pulse it a few times to chop them up.</li>
              <li>Then, turn the food processor on and <strong>slowly</strong> pour the olive oil through the feeder tube to blend with the chopped herbs and nuts. </li>
              <li>Process until all ingredients are fully blended, stopping the food processor to scrape down the sides occasionally to get it all mixed. </li>
              <li>Turn off the food processor, and add the salt and Parmesean, then pulse a few times to blend.</li>
            </ul>
          </li>
          <li>Heat a large skillet over medium heat. </li>
          <li>Add the 1/2 tsp. olive oil to the heated skillet.</li>
          <li>Add the cherry tomatoes to the skillet and let them blister, stirring occasionally and gently so they don't burst. </li>
          <li>Remove tomatoes from the pan and set aside. </li>
          <li>Drain the pasta, reserving 1/4 cup of the cooking water.</li>
          <li>Return the pasta to the pot</li>
          <li>Add the reserved cooking water and pesto to the pasta and stir to mix</li>
          <li>Plate the pasta and add 6-8 tomatoes to each plate</li>
          <li>Garnish with reserved basil leaves and Parmesean and serve. Buon Appetito!</li>
        </ol>
    </section>
  </div>
</body>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 0.625rem;
}

::-webkit-scrollbar-thumb {
  background: #002366;
}

::-webkit-scrollbar-track {
  background: #fff;
}

body {
  font-family: "Open Sans", sans-serif;
  text-align: justify;
  font-size: 0.8em;
  color: #000;
}

p {
  padding: 1em;
}

h1,
h2 {
  font-family: "Montserrat", sans-serif;
  color: rgba(0, 0, 0, 0.9);
  padding: 0.5em;
}

h1 {
  font-size: 2.5em;
  line-height: 1em;
  letter-spacing: -0.05em;
}

figcaption {
  font-size: 0.6rem;
  color: rgba(0, 0, 0, 0.5);
  text-align: right;
  padding: 1em;
}

.hero-recipe-img {
  background: url("https://images.unsplash.com/photo-1593253787226-567eda4ad32d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2434&q=80");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.recipe-card {
  position: absolute;
  width: 370px;
  top: 5%;
  left: 10%;
  transform: translate(-10%, 0);
  object-fit: contain;
  box-shadow: -20px 60px 120px rgba(0, 0, 0, 0.3);
  background: #fff;
  border-radius: 3em;
}

@media screen and (max-width: 40em) {
  .recipe-card {
    top: 55%;
    width: 100%;
    border-radius: 3em 3em 0 0;
  }

  .recipe-name {
    text-align: left;
  }
}

.inner-recipe-card {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  padding: 3em;
}

.tomatoes {
  margin: 0 auto;
  width: 85vw;
  max-width: 100%;
}

.recipe_details {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.9);
  margin-top: 2em;
  margin-bottom: 2em;
}

.recipe_details ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style-type: none;
}

.recipe_details > ul > li > p {
  padding: 0;
}

.details {
  font-size: 0.6rem;
  color: rgba(0, 0, 0, 0.7);
}

.ingredients {
  margin-left: 1.75em;
  list-style: square;
  list-style-position: outside;
}

.instructions {
  margin-left: 1.75em;
  list-style: decimal;
}

.pesto-instructions {
  margin-left: 2em;
  list-style: lower-roman;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.