Card Design, Sections

Pricing table Html template free download code

Hello everyone, today we will learn how to develop the pricing table Html template using CSS only. In the last session, we discussed how to create a Contact us page design. In today’s topic, our main concern is to build a pricing table for our website.

Pricing table Html template

Pricing tables are used by all the websites and applications which are selling their services online. It helps them to show the price and features of that work. It has different methods of showing the price in the table with different features.

As you can see in the image that it has a beautiful background. Then it has three boxes and in that boxes, it has created the tables. Every table has a different colour and name. Then it has different prices, different names, different colours and different features. These buttons have a border but when you hover over it then it changes the colour to its box colour. It is possible to use the hover property at buttons. We can create it using Html and CSS for our website and it will be the same as you can see in the image. These tables are mostly used by those websites which are offering their services.

How to create a Pricing table Html template?

It is so simple and easy to create pricing tables in Html and CSS for any website. We will build it in three simple steps so, follow every step If you want to create it for your website.

Download a code editor for the pricing table HTML template:

It is very necessary to download a code editor for Html and CSS because without downloading it we can’t write the code. And in the end, we cant achieve anything. It can be vs code, brackets and sublime text 3 etc to write the code.

Source code of Html:

First, we have to write the content of the tables with the help of Html. Don’t forget to save the file with the extension of .html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pricing Tabel - FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="container">
      <div class="pricing-table table1">
        <div class="pricing-header">
          <div class="price"><span>$</span>19</div>
          <div class="title">Basic</div>
        </div>
        <ul class="pricing-list">
          <li><strong>20GB</strong> Storage</li>
          <div class="border"></div>
          <li><strong>4</strong> Email Address</li>
          <div class="border"></div>
          <li><strong>1</strong> Domain Name</li>
          <div class="border"></div>
          <li><strong>24h</strong> Support</li>
        </ul>
        <a href="#">Order Now</a>
      </div>

      <div class="pricing-table table2">
        <div class="pricing-header">
          <div class="price"><span>$</span>39</div>
          <div class="title">Pro</div>
        </div>
        <ul class="pricing-list">
          <li><strong>60GB</strong> Storage</li>
          <div class="border"></div>
          <li><strong>10</strong> Email Address</li>
          <div class="border"></div>
          <li><strong>3</strong> Domain Name</li>
          <div class="border"></div>
          <li><strong>24h</strong> Support</li>
        </ul>
        <a href="#">Order Now</a>
      </div>

      <div class="pricing-table table3">
        <div class="pricing-header">
          <div class="price"><span>$</span>79</div>
          <div class="title">Premiem</div>
        </div>
        <ul class="pricing-list">
          <li><strong>200GB</strong> Storage</li>
          <div class="border"></div>
          <li><strong>30</strong> Email Address</li>
          <div class="border"></div>
          <li><strong>10</strong> Domain Name</li>
          <div class="border"></div>
          <li><strong>24h</strong> Support</li>
        </ul>
        <a href="#">Order Now</a>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Pricing Tabel - FantacyDesigns</title>

</head>

<body>

<div class="title">Basic</div>

</div>

<li><strong>20GB</strong> Storage</li>

<li><strong>4</strong> Email Address</li>

<li><strong>1</strong> Domain Name</li>

<li><strong>24h</strong> Support</li>

</ul>

<a href="#">Order Now</a>

</div>

</div>

<li><strong>60GB</strong> Storage</li>

<li><strong>10</strong> Email Address</li>

<li><strong>3</strong> Domain Name</li>

<li><strong>24h</strong> Support</li>

</ul>

<a href="#">Order Now</a>

</div>

<div class="title">Premiem</div>

</div>

<li><strong>200GB</strong> Storage</li>

<li><strong>30</strong> Email Address</li>

<li><strong>10</strong> Domain Name</li>

<li><strong>24h</strong> Support</li>

</ul>

<a href="#">Order Now</a>

</div>

</body>

</html>

Source code of CSS:

It is used for designing pricing tables.

*{
  margin: 0;
  padding: 0;
  font-family: "Open Sans",sans-serif;
  text-decoration: none;
  list-style: none;
}

