Pricing Table

Developer
Alexander Hadik
Size
4,023 Kb
Views
22,264
  1. Pricing Table Previews
  2. Pricing Table HTML Codes
  3. Pricing Table CSS Codes

How do I make an pricing table?

What is a pricing table? How do you make a pricing table? This script and codes were developed by Alexander Hadik on 16 September 2022, Friday.

Pricing Table Previews
IQ Test

Pricing Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pricing Table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="table">	<div class="table__row--header table__row">	<div class="table__block table__block--one-fourth">Data Center</div>	<div class="table__block table__block--one-fourth table__block--align-right">Usage GB/Month</div>	<div class="table__block table__block--one-fourth table__block--align-right">Outbound Bandwidth</div>	<div class="table__block table__block--one-fourth table__block--align-right">Replication Charge</div>	</div>	<!-- U.S. -->	<div class="table__row">	<div class="table__block table__block--one-fourth table__block--highlight">U.S. (Cross Region)</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right">$0.0475</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right">$0.0900</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right"></div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Dallas</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0275</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0900</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0300</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">San Jose</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0275</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0900</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0300</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Washington DC</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0275</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0900</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0300</div>	</div>	<!-- European Union -->	<div class="table__row">	<div class="table__block table__block--one-fourth table__block--highlight">E.U. (Cross Region)</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right">$0.0504</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right">$0.0900</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right"></div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Amsterdam</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0283</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0900</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0309</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Frankfurt</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0303</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0900</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0330</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">London</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0294</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0900</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0321</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Milan</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0303</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.1200</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0330</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Paris</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0303</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.1200</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0330</div>	</div>	<!-- Asia Pacific -->	<div class="table__row">	<div class="table__block table__block--one-fourth table__block--highlight">Asia Pacific</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right"></div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right"></div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right"></div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Hong Kong</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0311</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.1400</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0339</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Singapore</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0311</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.1200</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0339</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Tokyo</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0311</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.1400</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0339</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Chennai</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0380</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.2500</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0414</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Sydney</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0330</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.1400</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0360</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Melbourne</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0330</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.1400</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0360</div>	</div>	<!-- Americas -->	<div class="table__row">	<div class="table__block table__block--one-fourth table__block--highlight">Americas</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right"></div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right"></div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right"></div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Toronto</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0283</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.1200</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0309</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Montreal</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0283</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.1200</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0309</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Mexico</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0294</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.1800</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0321</div>	</div>	<div class="table__row">	<div class="table__block table__block--one-fourth">Brazil</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0380</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.2500</div>	<div class="table__block table__block--one-fourth table__block--align-right">$0.0414</div>	</div>	<!-- Federal -->	<div class="table__row">	<div class="table__block table__block--one-fourth table__block--highlight">Federal</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right">$0.0305</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right">$0.0900</div>	<div class="table__block table__block--one-fourth table__block--highlight table__block--align-right">$0.0333</div>	</div>
</section>
<div class="separator"></div>
<section class="table">	<input type="radio" id="standard" name="type" class="table__check table__check--standard" checked>	<input type="radio" id="vault" name="type" class="table__check table__check--vault">	<div class="table__selector">	<label for="standard" class="selector__button selector__button--standard">Standard Bucket</label>	<label for="vault" class="selector__button selector__button--vault">Vault Bucket</label>	</div>	<div class="table__info">	<p class="info__text info__text--standard">Standard buckets impose no size or retrieval restrictions on objects.</p>	<p class="info__text info__text--vault">Vault buckets have a minimum duration of 30 days and a minimum object size of 128kb. <a href="#">Charges</a> apply for under usage.</p>	</div>	<h3 class="table__title">Regional</h3>	<div class="table__row--header table__row">	<div class="table__block table__block--one-fourth">Usage GB per Month</div>	<div class="table__block table__block--one-fourth">Outbound Bandwidth</div>	<div class="table__block table__block--one-fourth">Retrieval Cost per GB</div>	<div class="table__block table__block--one-fourth">Inter-regional Transfer Cost per Month</div>	</div>	<div class="table__row table__row--data">	<div class="table__block table__block--one-fourth table__block--align-right table__block--data"><span class="block__content block__content--standard">$0.03</span><span class="block__content block__content--vault">$0.0150</span></div>	<div class="table__block table__block--one-fourth table__block--align-right table__block--data"><span class="block__content block__content--standard">$0.09</span><span class="block__content block__content--vault">$0.09</span></div>	<div class="table__block table__block--one-fourth table__block--align-right table__block--data"><span class="block__content block__content--standard">Free</span><span class="block__content block__content--vault">$0.01</span></div>	<div class="table__block table__block--one-fourth table__block--align-right table__block--data"><span class="block__content block__content--standard">$0.03</span><span class="block__content block__content--vault">$0.03</span></div>	</div>	<h3 class="table__title">Cross Region</h3>	<div class="table__row--header table__row">	<div class="table__block table__block--one-fourth">Usage GB per Month</div>	<div class="table__block table__block--one-fourth">Outbound Bandwidth</div>	<div class="table__block table__block--one-fourth">Retrieval Cost per GB</div>	<div class="table__block table__block--one-fourth">Inter-regional Transfer Cost per Month</div>	</div>	<div class="table__row table__row--data">	<div class="table__block table__block--one-fourth table__block--align-right table__block--data"><span class="block__content block__content--standard">$0.0550</span><span class="block__content block__content--vault">$0.0250</span></div>	<div class="table__block table__block--one-fourth table__block--align-right table__block--data"><span class="block__content block__content--standard">$0.09</span><span class="block__content block__content--vault">$0.09</span></div>	<div class="table__block table__block--one-fourth table__block--align-right table__block--data"><span class="block__content block__content--standard">Free</span><span class="block__content block__content--vault">$0.01</span></div>	<div class="table__block table__block--one-fourth table__block--align-right table__block--data"><span class="block__content block__content--standard">$0.03</span><span class="block__content block__content--vault">$0.03</span></div>	</div>
</section>
</body>
</html>

