Pricing Cards

Developer
Alexander Hadik
Size
4,811 Kb
Views
20,240
  1. Pricing Cards Previews
  2. Pricing Cards HTML Codes
  3. Pricing Cards CSS Codes
  4. Pricing Cards JS Codes

How do I make an pricing cards?

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

Pricing Cards Previews
IQ Test

Pricing Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pricing Cards</title> <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__one-third"> <article class="card card--has-header"> <h2 class="card__title">Regions</h2> <div class="card__table"> <h4 class="table__header">United States</h4> <span class="table__row table__row--selected">Dallas</span> <span class="table__row">San Jose</span> <span class="table__row">Washington DC</span> <h4 class="table__header">European Union</h4> <span class="table__row">Amsterdam</span> <span class="table__row">Frankfurt</span> <span class="table__row">London</span> <span class="table__row">Milan</span> <span class="table__row">Paris</span> <h4 class="table__header">Asia Pacific</h4> <span class="table__row">Hong Kong</span> <span class="table__row">Singapore</span> <span class="table__row">Tokyo</span> <span class="table__row">Chennai</span> <span class="table__row">Sydney</span> <span class="table__row">Melbourne</span> <h4 class="table__header">Americas</h4> <span class="table__row">Toronto</span> <span class="table__row">Montreal</span> <span class="table__row">Mexico</span> <span class="table__row">Brazil</span> </div> </article> </section> <section class="column column__two-thirds"> <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>
</div> <script src="js/index.js"></script>
</body>
</html>

Pricing Cards - 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__title { font-size: 1.25em; 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;
}
.card__dropdown { margin-top: 12px; background: white; border-radius: 0; font-size: 16px;
}
.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;
}
.table__row { line-height: 2em; border-bottom: 1px solid lightgrey; padding-left: 12px; padding-right: 12px; cursor: pointer;
}
.table__row--selected { background-color: #4A90E2; 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__two-thirds { width: calc(100% * (2/3));
}
.column__one-third { width: calc(100% * (1/3));
}

Pricing Cards - Script Codes JS Codes

'use strict';
var tableRows = document.querySelectorAll('.table__row');
tableRows.forEach(function (row) { row.addEventListener('click', function (event) { tableRows.forEach(function (row) { row.classList.remove('table__row--selected'); }); event.target.classList.add('table__row--selected'); });
});
Pricing Cards - Script Codes
Pricing Cards - Script Codes
Home Page Home
Developer Alexander Hadik
Username ahadik
Uploaded September 16, 2022
Rating 3
Size 4,811 Kb
Views 20,240
Do you need developer help for Pricing Cards?

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 Pricing Cards
Workcell
Submit Card
Basil Tree
HSL SVG Gradient
Transcriptic Header
Loader
Table Action
IOPS Selector
Geometric Header
Create amazing marketing copy 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!