Pricing Tables

Developer
Joseph Victory
Size
2,609 Kb
Views
28,336
  1. Pricing Tables Previews
  2. Pricing Tables HTML Codes
  3. Pricing Tables CSS Codes

How do I make an pricing tables?

Simple pricing tables example using CSS3 transitions.. What is a pricing tables? How do you make a pricing tables? This script and codes were developed by Joseph Victory on 20 August 2022, Saturday.

Pricing Tables Previews
IQ Test

Pricing Tables - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pricing Tables</title> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:Condensed" />	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="plan"> <div class="title"> <h1>$299 <span>/month</span></h1> <p>Simple</p> </div>
<div class="containDetails">
<ul class="details"> <li class="first">5 <span>Accounts</span></li> <li>50GB<span>Storage</span></li> <li>1 <span>Domain</span></li> <li>500GB<span>Bandwidth</span></li>
</ul> </div> <div class="end"> <div class="select"> <a href="#" class="button button-flat-royal button-pill">Select Plan</a> </div></div>
</div>
<div id="plan"> <div class="title"> <h1>$1199 <span>/month</span></h1> <p>Gold</p> </div>
<div class="containDetails">
<ul class="details"> <li class="first">5 <span>Accounts</span></li> <li>50GB<span>Storage</span></li> <li>1 <span>Domain</span></li> <li>500GB<span>Bandwidth</span></li>
</ul> </div> <div class="end"> <div class="select"> <a href="#" class="button button-flat-royal button-pill">Select Plan</a> </div></div>
</div>
<div id="plan"> <div class="title"> <h1>$499 <span>/month</span></h1> <p>Plus</p> </div>
<div class="containDetails">
<ul class="details"> <li class="first">5 <span>Accounts</span></li> <li>50GB<span>Storage</span></li> <li>1 <span>Domain</span></li> <li>500GB<span>Bandwidth</span></li>
</ul> </div> <div class="end"> <div class="select"> <a href="#" class="button button-flat-royal button-pill">Select Plan</a> </div></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Pricing Tables - Script Codes CSS Codes

#plan{ width:945px; height:200px; background-color:#f6f6f6; background: -webkit-linear-gradient(left, #efefef, #e6e6e6);
background: -o-linear-gradient(left, #efefef, #e6e6e6); margin: 0 auto;
margin-top: 30px;
}
.title{ width:200px; height:200px; background-color: #a3a3a3; float:left; -webkit-transition: background-color 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s; -webkit-transition:background-color width 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s; transition: background-color width 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s;
}
.title h1{ color:white; font-family:'Open Sans'; text-transform:uppercase; font-size:30px; font-weight: 100; text-align:center; margin:0px; padding:0px; padding-top:35px;
}
.title h1 span{ font-size:10px;
}
.title p{ color:white; font-family:'Open Sans'; text-transform:uppercase; font-size:40px; font-weight:bold; text-align:center; margin:0px; padding:0px;
}
.title:hover{ background-color:#d63240; width:230px; -webkit-transition: background-color 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s; -webkit-transition:background-color width 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s; transition: background-color width 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s;
}
.containDetails{ max-width: 640px; float:left; margin-top: 29px; padding-left: 46px;
}
.details li{ display:inline-block; margin:0px; padding:0px; font-size: 30px; color: #6a6a6a; font-family:'Open Sans'; font-weight:bold; text-align: center; padding-left: 48px;
}
.first{ padding:0px!important;
}
.details{ padding:0px; float:left;
}
.details li span{ font-size:15px; text-transform:uppercase;
}
.details li span:before{ content: '\a' ; white-space: pre;
}
.select{ margin-top: 73px; margin-left: 14px;
}
.end{ width: 150px; height: 200px; background-color: #efefef; float: left; position: relative; left: 64px;
}
.button-pill {
border-radius: 50px;
}
.button {
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
background-color: #eeeeee;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color-stop(100%, #e1e1e1));
background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);
background: linear-gradient(top, #fbfbfb, #e1e1e1);
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
border: 1px solid #d4d4d4;
height: 32px;
line-height: 32px;
padding: 0px 25.6px;
font-weight: 300;
font-size: 14px;
font-family:'Open Sans';
color: #666666;
text-shadow: 0 1px 1px white;
margin: 0;
text-decoration: none;
text-align: center;
}
.button-flat-royal {
box-shadow: none;
-webkit-transition-property: background;
transition-property: background;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #d63240;
color: white;
text-shadow: none;
border: none;
}
Pricing Tables - Script Codes
Pricing Tables - Script Codes
Home Page Home
Developer Joseph Victory
Username j-w-v
Uploaded August 20, 2022
Rating 3.5
Size 2,609 Kb
Views 28,336
Do you need developer help for Pricing Tables?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joseph Victory (j-w-v) Script Codes
Name
Social Share
Login Process
A Pen by Joseph Victory
Navigation
To Do List
Fading Navigation Bar
Login Form
Instagram User Profile
Loading Animation
Portfolio Home Page
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!