Price Table

Developer
Joo Vctor De Oliveira Santos
Size
2,460 Kb
Views
32,384
  1. Price Table Previews
  2. Price Table HTML Codes
  3. Price Table CSS Codes

How do I make an price table?

What is a price table? How do you make a price table? This script and codes were developed by Joo Vctor De Oliveira Santos on 27 August 2022, Saturday.

Price Table Previews
IQ Test

Price Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Price Table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="prices">	<div class="price-item">	<div class="price-header">	<h4 class="price-title">Starter Package</h4>	<h5 class="price-sub-title">Basic</h5>	</div>	<div class="price-image">	<img src="http://www.iconsdb.com/icons/preview/orange/best-price-badge-xxl.png" alt="Best Price" />	</div>	<div class="price-body">	<h6 class="price-price">$ <span class="price-price-number">99.99</span></h6>	<ul class="price-details">	<li class="price-details-included">Lorem</li>	<li>Ipsum</li>	<li>Dolor</li>	<li>Sit</li>	<li class="price-details-disabled">Amet</li>	</ul>	</div>	<div class="price-footer">	<a href="#">Buy</a>	</div>	</div>	<div class="price-item">	<div class="price-header">	<h4 class="price-title">Advance Package</h4>	<h5 class="price-sub-title">Advanced</h5>	</div>	<div class="price-image">	<img src="http://www.rwandafoam.com/wp-content/uploads/2016/06/pricing-icon.png" alt="Best Price" />	</div>	<div class="price-body">	<h6 class="price-price">$ <span class="price-price-number">999.99</span></h6>	<ul class="price-details">	<li class="price-details-included">Lorem</li>	<li>Ipsum</li>	<li class="price-details-included">Dolor</li>	<li>Sit</li>	<li class="price-details-disabled">Amet</li>	</ul>	</div>	<div class="price-footer">	<a href="#">Buy</a>	</div>	</div>	<div class="price-item">	<div class="price-header">	<h4 class="price-title">Professional Package</h4>	<h5 class="price-sub-title">Professional</h5>	</div>	<div class="price-image">	<img src="https://www.iconexperience.com/_img/g_collection_png/standard/512x512/price_sticker.png" alt="Best Price" />	</div>	<div class="price-body">	<h6 class="price-price">$ <span class="price-price-number">9,999.99</span></h6>	<ul class="price-details">	<li class="price-details-included">Lorem</li>	<li class="price-details-included">Ipsum</li>	<li class="price-details-included">Dolor</li>	<li class="price-details-included">Sit</li>	<li class="price-details-disabled">Amet</li>	</ul>	</div>	<div class="price-footer">	<a href="#">Buy</a>	</div>	</div>
</div>
</body>
</html>

Price Table - Script Codes CSS Codes

.prices{	display:inline-block;	position: relative;	left: 50%;	transform: translateX(-50%);
}
.prices > .price-item{	display:inline-block;	min-width: 200px;	max-width: 300px;	background-color: #ddd;	border-radius: 4px;	border: 2px solid #cdcdcd;	padding: 10px 20px;	transition: all 400ms ease-in-out;
}
.prices > .price-item:hover{	background-color: #eee;
}
.prices > .price-item > .price-header{	position: relative;
}
.prices > .price-item > .price-header > .price-title,
.prices > .price-item > .price-header > .price-sub-title{	font-size: 1.5em;	font-family: "Roboto", "Verdana";	color: #555;	margin-bottom: 15px;	transition: all 400ms ease-in-out;	text-align: center;
}
.prices > .price-item > .price-header > .price-sub-title{	font-size: 13px;	margin-top: 0;	text-transform: uppercase;	color: #777;
}
.prices > .price-item:hover > .price-header > .price-title{	color: #343434;
}
.prices > .price-item:hover > .price-header > .price-sub-title{	color: #555555;
}
.prices > .price-item > .price-image{	position: relative;
}
.prices > .price-item > .price-image > img{	position: relative;	max-height: 250px;	max-width: 250px;	width: 100%;	height: auto;	left: 50%;	transform: translateX(-50%);
}
.prices > .price-item > .price-body::before{	position: absolute;	content: '';	left: -20px;	right: -20px;	bottom: 0;	top: 0;	background-color: #e4e4e4;	border-top: 1px solid white;	border-bottom: 1px solid white;	z-index: -1;	transition: all 400ms ease-in-out;
}
.prices > .price-item:hover > .price-body::before{	background-color: #fff;
}
.prices > .price-item > .price-body{	padding: 1px 0px;	position: relative;	z-index: 1;	margin: 6px 0 6px 0;
}
.prices > .price-item > .price-body > .price-price{	text-align: center;	font-size: 1.5em;	margin: 10px;	font-family: "Roboto", "Verdana";	color: #444;	opacity: 0.8;	transition: all 400ms ease-in-out;
}
.prices > .price-item:hover > .price-body > .price-price{	color: #222;	opacity: 1;
}
.prices > .price-item > .price-body > ul.price-details{	list-style: none;	margin: 0 0 5px 0;	padding: 0;	width: 100%;
}
.prices > .price-item > .price-body > ul.price-details > li{	font-family: "Roboto", "Verdana";	text-align: center;	padding: 3px;	margin: 1px;	color: #555;	position: relative;
}
.prices > .price-item > .price-body > ul.price-details > li.price-details-included{	border-right: 4px dotted white;	border-left: 4px dotted white;	background-color: #7f7;
}
.prices > .price-item > .price-body > ul.price-details > li.price-details-disabled{	border-right: 4px dotted white;	border-left: 4px dotted white;	background-color: #bbb;	color: #666;
}
.prices > .price-item > .price-footer > a{	position: relative;	display: block;	width: 100%;	text-align: center;	padding: 4px 0;	background-color: #16ff16;	border-radius: 4px;	border: 1px solid #7f7;	color: green;	text-decoration: none;	text-transform: uppercase;
}
Price Table - Script Codes
Price Table - Script Codes
Home Page Home
Developer Joo Vctor De Oliveira Santos
Username jvhti
Uploaded August 27, 2022
Rating 3
Size 2,460 Kb
Views 32,384
Do you need developer help for Price Table?

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!

Joo Vctor De Oliveira Santos (jvhti) Script Codes
Name
Wikipedia Viewer
Portfolio Flat
Page Size Menu Example
Local Weather
JQuery UI Playground
Youtube Random Video With Cover Image
Pomodoro
Twitch JSON API
A Pen by Joo Vctor de Oliveira Santos
Personal Portfolio
Create amazing SEO content 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!