Pricing Cards V3

Developer
Alexander Hadik
Size
6,584 Kb
Views
28,336
  1. Pricing Cards V3 Previews
  2. Pricing Cards V3 HTML Codes
  3. Pricing Cards V3 CSS Codes
  4. Pricing Cards V3 JS Codes

How do I make an pricing cards v3?

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

Pricing Cards V3 Previews
IQ Test

Pricing Cards V3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pricing Cards V3</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img class="header" src="https://cloud.githubusercontent.com/assets/3239506/16855155/b041905e-49d9-11e6-989b-5732df88a4fe.png" alt="" />
<div class="page"> <h1 class="page__title">Order Object Storage</h1> <section class="column column__one-third"> <article class="card card--transparent card--has-header"> <h2 class="card__title">Select API Type</h2> <select class="card__dropdown"> <option>IBM Cloud Object Storage</option> <option>Swift Object Storage</option> </select> </article> </section> <section class="column column__one-third"> <article class="card card--transparent"> <p>IBM Cloud Object Storage is the coolest Object Storage with more objects in it than any other cloud. We challenge you to find a cloud with more objects.</p> </article> </section> <section class="column column__one-third"> <article class="card"> <p>Object Storage costs are accrued on a pay-as-you-go basis. Prices may differ depending on the datacenters used.</p> <button class="card__primary-action">Continue</button> </article> </section> <section class="column column__full"> <h1 class="page__title">Explore Pricing</h1> </section> <section class="column column__full card"> <section class="column column__one-third column__right-divide"> <article class="card card--no-header card--marginless"> <select name="geoType" id="geoType" class="card__dropdown card__dropdown--padded"> <option value="Cross Region">Cross-Regions</option> <option value="Regions">Regions</option> </select> <div class="card__table" id="crossRegions"> <h4 class="table__header">United States</h4> <div class="table__rows"> <span class="table__row table__row--data table__row--selected" data-content="Cross region object storage duplicates your data across three data centers for improved resiliency.">U.S. Geography</span> </div> <h4 class="table__header">European Union</h4> <div class="table__rows"> <span class="table__row table__row--data" data-content="Cross region object storage duplicates your data across three data centers for improved resiliency.">E.U. Geography</span> </div> </div> <div class="card__table card__table--hide" id="regions"> <h4 class="table__header">United States</h4> <div class="table__rows"> <span class="table__row table__row--data" data-content="The Dallas region is comprised of three data centers, DAL 05, DAL 08, and DAL 09.">Dallas</span> <span class="table__row table__row--data" data-content="The San Jose region is comprised of three data centers, SH 05, SH 08, and SH 09.">San Jose</span> <span class="table__row table__row--data" data-content="The Washington DC region is comprised of three data centers, DC 05, DC 08, and DC 09.">Washington DC</span> </div> <h4 class="table__header">European Union</h4> <div class="table__rows"> <span class="table__row table__row--data" data-content="The Amsterdam region is comprised of three data centers, AMS 05, AMS 08, and AMS 09.">Amsterdam</span> <span class="table__row table__row--data" data-content="The Frankfurt region is comprised of three data centers, FK 05, FK 08, and FK 09.">Frankfurt</span> <span class="table__row table__row--data" data-content="The London region is comprised of three data centers, LON 05, LON 08, and LON 09.">London</span> <span class="table__row table__row--data" data-content="The Milan region is comprised of three data centers, MIL 05, MIL 08, and MIL 09.">Milan</span> <span class="table__row table__row--data" data-content="The Paris region is comprised of three data centers, PAR 05, PAR 08, and PAR 09.">Paris</span> </div> <h4 class="table__header">Asia Pacific</h4> <div class="table__rows"> <span class="table__row table__row--data" data-content="The Hong Kong region is comprised of three data centers, HK 05, HK 08, and HK 09.">Hong Kong</span> <span class="table__row table__row--data" data-content="The Singapore region is comprised of three data centers, SGP 05, SGP 08, and SGP 09.">Singapore</span> <span class="table__row table__row--data" data-content="The Tokyo region is comprised of three data centers, TOK 05, TOK 08, and TOK 09.">Tokyo</span> <span class="table__row table__row--data" data-content="The Chennai region is comprised of three data centers, CHEN 05, CHEN 08, and CHEN 09.">Chennai</span> <span class="table__row table__row--data" data-content="The Sydney region is comprised of three data centers, SYD 05, SYD 08, and SYD 09.">Sydney</span> <span class="table__row table__row--data" data-content="The Melbourne region is comprised of three data centers, MEL 05, MEL 08, and MEL 09.">Melbourne</span> </div> <h4 class="table__header">Americas</h4> <div class="table__rows"> <span class="table__row table__row--data" data-content="The Toronto region is comprised of three data centers, TOR 05, TOR 08, and TOR 09.">Toronto</span> <span class="table__row table__row--data" data-content="The Montreal region is comprised of three data centers, MONT 05, MONT 08, and MONT 09.">Montreal</span> <span class="table__row table__row--data" data-content="The Mexico region is comprised of three data centers, MEX 05, MEX 08, and MEX 09.">Mexico</span> <span class="table__row table__row--data" data-content="The Brazil region is comprised of three data centers, BRA 05, BRA 08, and BRA 09.">Brazil</span> </div> </div> </article> </section> <section class="column column__two-thirds"> <article class="card card--has-header" id="geographyInfo"> <h2 class='card__title'>U.S. Geography</h2> <p class="card__copy">Cross region object storage duplicates your data across three data centers for improved resiliency.</p> </article> <article class="card card--has-header"> <h2 class="card__title">Standard Bucket</h2> <p class="card__info">Standard buckets impose no size or retrieval restrictions on objects.</p> <div class="card_data-table"> <div class="data-table__row data-table__row--header"> <div class="data-table__block data-table__block--quarter">Usage GB per Month</div> <div class="data-table__block data-table__block--quarter">Outbound Bandwidth</div> <div class="data-table__block data-table__block--quarter">Retrieval Cost per GB</div> <div class="data-table__block data-table__block--quarter">Transfer Cost per Month</div> </div> <div class="data-table__row"> <div class="data-table__block data-table__block--quarter data-table__block--data data-table__block--align-right">$0.03</div> <div class="data-table__block data-table__block--quarter data-table__block--data data-table__block--align-right">$0.09</div> <div class="data-table__block data-table__block--quarter data-table__block--data data-table__block--align-right">Free</div> <div class="data-table__block data-table__block--quarter data-table__block--data data-table__block--align-right">$0.03</div> </div> </div> </article> <article class="card card--has-header"> <h2 class="card__title">Vault Bucket</h2> <p class="card__info">Vault buckets are intended for long-term storage. Objects stored in a vault have a minimum duration of 30 days and a minimum size of 128kb. <a href="#">Charges</a> apply for under usage.</p> <div class="card_data-table"> <div class="data-table__row data-table__row--header"> <div class="data-table__block data-table__block--quarter">Usage GB per Month</div> <div class="data-table__block data-table__block--quarter">Outbound Bandwidth</div> <div class="data-table__block data-table__block--quarter">Retrieval Cost per GB</div> <div class="data-table__block data-table__block--quarter">Transfer Cost per Month</div> </div> <div class="data-table__row"> <div class="data-table__block data-table__block--quarter data-table__block--data data-table__block--align-right">$0.0125</div> <div class="data-table__block data-table__block--quarter data-table__block--data data-table__block--align-right">$0.09</div> <div class="data-table__block data-table__block--quarter data-table__block--data data-table__block--align-right">$0.01</div> <div class="data-table__block data-table__block--quarter data-table__block--data data-table__block--align-right">$0.03</div> </div> </div> </article> </section> </section>
</div> <script src="js/index.js"></script>
</body>
</html>

