https://pinchofyum.com/instant-pot-mashed-potatoes

https-pinchofyum-com-instant-pot-mashed-potatoes.markdown

https://pinchofyum.com/instant-pot-mashed-potatoes

A Pen by Andrew Berry on CodePen.

License.

index.html

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

style.scss

/* 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;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Bitter|Dosis" rel="stylesheet" />