Responsive Pricing Table

Developer
Jeremy Caris
Size
2,690 Kb
Views
12,144
  1. Responsive Pricing Table Previews
  2. Responsive Pricing Table HTML Codes
  3. Responsive Pricing Table CSS Codes

How do I make an responsive pricing table?

What is a responsive pricing table? How do you make a responsive pricing table? This script and codes were developed by Jeremy Caris on 01 November 2022, Tuesday.

Responsive Pricing Table Previews
IQ Test

Responsive Pricing Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Pricing Table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="cm_access_table"> <li class="cm_access_block"> <h1>Free</h1> <div class="cm_access_price"> <small>&nbsp;</small> <h1> <sup>$</sup>0<sub></sub> </h1> <div class="cm_access_text">Subscribe to our emails and get access to free special content as long as you remain an email subscriber.</div> </div> <ul class="cm_access_features"> <li>Receive our emails</li> <li>Immediate access to the Seer Dictionary</li> <li>Immediate access to free Online Equipping Schools (as available)</li> </ul> <div class="cm_access_footer"> <a href="#" class="cm_access_button">Subscribe for Free</a> </div> </li> <li class="cm_access_block"> <h1>Limited</h1> <div class="cm_access_price"> <small>&nbsp;</small> <h1> <sup>$</sup>10<sub>/One Time</sub> </h1> <div class="cm_access_text">Purchase access to any <strong>single</strong> Online Equipping School and keep it as long as you remain an email subscriber.</div> </div> <ul class="cm_access_features"> <li>Receive our emails</li> <li>Immediate access to the Seer Dictionary</li> <li>Immediate access to free Online Equipping Schools (as available)</li> <li>Immediate access to any single premium Online Equipping School</li> </ul> <div class="cm_access_footer"> <a href="#" class="cm_access_button">Starting in Jan 2015!<!--Purchase Access--></a> </div> </li> <li class="cm_access_block"> <h1>Unlimited</h1> <div class="cm_access_price"> <small>Starting at</small> <h1> <sup>$</sup>30<sub>/Month</sub> </h1> <div class="cm_access_text">Become a monthly <strong>Ministry Partner</strong> and get unlimited access to all of our current and future online content as long as you remain a ministry partner!</div> </div> <ul class="cm_access_features"> <li>Receive our emails</li> <li>Immediate access to the Seer Dictionary</li> <li>Immediate access to free Online Equipping Schools (as available)</li> <li>Immediate access to ALL premium Online Equipping Schools (as available)</li> <li>and more to come, such as, free ebooks and special downloads, future partner-only online events, free registration for future live events, and more!</li> </ul> <div class="cm_access_footer"> <a href="#" class="cm_access_button">Starting in Jan 2015!<!--Become a Partner--></a> </div> </li>
</ul>
</body>
</html>

Responsive Pricing Table - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family='Open Sans'); * { margin: 0; padding: 0;
}
body { font-family: 'Open Sans', arial, verdana;
}
.cm_access_table { line-height: 150%; font-size: 12px; margin: 0 auto; width: 75%; max-width: 900px; padding-top: 10px;
}
.cm_access_block { width: 100%; color: #fff; background: #000; float: left; list-style-type: none; transition: all 0.25s; position: relative; box-sizing: border-box; margin-bottom: 10px; border: 5px solid white;
}
.cm_access_table h1 { text-align: center; background: #000; margin: 0; padding: 20px 0 16px; font-weight: 300; font-size: 32px;
}
.cm_access_price { display: block; background: #000; width: 100%; text-align: center;
}
.cm_access_price small { font: normal normal 300 12px/12px'Open Sans', Helvetica, Arial, sans-serif;
}
.cm_access_price h1 { font: normal normal 300 42px/20px'Open Sans', Helvetica, Arial, sans-serif; margin-top: -12px;
}
.cm_access_price h1 sup { color: rgb(255, 255, 255); position: relative; text-align: center; text-rendering: optimizelegibility; top: -16px; vertical-align: baseline; font: normal normal 300 20px/0px'Open Sans', Helvetica, Arial, sans-serif;
}
.cm_access_price h1 sub { bottom: 0px; color: rgb(255, 255, 255); position: relative; text-align: center; text-rendering: optimizelegibility; vertical-align: baseline; font: normal normal 300 12px/0px'Open Sans', Helvetica, Arial, sans-serif;
}
.cm_access_text { width: 80%; margin: 10px auto 10px; color: #ccc; font: normal normal normal 14px/20px'Open Sans', Helvetica, Arial, sans-serif; border-top: 1px solid #555; border-bottom: 1px solid #555; padding: 10px 0;
}
.cm_access_text strong { color: #fff;
}
.cm_access_features { background: #000; color: #fff;
}
.cm_access_features ul { text-align: left; margin: 0px 50px; padding: 0px;
}
.cm_access_features li { left: 58px; position: relative; width: 70%; padding: 4px 15px 4px 0; font: normal normal 300 14px/18px'Open Sans', Helvetica, Arial, sans-serif; list-style-type: square;
}
.cm_access_footer { padding: 30px 0 20px; background: #000; text-align: center;
}
.cm_access_button { text-decoration: none; color: #fff; font-weight: bold; background: #0074A2; padding: 8px 18px; font: normal normal 300 16px/30px'Open Sans', Helvetica, Arial, sans-serif; text-transform: uppercase;
}
@media only screen and (min-width: 900px) { .cm_access_block { width: 33.3%; }
}
Responsive Pricing Table - Script Codes
Responsive Pricing Table - Script Codes
Home Page Home
Developer Jeremy Caris
Username jeremycaris
Uploaded November 01, 2022
Rating 3
Size 2,690 Kb
Views 12,144
Do you need developer help for Responsive 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!

Jeremy Caris (jeremycaris) Script Codes
Name
Img Hover Test 2
Responsive Testimonial Quote Bubble
JQuery Test
714Web Website Footer Tag
Email Advertisement Block
Make phone number a click to call link with jQuery
Typography with Vertical Rhythm
Img Hover Test
Simple Horizontal List
A Pen by Jeremy Caris
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!