Pricing Cards V3 - Script Codes CSS Codes

body { width: 1024px; margin-left: auto; margin-right: auto; 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; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 14px;
}
.header { width: 100%; height: 72px;
}
.page { width: 100%; background-color: #EFF2F4; max-width: 1000px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 24px; padding-right: 24px; padding-bottom: 36px;
}
.page__title { font-size: 1.5em; color: #4A90E2; width: 100%;
}
.data-table { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.data-table__row { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; box-sizing: border-box; border-bottom: 1px solid lightgrey;
}
.data-table__row--header { background-color: #4A90E2; color: white; text-align: center; font-weight: 500;
}
.data-table__block { padding: 12px;
}
.data-table__block--data { border-right: 1px solid lightgrey;
}
.data-table__block--data:first-of-type { border-left: 1px solid lightgrey; padding-left: 12px;
}
.data-table__block--quarter { width: 25%;
}
.data-table__block--align-right { text-align: right;
}
.card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; background-color: white; margin-bottom: 0; margin-top: 2em; padding: 16px; box-sizing: border-box; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
.card--marginless { padding: 0;
}
.card .card { box-shadow: none;
}
.card .card__title { margin-left: 0;
}
.card__title { font-size: 1.5em; font-weight: 200; margin-top: -2.25em; margin-left: -16px; margin-bottom: 0;
}
.card__primary-action { height: 2em; font-size: 1.125em; font-weight: 100; display: block; width: 100px; text-align: center; -ms-flex-item-align: end; align-self: flex-end; border-radius: 0; background: #4A90E2; border: 1px solid lightgrey; color: white;
}
.card__info { line-height: 1.5em;
}
.card__info a { text-decoration: none; color: #2d8ed8;
}
.card__table { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: -12px;
}
.card__table--hide { display: none;
}
.card__dropdown { margin-top: 12px; background: white; border-radius: 0; font-size: 16px;
}
.card__dropdown--padded { margin: 0 12px; margin-bottom: 12px;
}
.card__data-table { width: 100%;
}
.card--transparent { background-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0;
}
.card--transparent .card__title { margin-left: 0;
}
.card--has-header { margin-top: 3.5em;
}
.card--no-header { margin-top: 0;
}
.table__header { font-size: 16px; margin-bottom: 12px; margin-left: 12px;
}
.table__header:first-of-type { margin-top: 12px;
}
.table__subheader { font-size: 12px; color: grey; margin-bottom: 6px; margin-top: 0; text-transform: uppercase; margin-left: 24px;
}
.table__rows { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-bottom: 1px solid lightgrey;
}
.table__rows--single { margin-bottom: 12px; border-bottom: none;
}
.table__rows:last-of-type { border-bottom: none;
}
.table__row { line-height: 2.5em; border-bottom: 1px solid lightgrey; padding-left: 42px; padding-right: 12px; cursor: pointer; height: 2.5em;
}
.table__row--data { border-bottom: 0;
}
.table__row--selected { background-color: #4A90E2 !important; color: white;
}
.column { box-sizing: border-box; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-right: 12px; padding-left: 12px;
}
.column > .column { padding: 0;
}
.column__right-divide { border-right: 1px solid lightgrey; margin-top: 24px;
}
.column.card { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0; margin-left: 12px; margin-right: 12px;
}
.column__two-thirds { width: calc(100% * (2/3));
}
.column__one-third { width: calc(100% * (1/3));
}
.column__full { width: 100%;
}

Pricing Cards V3 - Script Codes JS Codes

'use strict';
var tableRows = [].slice.call(document.querySelectorAll('.table__row'));
for (var _iterator = tableRows, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { var _ref; if (_isArray) { if (_i >= _iterator.length) break; _ref = _iterator[_i++]; } else { _i = _iterator.next(); if (_i.done) break; _ref = _i.value; } var row = _ref; row.addEventListener('click', function (event) { document.querySelector("#geographyInfo .card__title").innerHTML = event.target.innerHTML; document.querySelector("#geographyInfo .card__copy").innerHTML = event.target.getAttribute('data-content'); for (var _iterator2 = tableRows, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { var _ref2; if (_isArray2) { if (_i2 >= _iterator2.length) break; _ref2 = _iterator2[_i2++]; } else { _i2 = _iterator2.next(); if (_i2.done) break; _ref2 = _i2.value; } var _row = _ref2; _row.classList.remove('table__row--selected'); }; event.target.classList.add('table__row--selected'); });
};
var geoSelector = document.querySelector('#geoType');
geoSelector.addEventListener('change', function (event) { if (event.target.value == 'Regions') { document.querySelector('#regions').classList.remove('card__table--hide'); document.querySelector('#crossRegions').classList.add('card__table--hide'); } else { document.querySelector('#regions').classList.add('card__table--hide'); document.querySelector('#crossRegions').classList.remove('card__table--hide'); }
});
Pricing Cards V3 - Script Codes
Pricing Cards V3 - Script Codes
Home Page Home
Developer Alexander Hadik
Username ahadik
Uploaded September 16, 2022
Rating 3
Size 6,584 Kb
Views 28,336
Do you need developer help for Pricing Cards V3?

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
Welcome to Transcriptic
Workcell
Transcriptic Header
Protocol Card
Transcriptic Pricing Cards
Table Action
Pricing Cards V2
Red Pill or Blue Pill But Only CSS
Basil Tree
Transcriptic Typography
Create amazing art & images 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!