Webs Pricing Table
How do I make an webs pricing table?
A rebuild of the http://www.webs.com/pricing.htm pricing table. . What is a webs pricing table? How do you make a webs pricing table? This script and codes were developed by Tim Pietrusky on 20 June 2022, Monday.
Webs Pricing Table - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Webs Pricing Table</title> <link rel='stylesheet prefetch' href='css/agdeh.css'>
<link rel='stylesheet prefetch' href='http://yui.yahooapis.com/combo?pure/0.2.1/base-min.css&pure/0.2.1/grids-min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500,700);
/** * Colors */
$emw--color-alpha: #36749e;
$emw--color-beta: #222;
$emw--color-gamma: darken(#333, 10%);
$emw--color-delta: #fff;
$emw--color-epsilon: #c0392b;
$emw--color-zeta: darken($emw--color-epsilon, 25%);
$emw--color-eta: lighten($emw--color-epsilon, 25%);
$emw--color-theta: #000;
$emw--color-iota: #27ae60;
$emw--color-kappa: #f1c40f;
/** * Units */
$emw--unit-alpha: 1em;
$emw--unit-beta: 1.5em;
$emw--unit-gamma: 25%;
$emw--unit-delta: 1.25em;
$emw--unit-epsilon: .125em;
$emw--unit-zeta: .325em;
$emw--unit-eta: 4;
$emw--unit-theta: 3em;
$emw--unit-iota: .05em;
$emw--unit-kappa: 1;
$emw--unit-lambda: .115s ease-in-out;
/** * Lists */
$emw--list-alpha: $emw--color-beta, $emw--color-gamma;
$emw--list-beta: $emw--color-iota, darken($emw--color-iota, 15%);
$emw--list-gamma: $emw--color-kappa, darken($emw--color-kappa, 10%);
/** * Elements */
.emw__element-alpha { position: relative; margin: $emw--unit-alpha * 5 $emw--unit-alpha * 3 $emw--unit-alpha * 5 $emw--unit-alpha; @include breakpoint(medium) { margin: $emw--unit-epsilon $emw--unit-zeta $emw--unit-alpha $emw--unit-zeta; } // price chart > div { position: absolute; top: 20%; left: 0; padding: $emw--unit-alpha 0 $emw--unit-alpha * 2 0; color: $emw--color-delta; text-align: center; border-radius: $emw--unit-epsilon; border-top: $emw--unit-zeta solid transparent; border-bottom: $emw--unit-zeta / 2 solid rgba(0, 0, 0, .7); box-shadow: inset 0 0 $emw--unit-epsilon rgba($emw--color-theta, .5), 0 0 $emw--unit-delta * 2 $emw--unit-iota / 4 rgba($emw--color-theta, .5) ; @include transform(scale($emw--unit-kappa * 1, $emw--unit-kappa * 1)); @include bg(to bottom, top, $emw--list-alpha); @include breakpoint(medium) { position: relative; top: 0; left: 0; width: 33.33%; margin: $emw--unit-alpha 0; @include transform(scale(1, 1)); } @include breakpoint(small) { width: 100%; } // Add a position for every child-nth(n) @for $i from 2 through $emw--unit-eta { &:nth-child(#{$i}) { left: (100% / $emw--unit-eta) * ($i - 1); @include breakpoint(medium) { position: relative; top: 0; left: 0; width: 33.33%; margin: $emw--unit-alpha 0; @include transform(scale(1, 1)); } @include breakpoint(small) { width: 100%; } @if $i == 1 { @include transform(scale($emw--unit-kappa * 1, $emw--unit-kappa * 1)); } @else if $i == 2 { h2 { font-weight: 500; } @include transform(scale($emw--unit-kappa * 1.15, $emw--unit-kappa * 1.15)); } @else if $i == 3 { z-index: 1337; font-size: $emw--unit-delta; padding-bottom: 0; border-top: $emw--unit-zeta solid rgba($emw--color-iota, .8); border-bottom: $emw--unit-zeta solid rgba($emw--color-iota, .8); text-shadow: ($emw--unit-epsilon / 1.6) ($emw--unit-epsilon / 1.6) 0 #666; @include breakpoint(medium) { width: 100%; float: left; } h2 { font-weight: 700; &:before, &:after { content: '\2605'; margin: 0 $emw--unit-epsilon; @include breakpoint(medium) { content: '\2605\2605\2605'; } @include breakpoint(small) { content: '\2605'; } } } button { ; background: $emw--color-iota; width: 100%; padding-top: $emw--unit-alpha; padding-bottom: $emw--unit-alpha; font-weight: 700; @include bg(to top, bottom, $emw--list-beta); } .emw__element-beta { font-size: $emw--unit-theta * 1.15; margin: $emw--unit-epsilon $emw--unit-zeta $emw--unit-epsilon 0; } @include breakpoint(large) { @include transform(scale($emw--unit-kappa * 1.3, $emw--unit-kappa * 1.3) translate(0, -3%)); } } @else if $i == 4 { border-top: $emw--unit-zeta solid rgba($emw--color-kappa, .8); h2 { font-weight: 700; } button { ; @include bg(to top, bottom, $emw--list-gamma); } @include transform(scale($emw--unit-kappa * 1.15, $emw--unit-kappa * 1.15)); } } } } h2 { font-weight: 300; font-size: $emw--unit-beta * 1.5; margin: 0; } hr { border: none; margin: $emw--unit-zeta * 2 10%; background: darken($emw--color-delta, 80%); border-top: ($emw--unit-iota + $emw--unit-iota / 3) solid darken($emw--color-delta, 100%); height: $emw--unit-iota; } button { border: none; font: 500 $emw--unit-delta "Ubuntu", sans-serif; width: 80%; letter-spacing: $emw--unit-epsilon / 2; color: $emw--color-delta; background: $emw--color-epsilon; padding: $emw--unit-epsilon * 4 $emw--unit-epsilon * 12; box-shadow: inset 0 0 $emw--unit-epsilon * 2 0 rgba($emw--color-delta, .2), 0 0 $emw--unit-epsilon * 3 0 rgba($emw--color-beta, .45) ; @include transition( box-shadow $emw--unit-lambda, transform $emw--unit-lambda ); &:hover { box-shadow: inset 0 0 $emw--unit-epsilon * 2 0 rgba($emw--color-delta, .3), 0 0 $emw--unit-epsilon * 3 0 rgba($emw--color-beta, .45) ; } &:active { @include transform(scale(.9, .9)); } }
}
.emw__element-beta { position: relative; font-size: $emw--unit-theta; margin: $emw--unit-zeta * 2 $emw--unit-zeta * 2 $emw--unit-zeta * 2 0; &:after { position: absolute; bottom: 0; content: 'per month'; margin: 0 0 .75em .35em; font-size: $emw--unit-epsilon * 2; width: .005em; }
}
/** * * Main Stylesheet * */
body { background: $emw--color-alpha; font: 400 $emw--unit-alpha "Ubuntu", sans-serif; margin: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="pure-g-r emw__element-alpha"> <div class="pure-u-1-4"> <h2>Free</h2> <hr/> <div class="emw__element-beta"> <sup>$</sup>0 </div> <button class="start">Start now!</button> </div> <div class="pure-u-1-4"> <h2>Starter</h2> <hr/> <div class="emw__element-beta"> <sup>$</sup>3.75 </div> <button class="start">Start now!</button> </div> <div class="pure-u-1-4"> <h2>Enhanced</h2> <hr/> <div class="emw__element-beta"> <sup>$</sup>7.50 </div> <button class="start">Yes, Sir!</button> </div> <div class="pure-u-1-4"> <h2>Pro</h2> <hr/> <div class="emw__element-beta"> <sup>$</sup>10 </div> <button class="start">Go Pro.</button> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Webs Pricing Table - Script Codes CSS Codes
@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500,700);
/** * Colors */
$emw--color-alpha: #36749e;
$emw--color-beta: #222;
$emw--color-gamma: darken(#333, 10%);
$emw--color-delta: #fff;
$emw--color-epsilon: #c0392b;
$emw--color-zeta: darken($emw--color-epsilon, 25%);
$emw--color-eta: lighten($emw--color-epsilon, 25%);
$emw--color-theta: #000;
$emw--color-iota: #27ae60;
$emw--color-kappa: #f1c40f;
/** * Units */
$emw--unit-alpha: 1em;
$emw--unit-beta: 1.5em;
$emw--unit-gamma: 25%;
$emw--unit-delta: 1.25em;
$emw--unit-epsilon: .125em;
$emw--unit-zeta: .325em;
$emw--unit-eta: 4;
$emw--unit-theta: 3em;
$emw--unit-iota: .05em;
$emw--unit-kappa: 1;
$emw--unit-lambda: .115s ease-in-out;
/** * Lists */
$emw--list-alpha: $emw--color-beta, $emw--color-gamma;
$emw--list-beta: $emw--color-iota, darken($emw--color-iota, 15%);
$emw--list-gamma: $emw--color-kappa, darken($emw--color-kappa, 10%);
/** * Elements */
.emw__element-alpha { position: relative; margin: $emw--unit-alpha * 5 $emw--unit-alpha * 3 $emw--unit-alpha * 5 $emw--unit-alpha; @include breakpoint(medium) { margin: $emw--unit-epsilon $emw--unit-zeta $emw--unit-alpha $emw--unit-zeta; } // price chart > div { position: absolute; top: 20%; left: 0; padding: $emw--unit-alpha 0 $emw--unit-alpha * 2 0; color: $emw--color-delta; text-align: center; border-radius: $emw--unit-epsilon; border-top: $emw--unit-zeta solid transparent; border-bottom: $emw--unit-zeta / 2 solid rgba(0, 0, 0, .7); box-shadow: inset 0 0 $emw--unit-epsilon rgba($emw--color-theta, .5), 0 0 $emw--unit-delta * 2 $emw--unit-iota / 4 rgba($emw--color-theta, .5) ; @include transform(scale($emw--unit-kappa * 1, $emw--unit-kappa * 1)); @include bg(to bottom, top, $emw--list-alpha); @include breakpoint(medium) { position: relative; top: 0; left: 0; width: 33.33%; margin: $emw--unit-alpha 0; @include transform(scale(1, 1)); } @include breakpoint(small) { width: 100%; } // Add a position for every child-nth(n) @for $i from 2 through $emw--unit-eta { &:nth-child(#{$i}) { left: (100% / $emw--unit-eta) * ($i - 1); @include breakpoint(medium) { position: relative; top: 0; left: 0; width: 33.33%; margin: $emw--unit-alpha 0; @include transform(scale(1, 1)); } @include breakpoint(small) { width: 100%; } @if $i == 1 { @include transform(scale($emw--unit-kappa * 1, $emw--unit-kappa * 1)); } @else if $i == 2 { h2 { font-weight: 500; } @include transform(scale($emw--unit-kappa * 1.15, $emw--unit-kappa * 1.15)); } @else if $i == 3 { z-index: 1337; font-size: $emw--unit-delta; padding-bottom: 0; border-top: $emw--unit-zeta solid rgba($emw--color-iota, .8); border-bottom: $emw--unit-zeta solid rgba($emw--color-iota, .8); text-shadow: ($emw--unit-epsilon / 1.6) ($emw--unit-epsilon / 1.6) 0 #666; @include breakpoint(medium) { width: 100%; float: left; } h2 { font-weight: 700; &:before, &:after { content: '\2605'; margin: 0 $emw--unit-epsilon; @include breakpoint(medium) { content: '\2605\2605\2605'; } @include breakpoint(small) { content: '\2605'; } } } button { ; background: $emw--color-iota; width: 100%; padding-top: $emw--unit-alpha; padding-bottom: $emw--unit-alpha; font-weight: 700; @include bg(to top, bottom, $emw--list-beta); } .emw__element-beta { font-size: $emw--unit-theta * 1.15; margin: $emw--unit-epsilon $emw--unit-zeta $emw--unit-epsilon 0; } @include breakpoint(large) { @include transform(scale($emw--unit-kappa * 1.3, $emw--unit-kappa * 1.3) translate(0, -3%)); } } @else if $i == 4 { border-top: $emw--unit-zeta solid rgba($emw--color-kappa, .8); h2 { font-weight: 700; } button { ; @include bg(to top, bottom, $emw--list-gamma); } @include transform(scale($emw--unit-kappa * 1.15, $emw--unit-kappa * 1.15)); } } } } h2 { font-weight: 300; font-size: $emw--unit-beta * 1.5; margin: 0; } hr { border: none; margin: $emw--unit-zeta * 2 10%; background: darken($emw--color-delta, 80%); border-top: ($emw--unit-iota + $emw--unit-iota / 3) solid darken($emw--color-delta, 100%); height: $emw--unit-iota; } button { border: none; font: 500 $emw--unit-delta "Ubuntu", sans-serif; width: 80%; letter-spacing: $emw--unit-epsilon / 2; color: $emw--color-delta; background: $emw--color-epsilon; padding: $emw--unit-epsilon * 4 $emw--unit-epsilon * 12; box-shadow: inset 0 0 $emw--unit-epsilon * 2 0 rgba($emw--color-delta, .2), 0 0 $emw--unit-epsilon * 3 0 rgba($emw--color-beta, .45) ; @include transition( box-shadow $emw--unit-lambda, transform $emw--unit-lambda ); &:hover { box-shadow: inset 0 0 $emw--unit-epsilon * 2 0 rgba($emw--color-delta, .3), 0 0 $emw--unit-epsilon * 3 0 rgba($emw--color-beta, .45) ; } &:active { @include transform(scale(.9, .9)); } }
}
.emw__element-beta { position: relative; font-size: $emw--unit-theta; margin: $emw--unit-zeta * 2 $emw--unit-zeta * 2 $emw--unit-zeta * 2 0; &:after { position: absolute; bottom: 0; content: 'per month'; margin: 0 0 .75em .35em; font-size: $emw--unit-epsilon * 2; width: .005em; }
}
/** * * Main Stylesheet * */
body { background: $emw--color-alpha; font: 400 $emw--unit-alpha "Ubuntu", sans-serif; margin: 0;
}
Webs Pricing Table - Script Codes JS Codes
/* * Webs Pricing Table * * A rebuild of the http://www.webs.com/pricing.htm pricing table. * * * 2013 by Tim Pietrusky * timpietrusky.com */
Developer | Tim Pietrusky |
Username | TimPietrusky |
Uploaded | June 20, 2022 |
Rating | 3.5 |
Size | 7,716 Kb |
Views | 32,384 |
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!
Name | Size |
Custom Dropdown | 4,878 Kb |
Star Wars opening crawl from 1977 | 9,093 Kb |
Advanced Checkbox Hack | 3,416 Kb |
Kudos Please | 6,624 Kb |
Bullshit Job Title Generator | 7,583 Kb |
Colorful stripes | 2,652 Kb |
Select | 4,112 Kb |
Full Horizontal | 4,103 Kb |
Icon Fonts - CSS-Loader | 2,940 Kb |
Icon Fonts - Enhanced lists | 5,108 Kb |
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!
Name | Username | Size |
Wikipedia Viewer | Codinger | 4,681 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
Adding Items | Valhead | 4,008 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
CSS Patterns | Alyda | 3,953 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!