Pricing Table - Script Codes CSS Codes

body { background-color: #EFF2F4; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: middle; -ms-flex-align: middle; align-items: middle;
}
.separator { width: 80%; height: 1px; background-color: lightgrey;
}
.selector__button { width: 50%; text-align: center;
}
.selector__button:first-of-type { border-right: 1px solid black;
}
.info__text { display: none; font-size: 14px;
}
.info__text a { text-decoration: none; color: #2d8ed8;
}
.block__content { display: none;
}
.table { width: 100%; font-family: sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0; padding: 0; font-size: 14px; line-height: 2em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 36px; margin-bottom: 36px;
}
.table__title { width: 700px;
}
.table__check { display: none;
}
.table__check--standard:checked ~ .table__selector > .selector__button--standard, .table__check--vault:checked ~ .table__selector > .selector__button--vault { font-weight: 700; color: white; background-color: #4A90E2;
}
.table__check--standard:checked ~ .table__info > .info__text--standard, .table__check--vault:checked ~ .table__info > .info__text--vault { display: inline;
}
.table__check--standard:checked ~ .table__row > .table__block > .block__content--standard, .table__check--vault:checked ~ .table__row > .table__block > .block__content--vault { display: inline;
}
.table__selector { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 300px; border: 1px solid black; border-radius: 5px;
}
.table__info { width: 700px; height: 4em; padding-top: 12px; padding-bottom: 12px;
}
.table__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 700px; background-color: white;
}
.table__row--header { background-color: #4A90E2; color: white; font-weight: 700;
}
.table__row--data { border-bottom: 1px solid lightgrey;
}
.table__block { text-align: center; padding-left: 12px; padding-right: 12px;
}
.table__block--full { width: 100%;
}
.table__block--one-fourth { -ms-flex-preferred-size: 25%; flex-basis: 25%;
}
.table__block--one-half { width: 50%;
}
.table__block--three-fourths { width: 75%;
}
.table__block--highlight { font-weight: 700; background-color: lightgrey;
}
.table__block--data { border-right: 1px solid lightgrey;
}
.table__block--data:first-of-type { border-left: 1px solid lightgrey;
}
.table__block--align-right { text-align: right;
}
Pricing Table - Script Codes
Pricing Table - Script Codes
Home Page Home
Developer Alexander Hadik
Username ahadik
Uploaded September 16, 2022
Rating 3
Size 4,023 Kb
Views 22,264
Do you need developer help for Pricing 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!

Alexander Hadik (ahadik) Script Codes
Name
Transcriptic Typography
A Pen by Alexander Hadik
IOPS Selector
Geometric Header
Transcriptic Header
Transcriptic Pricing Cards
Pricing Cards V2
Pricing Cards
Pricing Cards V3
Ops Implementation
Create amazing sales emails 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!