Flat Responsive Pricing Tables - Pure CSS
close
Flat Responsive Pricing Tables - Pure CSS

Flat Responsive Pricing Tables - Pure CSS

Flat Responsive Pricing Tables - Pure CSS

Today we are going to make flat pricing tables that looks very much responsive and amazing.

I cannot provide you the demo because I don't have the availability of that stuff but you can download the project files and have a look.

You can use these pricing tables if you want to sell anything on your website.

Specially used for selling different things with packages for example you may have seen pricing tables on websites that sell domains and hosting.

These Pricing tables will make your website look stunning and give your website a beautiful look so that everyone who visits your website will be attracted and he will be bound to subscribe to the newsletters of your blog because of the beauty of your website.

So without further video let's start our tutorial.

Stepping into the tutorial I want to tell you that if you are new visitor on this blog subscribe to the newsletters right now and stay updated.

Let me show you the demo of these pricing tables before providing you the source code.
Demo:
Flat Responsive Pricing Tables - Pure CSS


Hi buddy today we are going to design Flat Pricing Table

As you know the HTML folder is mandatory for that so we should have some HTML folder first . Below is the code provided and you have to save it with the filename as provided.


Create New directory because we are going to work in that directory give it a name Flat Pricing Table and save all the files in it as they are said in the steps below.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

There are some external files used in the code provided below you can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js


Save It As Flat Pricing Table/index.html :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'><link rel="stylesheet" href="css/style.css"><div class='info'><h1>Pricing Table</h1><span>Made with<i class='fa fa-heart animated infinite pulse'></i>by<a href='#'>Muhammad Muzammil</a><div class='spoilers'>(3 Tables!) | (Active Class!) | (Very Swagy!)</div></span></div><div class='container'><div class='column'><div class='pricing-table'><h2 class='title'>Hatchling Plan</h2><div class='price'><span>$</span><span>3.96</span><span>/ month</span></div><ul><li><div class='fa fa-check'></div>Single Domain</li><li><div class='fa fa-check'></div>Unlimited Disk Space         </li><li><div class='fa fa-check'></div>Unlimited Bandwidth         </li><li><div class='fa fa-check'></div>Shared SSL Certificate         </li><li><div class='fa fa-times'></div>FREE Toll Free Number         </li></ul><a class='button' href='#'>Sign Up Now</a></div></div><div class='column'><div class='pricing-table best'><h2 class='title'>Baby Plan</h2><div class='price'><span>$</span><span>6.36</span><span>/ month</span></div><ul><li><div class='fa fa-check'></div>Unlimited Domain</li><li><div class='fa fa-check'></div>Unlimited Disk Space         </li><li><div class='fa fa-check'></div>Unlimited Bandwidth         </li><li><div class='fa fa-check'></div>Shared SSL Certificate         </li><li><div class='fa fa-times'></div>FREE Toll Free Number         </li></ul><a class='button' href='#'>Sign Up Now</a></div></div><div class='column'><div class='pricing-table'><h2 class='title'>Business Plan</h2><div class='price'><span>$</span><span>10.36</span><span>/ month</span></div><ul><li><div class='fa fa-check'></div>Unlimited Domain</li><li><div class='fa fa-check'></div>Unlimited Disk Space         </li><li><div class='fa fa-check'></div>Unlimited Bandwidth         </li><li><div class='fa fa-check'></div>FREE Priate SSL & IP         </li><li><div class='fa fa-check'></div>FREE Toll Free Number         </li></ul><a class='button' href='#'>Sign Up Now</a></div></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

Make External Stylesheet

With an external style sheet, you can change the look of an entire website by changing just one file i have included in the code above and also added in the project files.

Our HTML page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section in this article we will make external stylesheet in css directory.

The main code that will be included in the header tags will be similar to this <link rel='stylesheet' href='Flat Pricing Table/css/style.css' />
I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

