Code Asteroid IDE : Responsive pricing table using html

- Home
- Services
- Our Products
  ›
  - Back
    ‹
  - Palette RGB
  - Code Asteroid
- Skill Test
- Events
- Videos
- News
  ›
  - Back
    ‹
  - Jobs & Hiring
  - Tech News
  - Startups
- Aptitude Test
- Technology
  ›
  - Back
    ‹
  - Developer Corner
  - Tutorials

Responsive pricing table using html Views: 633 By: Ankur Hack

Contribute Run

HTML

<div class="outer-con-wrapper">
  <section id="fh5co-pricing" data-section="pricing">
        <div class="fh5co-pricing">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 section-heading text-center">
                        <h2 class="to-animate">
                            <span>Plans Built For Every One</span>
                        </h2>
                        <div class="row">
                            <div class="col-md-12 subtext des-con">
                                <h3 class="to-animate">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove. </h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="price-box to-animate">
                            <h2 class="pricing-plan">Starter</h2>
                            <div class="price">
                                <sup class="currency">$</sup>7
                                <small>/mo</small>
                            </div>
                            <p>Basic customer support for small business</p>
                            <hr>
                            <ul class="pricing-info">
                                <li>10 projects</li>
                                <li>20 Pages</li>
                                <li>20 Emails</li>
                                <li>100 Images</li>
                            </ul>
                            <p>
                                <a href="#" class="btn btn-primary">Read More</a>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="price-box to-animate">
                            <h2 class="pricing-plan">Regular</h2>
                            <div class="price">
                                <sup class="currency">$</sup>19
                                <small>/mo</small>
                            </div>
                            <p>Basic customer support for small business</p>
                            <hr>
                            <ul class="pricing-info">
                                <li>15 projects</li>
                                <li>40 Pages</li>
                                <li>40 Emails</li>
                                <li>200 Images</li>
                            </ul>
                            <p>
                                <a href="#" class="btn btn-primary">Read More</a>
                            </p>
                        </div>
                    </div>
                    <div class="clearfix visible-sm-block"></div>
                    <div class="col-md-3 col-sm-6 to-animate">
                        <div class="price-box popular custom-popular-price">
                            <div class="popular-text custom-popular-back">Best value</div>
                            <h2 class="pricing-plan">Plus</h2>
                            <div class="price">
                                <sup class="currency">$</sup>79
                                <small>/mo</small>
                            </div>
                            <p>Basic customer support for small business</p>
                            <hr>
                            <ul class="pricing-info">
                                <li>Unlimitted projects</li>
                                <li>100 Pages</li>
                                <li>100 Emails</li>
                                <li>700 Images</li>
                            </ul>
                            <p>
                                <a href="#" class="btn btn-primary">Read More</a>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="price-box to-animate">
                            <h2 class="pricing-plan">Enterprise</h2>
                            <div class="price">
                                <sup class="currency">$</sup>125
                                <small>/mo</small>
                            </div>
                            <p>Basic customer support for small business</p>
                            <hr>
                            <ul class="pricing-info">
                                <li>Unlimitted projects</li>
                                <li>Unlimitted Pages</li>
                                <li>Unlimitted Emails</li>
                                <li>Unlimitted Images</li>
                            </ul>
                            <p>
                                <a href="#" class="btn btn-primary">Read More</a>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="row">
                  <div class="col-md-3"></div>
                    <div class="col-md-6 to-animate">
                        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
                            <a href="#">Learn More</a>
                        </p>
                    </div>
                    <div class="col-md-3"></div>
                </div>

            </div>
        </div>
    </section>
</div>

CSS

.outer-con-wrapper{
  margin:20px 0
}
.section-heading {
    float: left;
    width: 100%;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.section-heading h2 {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: 400;
    color: #333;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
    line-height: 1.5;
    letter-spacing: 2px;
}
.section-heading h2 span {
    position: relative;
}
.des-con{
  text-align:center;
}
.section-heading h3 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #8f989f;
    position: relative;
    display: block;
    padding-bottom: 30px;
}

#fh5co-pricing .price-box {
    border: 2px solid #ECEEF0;
    text-align: center;
    padding: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 40px;
    position: relative;
}
#fh5co-pricing .pricing-plan {
    margin: 0;
    padding: 0;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}
#fh5co-pricing .price {
    font-size: 50px;
    color: #000;
}
#fh5co-pricing .pricing-info {
    padding: 0;
    margin: 0 0 30px 0;
}

#fh5co-pricing .pricing-info li {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
#fh5co-pricing .price-box.popular {
    border: 2px solid #00ADB5;
}
#fh5co-pricing .price-box.popular .popular-text {
    top: 0;
    left: 50%;
    margin-left: -65px;
    margin-top: -2em;
    position: absolute;
    padding: 4px 20px;
    background: #00ADB5;
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}
#fh5co-pricing .price-box.popular .popular-text:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-top: 10px solid black;
    border-top-color: #00ADB5;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
#fh5co-pricing .pricing-plan {
    margin: 0;
    padding: 0;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

Site

Training

Save Code

No code found to submit, Please add code in editors.

Thank you for your contribution. Our experts are soon review your canvas and update you.