<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FlexBox Nav</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style-ANSWER.css">
</head>
<body>

  <!-- Flex Container! -->
  <div class="pricing-grid">

    <div class="plan plan1">
      
      <h2>Beginner</h2>
      <p>Perfect for those just starting out in tech.</p>
      <ul class="features">
        <li>Basic tutorials</li>
        <li>Community support</li>
        <li>Limited projects</li>
      </ul>

      <p class="price">Free</p>

      <a href="#" class="cta">🚀 Get Started</a>
    </div>

    <div class="plan plan2">
      
      <h2>Intermediate</h2>
      <p>For those with some experience looking to level up.</p>
      <ul class="features">
        <li>Advanced tutorials</li>
        <li>Project-based learning</li>
        <li>Interactive challenges</li>
        <li>Exclusive content</li>
      </ul>

      <p class="price">$50</p>

      <a href="#" class="cta">💻 Level Up</a>
    </div>

    <div class="plan plan3">
      
      <h2>Pro</h2>
      <p>Everything you need to master your skills.</p>
      <ul class="features">
        <li>All-access pass</li>
        <li>Mentorship programs</li>
        <li>Unlimited resources</li>
      </ul>

      <p class="price">$100</p>

      <a href="#" class="cta">🏆 Go Pro</a>
    </div>

  </div>

</body>
</html>
/* Some CSS Setup - nothing to do with flexbox */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: sans-serif;
  margin: 0;
  background-image: linear-gradient(260deg, #1e3a5f 0%, #5ca9d6 100%);
}

a {
  color:white;
}

.plan ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan ul li {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding:10px;
}

.plan ul li:last-child {
  border-bottom: 0;
}

.plan a {
  text-decoration: none;
  background:#FEFF00;
  padding:10px;
  color:black;
  border-radius:4px;
}


.plan h2 {
  text-transform: uppercase;
  color:white;
  letter-spacing: 2px;
  text-shadow:3px 3px 0 rgba(0,0,0,0.1);
}

.price {
  font-size: 50px;
  font-family: serif;
  margin: 10px 0;
}


/* Flex Container!!! */
.pricing-grid {
  max-width:750px;
  margin: 0 auto;
  display:flex; 
  align-items:center;
}

.plan {
  background:rgba(255,255,255,0.2);
  margin:20px;
  padding:20px;
  border-radius: 4px;
  text-align: center;
  
  flex:1;
  display:flex;
  flex-wrap:wrap;

}

.plan > * {
  flex:1 1 100%;
}

.plan .cta {
  align-self:flex-end;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.