<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.