Anthony

Make a Pricing Table Using CSS Flexbox

Make a Pricing Table Using CSS Flexbox

Long gone the days of floating and clearfixing. We got flexbox and CSS grid now. You know that kind of feeling you get when you know you won’t be loading any external CSS framework or floating and clearfixing(such a pain in the ass).

I love Flexbox and Grid, however I’ve always find flexbox quite easy to work with compared to CSS grid, I don’t know why.

I thought why not make something cool today with flexbox, the first thing that came to my mind was a pricing table, and I was like why not.

In this tutorial we’re going to make a 3 column pricing table using flexbox and also make it responsive with media query and the flexbox property flex-direction Oh shit I just said the best part.

If you’ve never used flexbox before or probably never heard of it. This is not a Flexbox absolute beginner tutorial, however this article still covers some of the fundamentals you’ll need to start using flexbox.

The Setup

We going to start with the markup, I’ll try to make the markup understandable as possible as I can.

<div class="container">
    <div class="price-card">
      <div class="top basic">
        <h3>Basic</h3>
        <p>$19.33/ <span> month</span> </p>
      </div>
      <ul>
        <li>10GB Disk Space</li>
        <li>10 Domain Names</li>
        <li>5 Email Acounts</li>
        <li>100 Monthly Bandwidth</li>
        <li>2 FTP Accounts</li>
        <li>Website Builder</li>
      </ul>
      <div class="order-now-basic">
        <button class="btn-basic">order now</button>
      </div>
    </div>
    <div class="price-card">
      <div class="top standard">
        <h3>Standard</h3>
        <p>$31.99 / <span> month</span> </p>
      </div>
      <ul>
        <li>10GB Disk Space</li>
        <li>30 Domain Names</li>
        <li>15 Email Acounts</li>
        <li>200 Monthly Bandwidth</li>
        <li>5 FTP Accounts</li>
        <li>Website Builder</li>
      </ul>
      <div class="order-now-standard">
        <button class="btn-standard">order now</button>
      </div>
    </div>
    <div class="price-card">
      <div class="top premium">
        <h3>Premium</h3>
        <p>97.99/ <span> month</span> </p>
      </div>
      <ul>
        <li>500GB Disk Space</li>
        <li>Unlimited Domain Names</li>
        <li>Unlimited Email Acounts</li>
        <li>1000 Monthly Bandwidth</li>
        <li>Unlimited FTP Accounts</li>
        <li>Website Builder</li>
      </ul>
      <div class="order-now-premium">
        <button class="btn-premium">order now</button>
      </div>
    </div>
  </div>

Starting with the .container class

   .container{
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
        padding-top: 70px;
    }

We’re only concern with the justify-content property, you probably know what the display:flex property does. In case you’re not familiar with it, it basically expands items to fill available free space, or shrinks them to prevent overflow. We set justify-content: to space-between because we want to set the price-card classe width to 30%, then the remaining 10% will be distributed among them, in other get that space between them.

.price-card class

  .price-card{
      height: 100%;
      background-color: #fff;
      flex-basis: 30%;
      box-sizing: border-box;
      margin-bottom: 40px;
    }

As you can see I use the flex-basis: property instead of width. Basically it makes no difference, but I just wanted to be more flexboxish(don’t google it, it’s not a word).

.top Class

  .top{
        text-align: center;
        transform: translateY(-20px);
        padding: 10px 0;
        border-radius: 10px 10px 0 0;
     }

Changing the background-color for each plan

   .price-card .basic{
        background: #2ECC71;
    }
    .price-card .standard{
        background: #222;
        border-bottom: 1px solid INDIANRED;
    }
    .price-card .premium{
        background: #F4D03F;
    

.top class children: h3, p & span

   .top h3{
        color: #fff;
        font-size: 1.5rem;
        text-transform: uppercase;
        font-weight: 400;
    }
    .standard p{
        color: INDIANRED;
        word-spacing: 2px;
    }
     .standard span{
        color: #9f9f9f;
     }

The ul & li

   ul{
        padding: 0px;
    }
    ul li{
        list-style: none;
        text-align: center;
        padding: 20px 0;;
    }

Bottom section Let’s style the button tag globally

   button{
        color: white;
        border: none;
        font-size: 12px;
        padding: 10px 20px;
        border-radius: 20px;
        text-transform: uppercase;
        cursor: pointer;
    }

Bottom line for each card

/* basic */
    .order-now-basic{
        text-align: center;
        padding: 30px 0;
        border-bottom: 2px solid #2ECC71;
     }
/* standard */
     .order-now-standard{
        text-align: center;
        padding: 30px 0;
        border-bottom: 2px solid INDIANRED;
      }
/* premium */
.order-now-premium{
    text-align: center;
    padding: 30px 0;
    border-bottom: 2px solid #F4D03F;
  }

Let’s give the buttons different background-color, notice that I didn’t set a background-color to the buttons when I styled them that’s because I want them all to have that global style but different background-color.

.btn-basic{
        background-color: #2ECC71;
     }
     .btn-standard{
        background-color: INDIANRED;
      }
      .btn-premium{
        background-color: #F4D03F;
      }

Making it responsive

  @media (max-width:900px) {
        .container{
            flex-direction: column;
        }
    }

comments powered by Disqus