HTML/CSS Solutions
You can also download the complete solution.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Recipe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Recipes</h1>
</header>
<main>
<article class="recipe">
<header>
<h2>Francesinha</h2>
<dl>
<dt>prep time</dt>
<dd>30 min</dd>
<dt>cook time</dt>
<dd>35 min</dd>
<dt>total time</dt>
<dd>65 min</dd>
<dt>servings</dt>
<dd>4 servings</dd>
</dl>
</header>
<section class="description">
<h2>Description</h2>
<p>Francesinha is a sandwich from northern Portugal, especially
the Porto region. It has two slices of bread and various meats,
covered with melted cheese and served with sauce and fries. The
sauce is a unique part of the sandwich, with each restaurant
having its own recipe made from tomatoes, broth, piri piri spices,
beer, and Port wine.</p>
<img src="francesinha.jpg">
<p>It's not an everyday dish, but it's worth trying at least once in
your life. If you visit Porto, make sure to try a francesinha.</p>
</section>
<section class="ingredients">
<h2>Ingredients</h2>
<p>For the sauce:</p>
<ul>
<li><span class="ingredient">olive oil</span> as needed</li>
<li>1 sliced <span class="ingredient">onion</span></li>
<li>2 <span class="ingredient">garlic</span> cloves</li>
<li>1 <span class="ingredient">bay leaf</span></li>
<li>1 slice of <span class="ingredient">ham</span></li>
<li>1 can of diced <span class="ingredient">tomatoes</span></li>
<li>1/2 liter of <span class="ingredient">beer</span></li>
<li>1/2 liter of <span class="ingredient">white wine</span></li>
<li>1/2 liter of <span class="ingredient">water</span></li>
<li>1 <span class="ingredient">beef bouillon cube</span></li>
<li><span class="ingredient">salt</span> as needed</li>
<li><span class="ingredient">Worcestershire sauce</span> as needed</li>
<li>1 tsp of <span class="ingredient">cornstarch</span></li>
<li>1/4 cup of <span class="ingredient">milk</span></li>
</ul>
<p>For the sandwich:</p>
<ul>
<li>4 <span class="ingredient">beef tenderloin steaks</span></li>
<li>4 <span class="ingredient">fresh sausages</span></li>
<li>4 <span class="ingredient">linguica sausages</span></li>
<li>8 slices of <span class="ingredient">crustless sandwich bread</span></li>
<li>16 slices of <span class="ingredient">cheese</span></li>
<li>8 slices of ham</li>
</ul>
</section>
<section class="method">
<h2>Method</h2>
<ol>
<li>In <span class="ingredient">olive oil</span>, sauté
the <span class="ingredient">onion</span>. As soon as it
is translucent, add the <span class="ingredient">garlic</span>.</li>
<li>Let it sauté for a little while, then add the
<span class="ingredient">bay leaf</span>,
<span class="ingredient">ham</span>, and
<span class="ingredient">tomato</span>.</li>
<li>Mix well and add <span class="ingredient">beer</span>,
<span class="ingredient">wine</span>, and
<span class="ingredient">water</span>.</li>
<li>Season with <span class="ingredient">bouillon stock</span>,
<span class="ingredient">salt</span>, and
<span class="ingredient">Worcestershire sauce</span> and let
it simmer on low heat for about half an hour.</li>
<li>Remove the <span class="ingredient">bay leaf</span> and
puree the sauce until it becomes very smooth.</li>
<li>Dissolve the <span class="ingredient">cornstarch</span> in the
<span class="ingredient">milk</span> and add it to the sauce,
stirring and letting it cook for a little while.</li>
<li>Preheat the oven to 180ºC.</li>
<li>Meanwhile, grill the <span class="ingredient">steaks</span>,
previously seasoned with <span class="ingredient">salt</span>
and <span class="ingredient">pepper</span>,
<span class="ingredient">sausages</span>, and
<span class="ingredient">linguica</span>, cut in half lengthwise.</li>
<li>In an oven tray, place 4 slices of <span class="ingredient">
sandwich bread</span>, and on top of it, place the
<span class="ingredient">steak</span>,
<span class="ingredient">sausages</span>, and
<span class="ingredient">ham</span>. Cover with another slice of
<span class="ingredient">sandwich bread</span>. Cover with 4
slices of <span class="ingredient">cheese</span>. Place the tray
in the oven until the <span class="ingredient">cheese</span> is
melted.</li>
<li>Remove from the oven, place each francesinha on a plate,
and pour the hot sauce over it.</li>
</ol>
</section>
</article>
</main>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700&family=Imperial+Script&family=Ruda&display=swap');
html {
font-family: 'Crimson Pro', serif;
font-size: 2rem;
color: #333;
}
body > header, article.recipe {
width: 30em;
max-width: 90vw;
margin: 0 auto;
}
body > header {
text-align: center;
font-family: 'Imperial Script', serif;
}
body > header h1 {
font-size: 6em;
font-weight: 400;
margin: 0;
}
article.recipe {
background-color: #f7ede2;
padding: 1em;
}
article.recipe h2 {
font-family: Ruda;
font-weight: 400;
border-bottom: 2px solid #333;
text-align: right;
}
article.recipe header dl {
border: 2px dashed #f28482;
border-right: 10px solid #f28482;
border-radius: 20px 0 0 20px;
background-color: #f5cac3;
padding: 0 1em;
}
article.recipe header dt {
text-transform: capitalize;
font-variant-caps: small-caps;
}
article.recipe header dd {
margin-left: 0;
margin-bottom: 0.5em;
}
article.recipe header dt {
margin-top: 0.5em;
}
p {
line-height: 1.4em;
}
span.ingredient {
background-color: transparent;
font-weight: bold;
color: #84a59d;
}
section.description img {
width:100%;
}
section.ingredients p {
font-weight: bold;
}
section.method li, section.ingredients li {
margin-bottom: 1em;
}