body{
  background-image: url("bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.container{
 height: 350px;
  max-width: 1300px;
  margin: auto;
  margin-top: 320px;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
  border-left: 5px solid #EA6565;
    border-right: 5px solid #569BFF;
}

.pricing-table{
  background: #f1f1f1;
  flex: 1;
  margin: 50px;
  margin-top: -220px;
  text-transform: uppercase;
 box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.pricing-header{
  color: #fff;
  position: relative;
  font-family: 'Yaldevi', sans-serif;
  margin-bottom: 20px;

}

.price{
  font-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  font-weight: bold;
  height: 100px;

}

.price span{
  font-size: 30px;
}

.title{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,50%);
  width: 60%;
  max-width: 360px;
  text-align: center;
  padding: 8px 0;
  font-size: 16px;
  padding: 15px;
  border-radius: 50px;
  font-weight: 800;

}

.pricing-list{
  padding: 10px 20px;
  margin-top: 50px;
}

.pricing-list li{
  margin: 8px 0;
  font-size: 14px;
  color: #344;
  text-align: center;
}

.border{
  width: 80px;
  height: 1px;
  background: #ddd;
  margin: auto;
}

.pricing-table a{
  display: block;
  width: 40%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 30px;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  border: 1px solid;
  max-width: 360px;
  transition: .2s linear;
  padding: 12px;
    border-radius: 30px;
}
.pricing-table a:hover{
  border-radius: 30px;
}
.table1 .pricing-header{
background-image: linear-gradient(to right top, #1673ff, #0083ff, #0092fd, #019ff8, #3cabf2);
}
.table2 .pricing-header{
  background-image: linear-gradient(to right top, #e3404e, #e14556, #df4a5d, #dd4f64, #da546b);

}
.table3 .pricing-header{
background-image: linear-gradient(to right top, #ffc75f, #fecd50, #fad341, #f4da2e, #ebe212);
}

.table1 .title{
background:#2C73D2;

}
.table2 .title{
background:#EA6565;
}
.table3 .title{
background:#FFC75F;
}

.table1 a{
  color: #1673ff;
}
.table2 a{
  color: #e14556;
}
.table3 a{
  color: #ffc75f;
}

.table1 a:hover{
background-image: linear-gradient(to right top, #1673ff, #0083ff, #0092fd, #019ff8, #3cabf2);
  color: #fff;
}
.table2 a:hover{
  background-image: linear-gradient(to right top, #e3404e, #e14556, #df4a5d, #dd4f64, #da546b);
  color: #fff;
}
.table3 a:hover{
background-image: linear-gradient(to right top, #ffc75f, #fecd50, #fad341, #f4da2e, #ebe212);
  color: #fff;
}

@media screen and (max-width:780px) {
  .pricing-table{
    flex: 100%;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

margin: 0;

padding: 0;

font-family: "Open Sans",sans-serif;

text-decoration: none;

list-style: none;

}

body{

background-image: url("bg.jpg");

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.container{

height: 350px;

max-width: 1300px;

margin: auto;

margin-top: 320px;

padding: 40px;

display: flex;

flex-wrap: wrap;

box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;

border-bottom-left-radius: 150px;

border-bottom-right-radius: 150px;

border-left: 5px solid #EA6565;

border-right: 5px solid #569BFF;

}

.pricing-table{

background: #f1f1f1;

flex: 1;

margin: 50px;

margin-top: -220px;

text-transform: uppercase;

box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

}

.pricing-header{

color: #fff;

position: relative;

font-family: 'Yaldevi', sans-serif;

margin-bottom: 20px;

}

.price{

font-size: 60px;

display: flex;

align-items: center;

justify-content: center;

padding: 40px 0;

font-weight: bold;

height: 100px;

}

.price span{

font-size: 30px;

}

.title{

position: absolute;

bottom: 0;

left: 50%;

transform: translate(-50%,50%);

width: 60%;

max-width: 360px;

text-align: center;

padding: 8px 0;

font-size: 16px;

padding: 15px;

border-radius: 50px;

font-weight: 800;

}

.pricing-list{

padding: 10px 20px;

margin-top: 50px;

}

.pricing-list li{

margin: 8px 0;

font-size: 14px;

color: #344;

text-align: center;

}

.border{

width: 80px;

height: 1px;

background: #ddd;

margin: auto;

}

.pricing-table a{

display: block;

width: 40%;

margin: auto;

margin-top: 20px;

margin-bottom: 30px;

text-align: center;

padding: 8px 0;

font-size: 14px;

border: 1px solid;

max-width: 360px;

transition: .2s linear;

padding: 12px;

border-radius: 30px;

}

.pricing-table a:hover{

border-radius: 30px;

}

.table1 .pricing-header{

background-image: linear-gradient(to right top, #1673ff, #0083ff, #0092fd, #019ff8, #3cabf2);

}

.table2 .pricing-header{

background-image: linear-gradient(to right top, #e3404e, #e14556, #df4a5d, #dd4f64, #da546b);

}

.table3 .pricing-header{

background-image: linear-gradient(to right top, #ffc75f, #fecd50, #fad341, #f4da2e, #ebe212);

}

.table1 .title{

background:#2C73D2;

}

.table2 .title{

background:#EA6565;

}

.table3 .title{

background:#FFC75F;

}

.table1 a{

color: #1673ff;

}

.table2 a{

color: #e14556;

}

.table3 a{

color: #ffc75f;

}

.table1 a:hover{

background-image: linear-gradient(to right top, #1673ff, #0083ff, #0092fd, #019ff8, #3cabf2);

color: #fff;

}

.table2 a:hover{

background-image: linear-gradient(to right top, #e3404e, #e14556, #df4a5d, #dd4f64, #da546b);

color: #fff;

}

.table3 a:hover{

background-image: linear-gradient(to right top, #ffc75f, #fecd50, #fad341, #f4da2e, #ebe212);

color: #fff;

}

@media screen and (max-width:780px) {

.pricing-table{

flex: 100%;

}

Therefore by following the above three steps, you will be able to create a pricing table for your website but if you are still facing any errors in creating it then we have a solution to your problems. We are providing the source code and you have to download it.

Download source code:

In this .zip file, we have placed all the necessary code and files which will help you to create the pricing table for your website.

The task with Conclusion:

The pricing table is a requirement of services websites and businesses as well. It shows the price of that service along with offers and work related to that service. Here we have three price tables in a single row. Just copy a single table and paste that column. Create four columns in a row. Change the top header colour of the columns into a gradient. Then add icons with Basic, Pro, and Premium heading for learning purposes.

I hope you like this post and that it was very helpful to you and to your website as well. So, must follow us for more premium templates and they will help you to boost your web development knowledge.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download