Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<main>
<div class="c-recipe">
<div class="c-recipe__header">
<img class="c-recipe__hero-shot" src="https://cdn.pinchofyum.com/wp-content/uploads/Mashed-Potatoes-in-Instant-Pot-185x185.jpg">
<h1 class="c-recipe__title">The Best Instant-Pot Mashed Potatoes</h1>
<div class="c-rating">
<div class="c-rating__stars">
<i class="c-rating__star c-rating__star--full"></i>
<i class="c-rating__star c-rating__star--full"></i>
<i class="c-rating__star c-rating__star--full"></i>
<i class="c-rating__star c-rating__star--half"></i>
<i class="c-rating__star c-rating__star"></i>
</div>
<div class="c-rating__details">
3.5 stars from 87 reviews
</div>
</div>
<ul class="c-recipe__attributes">
<li class="c-recipe__attribute">
<span class="c-recipe__attribute-label c-recipe__attribute-label--time">Prep time:</span>
<span class="c-recipe__attribute-value">10 minutes</span>
</li>
<li class="c-recipe__attribute">
<span class="c-recipe__attribute-label c-recipe__attribute-label--time">Cook time:</span>
<span class="c-recipe__attribute-value">20 minutes</span>
</li>
<li class="c-recipe__attribute">
<span class="c-recipe__attribute-label c-recipe__attribute-label--time">Yeild:</span>
<span class="c-recipe__attribute-value">8 1/2 cup servings</span>
</li>
</ul>
</div>
<div class="c-recipe__content">
<h2 class="c-recipe__subheading">Description</h2>
<p>Mashed Potatoes made in the Instant Pot! They are so creamy, so fluffy, and SO GOOD. From start to finish in 30 minutes, all in one pot!</p>
<hr class="c-recipe__content-sep">
<h2 class="c-recipe__subheading">Description</h2>
<p>Mashed Potatoes made in the Instant Pot! They are so creamy, so fluffy, and SO GOOD. From start to finish in 30 minutes, all in one pot!</p>
</div>
</div>
</main>
/* Page Stylings */
*, *:after, *:before {
box-sizing: border-box;
}
body {
margin: 0;
color: #515251;
font-family: 'Bitter', serif;
background-color: #eaebec;
}
main {
max-width: 550px;
width: 100%;
margin: 200px auto;
}
/* Variables */
$color-primary: #6D3C5C;
$color-light: #8A677A;
/* Recipe Card */
.c-recipe {
border: 5px solid $color-primary;
.c-recipe__header {
padding: 20px 40px;
margin-top: 92px;
background-color: $color-primary;
color: #fff;
}
.c-recipe__hero-shot {
display: block;
margin: -110px auto 0 auto;
border-radius: 50%;
border: 5px solid $color-primary;
}
.c-recipe__title {
padding-bottom: 20px;
font-family: 'Dosis', sans-serif;
font-weight: normal;
text-align: center;
border-bottom: 2px solid rgb(138, 103, 122);
}
.c-recipe__content {
padding: 20px;
border-style: solid;
border-width: 0 5px;
border-color: $color-primary;
background-color: #fff;
&:last-of-type {
border-bottom: 5px solid $color-primary;
}
}
.c-recipe__subheading {
margin: 0 0 10px 0;
color: #979599;
font-weight: normal;
font-size: 14px;
text-transform: uppercase;
}
.c-recipe__content-sep {
margin: 0;
border-style: solid;
border-width: 0 0 2px 0
border-bottom: 2px solid #f8f8f8;
}
}
<link href="https://fonts.googleapis.com/css?family=Bitter|Dosis" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.