<h2>Ingredients for hand-made bread 🍞</h2>
<ol>
<li>Bread Flour</li>
<li>Instant Yeast</li>
<li>Salt</li>
<li>Water</li>
<li>Cornmeal <span>(Optional)</span></li>
</ol>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:[email protected];700&display=swap');
/* General styling for the page */
body {
background-color: #FFF5DD;
}
* {
font-family: 'Fraunces', serif;
}
h2 {
padding: 1rem;
color: #1A1A1A;
}
ol {
/* remove the default styling for the list */
list-style: none;
margin: 0;
padding: 0 1rem;
/* Initialize the counter */
counter-reset: ingredients;
}
ol li {
/* which counter to increment */
counter-increment: ingredients;
/* layout and spacing between the list items - unrelated to the custom counter stuff */
margin-bottom: .5rem;
display: flex;
align-items: center;
color: #4A4A4A;
}
ol li:before {
/* this defines the content for the list item */
content: counter(ingredients);
/* these are the custom styles I'm applying to them */
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(77, 171, 247, 0.16);
color: #4DABF7;
padding: 1rem;
border-radius: 42px;
height: 42px;
width: 42px;
font-size: 2rem;
font-weight: 700;
margin-right: .75rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.