Pricing View with Map

Developer
Alexander Hadik
Size
3,869 Kb
Views
16,192
  1. Pricing View with Map Previews
  2. Pricing View with Map HTML Codes
  3. Pricing View with Map CSS Codes

How do I make an pricing view with map?

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

Pricing View with Map Previews
IQ Test

Pricing View with Map - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pricing View with Map</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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">	<h3 class="table__title">Region Map</h3>	<p class="table__caption">Select region to see pricing info</p>	<div class="table__map">	</div>	<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">Dallas Intra-Region Pricing</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">U.S. Cross Region Pricing</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 View with Map - 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__map { width: 80%; max-width: 900px; height: 250px; background-position: center; background-size: cover; margin-bottom: 36px; background-image: url("http://www.freelargeimages.com/wp-content/uploads/2014/11/Google_world_map-7.png");
}
.table__title { width: 80%; max-width: 900px;
}
.table__caption { width: 80%; max-width: 900px; margin: 0;
}
.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: 80%; max-width: 900px; 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: 80%; max-width: 900px; 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 View with Map - Script Codes
Pricing View with Map - Script Codes
Home Page Home
Developer Alexander Hadik
Username ahadik
Uploaded September 16, 2022
Rating 3
Size 3,869 Kb
Views 16,192
Do you need developer help for Pricing View with Map?

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
A Pen by Alexander Hadik
Transcriptic Typography
Table Action
Pricing Cards V3
Submit Card
Protocol Card
Pricing Cards
Pricing Table
Red Pill or Blue Pill But Only CSS
Basil Tree
Create amazing Facebook ads 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!