<body id=cart>
  
  <header>
    header
  </header>
  
  <main>
    
    <section class="summary">
      <div class="items">🛒 3 items</div>
      <div class="total">$415.00 💲</div>
    </section>
    
    <section class="actions">
      <button>Checkout 💳</button>
    </section>
    
    <section class="cart">
      <ul>
        <li class="item">
          <h3 class="name">Ladies Frock 👗</h3>
          <p class="price">$231.00</p>
        </li>
        <li class="item">
          <h3 class="name">Mens Runners 👟</h3>
          <p class="price">$115.00</p>
        </li>
        <li class="item">
          <h3 class="name">Undies 👙</h3>
          <p class="price" title="(nice)">$69.00</p>
        </li>
      </ul>
    </section>
    
    <section class="promo">
      <div>🌟 Offer Ends Soon! 🌟</div>
    </section>
    
    <section class="help">
      ❓ Need Help
    </section>
    
  </main>
  
  <footer>
    footer
  </footer>
  
</body>

/** grid **/

body, main {
  display: grid;
  grid-gap: 1rem;
}

main {
  grid-template: 
    "content" 
    "summary" 
    "actions" 
    "help"
    "promo";
}

@media ( min-width: 50rem ) {
  main {
    grid-template: 
      "promo promo"
      "content summary" 
      "content actions" 
      "content help";
    grid-template-columns: auto 20rem;
  }
}

.summary { grid-area: summary; }
.promo { grid-area: promo; }
.actions { grid-area: actions; }
.cart { grid-area: content; }
.help { grid-area: help; }

  
  
  
/** styling **/

@media ( min-width: 50rem ) {
  body, main {
    max-width: 60rem;
  }
  body {
    margin: auto;
  }
}

.summary {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  background: hsla(255,20,40,1);
  .total { 
    font-family: monospace;
    text-align: right; 
  }
}

.cart {
  .item {
    display: flex;
    justify-content: space-between;
    font-family: monospace;
    font-size: 18px;
    &:not(:last-child) {
      margin-bottom: 0.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px dotted hsla(225,25,50,1);
    }
  }
  .name {
    font-size: 18px;
    font-weight: 400;
    margin: 0;
  }
  .price {
    font-family: monospace;
    margin: 0;
  }
}
@media ( min-width: 50rem ) {
  .cart { padding: 2rem 1rem; }
  .cart .name, 
  .cart .price { font-size: 24px; }
  .cart .item:not(:last-child) { 
    margin-bottom: 1rem; 
    padding-bottom: 1rem;
  }
}

.actions {
  background: hsla(165,20,40,1);
  text-align: right;
  button {
    background: hsla(165,70,50,1);
    box-shadow: 0 2px 4px hsla(165,35,10,1);
    border: none;
    border-radius: 3px;
    padding: 0.5rem 1rem;
  }
}

.promo {
  color: hsla(65,20,20,1);
  background: hsla(65,20,40,1);
  font-weight: 800;
}

@media ( min-width: 50rem ) {
  .promo {
    min-height: 0;
    text-align: center;
  }
}

.help {
  color: hsla(15,30,70,1);
  background: hsla(15,20,40,1);
}

header, footer, section {
  background: hsla(225,15,30,1);
  box-shadow: 0 4px 4px 2px hsla(225,15,10,0.2);
  border-radius: 3px;
  padding: 1rem;
}

section {
  min-height: 3rem;
}

header, footer {
  box-shadow: none;
  color: hsla(225,15,35,1);
  background: hsla(225,15,21,1);
  border: 1px dashed hsla(225,15,30,1);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  word-spacing: 1rem;
  font-weight: 800;
}

body {
  color: white;
  background: hsl(222,14,23);
  padding: 20px;
  font-family: "Heebo", sans-serif;
  font-weight: 300;
}

ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}
View Compiled

/* RESIZE YOUR BROWSER */
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js