Mock Recipe Listing
I cannot recall every doing any sort of mockup or prototype of a recipe listing. I think it would be fun to build one that has some animated elements and helps the recipe's viewer keep track of what they have completed so far and the ingredients they need. I think I'll do more with this at a later time and hopefully put it to use on this site if I ever post some recipes.
Recipe Name
Description
Jump back to the top of the pageThis is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text.
This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text.
Ingredients
Jump back to the top of the pageCooking Directions
Jump back to the top of the pageNutritional Info
This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text.
Jump back to the top of the pageView the code:
HTML and JS
<section class="code-block">
<h1 id="top">Recipe Name</h1>
<nav>
<ul>
<li><a href="#description">Description</a></li>
<li><a href="#ingredients">Ingredients</a></li>
<li><a href="#directions">Directions</a></li>
<li><a href="#nutritionalinfo">Nutritional Info</a></li>
</ul>
</nav>
<div id="food-photo"></div>
<h2 id="description">Description</h2>
<a class="block-link" href="#top">Jump back to the top of the page</a>
<p>This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text.</p>
<p>This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text.</p>
<div class="ingredients">
<h2 id="ingredients">Ingredients</h2>
<a class="block-link" href="#top">Jump back to the top of the page</a>
<ol class="hide-list-style">
<li><input type="checkbox" id="checkone" name="itemone" /><label for="checkone">Item One</label></li>
<li><input type="checkbox" id="checktwo" name="itemtwo" /><label for="checktwo">Item Two</label></li>
<li><input type="checkbox" id="checkthree" name="itemthree" /><label for="checkthree">Item Three</label></li>
<li><input type="checkbox" id="checkfour" name="itemfour" /><label for="checkfour">Item Four</label></li>
<li><input type="checkbox" id="checkfive" name="itemfive" /><label for="checkfive">Item Five</label></li>
</ol>
</div>
<h2 id="directions">Cooking Directions</h2>
<a class="block-link" href="#top">Jump back to the top of the page</a>
<ol class="hide-list-style">
<li>
<h3>Step 1</h3>
<p>This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text.</p>
</li>
<li>
<h3>Step 2</h3>
<p>This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text.</p>
</li>
<li>
<h3>Step 3</h3>
<p>This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text.</p>
</li>
</ol>
<h2 id="nutritionalinfo">Nutritional Info</h2>
<p>This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text. This is a paragraph of text that has a sole purpose of being filler text.</p>
<a class="block-link" href="#top">Jump back to the top of the page</a>
</section>CSS
.code-block {
min-height: 10em;
background-color:azure;
margin: 3rem auto;
font-size: 16px;
line-height: 1.5;
width: clamp(16em, 90vw, 60em);
padding: .5rem 2rem;
}
.code-block p {
line-height: 1.5;
margin-top: 0;
margin-bottom: 1em;
}
.code-block h1 {
text-align: left;
margin: 1rem 0 .25rem 0;
}
.code-block h1, .code-block h2, .code-block h3 {
margin-bottom: .5rem;
}
.code-block nav ul {
list-style-type: none;
padding-left: 0;
}
.code-block nav ul li {
min-height: 10px;
padding: 1em 0;
}
/* Ingredient list */
.code-block ol li {
min-height: 44px;
vertical-align: middle;
}
.code-block ol li input, .code-block ol li label {
padding: 1em;
}
.code-block ol li input:checked + label {
text-decoration: line-through;
}
.code-block #food-photo {
min-height: 300px;
width: 100%;
background-image: linear-gradient(orange, red);
}
/* Utility Classes */
.hide-list-style {
list-style: none;
padding-left: 0;
}
.block-link {
display: block;
font-size: .75em;
margin: .5rem 0;
}
@supports (display: flex) {
.code-block nav ul {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
}
@supports (display:grid) {
.code-block {
display: grid;
grid-template-columns: 1fr;
}
}