In the code above I have included three pricing tables but you can increase them according to your requirements.
Without CSS our this script (Flat Pricing Table) will never look good-looking. So here we are, our HTML folder is ready now we have to personalize our HTML and it can be done using CSS.

So below is the CSS code for our HTML folder and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Flat Pricing Table/css/style.css :

body{background:#e9e9e9;font-family:'Roboto', sans-serif;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{position:relative;max-width:960px;margin:0 auto}.container .column{width:33%;padding:0 15px;-webkti-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left}.container .column:nth-child(2) .pricing-table{-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-duration:1.5s}.container .column:nth-child(3) .pricing-table{-webkit-animation-duration:2s;-moz-animation-duration:2s;animation-duration:2s}.container:before,
.container:after{content:'';display:block;clear:both}.pricing-table{position:relative;background:#666666;margin:0 auto;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:all 0.3s linear 0s;-moz-transition:all 0.3s linear 0s;-ms-transition:all 0.3s linear 0s;-o-transition:all 0.3s linear 0s;transition:all 0.3s linear 0s;-webkit-animation:1s slideDown ease;overflow:hidden}.pricing-table .title{margin:0;padding:15px 5px;color:#FFFFFF;font-size:18px;font-weight:600;text-transform:uppercase}.pricing-table .price{background:rgba(0, 0, 0, 0.1);padding:30px 10px;color:#FFFFFF}.pricing-table .price span{display:inline-block;font-size:14px;font-weight:600}.pricing-table .price span:nth-child(2){font-size:48px}.pricing-table ul{background:#FFFFFF;margin:0;padding:0;color:#666666;font-size:14px;text-align:left}.pricing-table ul li{padding:15px 30px}.pricing-table ul li .fa{margin:0 11px 0 0}.pricing-table ul li:nth-child(2n){background:rgba(0, 0, 0, 0.05)}.pricing-table .button{display:block;background:rgba(0, 0, 0, 0.1);margin:15px;padding:15px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#FFFFFF;font-weight:600;text-decoration:none;text-transform:uppercase}.pricing-table.best{background:#2ecc71;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}.info{width:300px;margin:25px auto 60px;text-align:center}.info h1{margin:0;padding:0;font-size:24px;font-weight:400;color:#333333}.info span{color:#666666;font-size:12px}.info span a{color:#000000;text-decoration:none}.info span .fa{color:#2ecc71}.info span .spoilers{color:#999999;margin-top:5px;font-size:10px}@-webkit-keyframes slideDown{0%{opacity:0;top:-60px}50%{top:10px}100%{opacity:1;top:0}}

The color scheme is my own you didn't reach that according to your website.

In the above code some color codes are used that are listed below you can change them as required.
  • #e9e9e9
  • #666666
  • #FFFFFF
  • rgba(0, 0, 0, 0.1)
  • #FFFFFF
  • #FFFFFF
  • #666666
  • rgba(0, 0, 0, 0.05)
  • rgba(0, 0, 0, 0.1)
  • #FFFFFF
  • #2ecc71
  • #333333
  • #666666
  • #000000
  • #2ecc71
  • #999999

  • Ending :

    So here we are, We have done and our project Flat Pricing Table is ready now you can save all the files as provided.

    Like CSS files in css directory and JavaScript files in a js directory name. Below is directory tree of the files and folders of this project.


    • Flat Pricing Table
      • css
        • style.css
      • js
      • index.html

    If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

    Download Project (Flat Pricing Table) File :

    Flat Pricing Table.zip
    File Size 4.58 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    That's it we are done now if you want to download the project file download button is provided above you can download it from there our today's post and hair and if you want to post on this site you are welcome here you can simply write your post and wrap it in a text file and simply send that post a text file to my email ID I will review and try to publish that post on my website.

    Before Leaving this page please tell me that in comment section are these pricing tables attractive or not i will be glad if you will do so.

    Thank you !




    Disqus Codes

    No comments

    Notifications

    Disqus Logo