Simple Package Tier Display

Developer
James Zedd
Size
2,522 Kb
Views
10,120
  1. Simple Package Tier Display Previews
  2. Simple Package Tier Display HTML Codes
  3. Simple Package Tier Display CSS Codes

How do I make an simple package tier display?

What is a simple package tier display? How do you make a simple package tier display? This script and codes were developed by James Zedd on 11 October 2022, Tuesday.

Simple Package Tier Display Previews
IQ Test

Simple Package Tier Display - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Package Tier Display</title> <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="custom-content"> <div class="price-box contrast"> <div class="price-box-title"> <h3>Sole Practitioner</h3> <span class="price">$15</span><span class="price-adj">Monthly/Doctor</span> </div> <hr /> <div class="price-box-content"> <ul> <li>Schedule and Appointment tracking</li> <li>Patient Management</li> <li>Claim Management</li> <li>Error Reports – Easy Re-submission</li> <li>Reconciliation/Remittance Advice</li> </ul> <a href="#" class="btn">Try it for Free</a> </div> </div> <div class="price-box accent"> <div class="price-box-title"> <h3>Small Practice</h3> <span class="price">$45</span><span class="price-adj">Monthly/Doctor</span> </div> <hr class="style1"> <div class="price-box-content"> <ul> <li>Everything in Sole Practitioner Plus:</li> <li>Multi-User login/administration</li> <li>Staff Management</li> <li>Multi-Payment processor</li> <li>&nbsp;</li> </ul> <a href="#" class="btn">Try it for Free</a> </div> </div> <div class="price-box contrast"> <div class="price-box-title"> <h3>Medical Office</h3> <span class="price">$85</span><span class="price-adj">Monthly/Doctor</span> </div> <hr /> <div class="price-box-content"> <ul> <li>Everything in Small Practice Plus:</li> <li>Multi-Doctor Management</li> <li>Doctor/Staff Scheduling</li> <li>Patient Sharing</li> <li>Custom Reporting</li> </ul> <a href="#" class="btn">Try it for Free</a> </div> </div>
</div>
</body>
</html>

Simple Package Tier Display - Script Codes CSS Codes

.price-box { width: 33.3%; float: left;
}
.contrast { background-color: #eeeeee; margin-top: 24px;
}
.accent { background-color: #0095e5; color: #ffffff !important; padding-top: 24px;
}
.accent .price-box-title h3, .accent .price-box-title .price, .accent .price-box-title .price-adj, .accent .price-box-content ul li { color: #ffffff;
}
hr.style1 { border-top: 1px solid #007ce5; border-bottom: 1px solid #007ce5;
}
.accent .btn { background-color: #ffffff; color: #0095e5;
}
.price-box-title { padding: 12px 18px; text-align: center;
}
.price-box-title h3 { font-family: 'Raleway'; font-size: 24px; color: #0095e5;
}
.price { font-family: 'raleway'; font-size: 60px; font-weight: 900; color: #0095e5; margin-right: 12px
}
.price-adj { font-family: 'Work Sans'; font-size: 16px; color: #9d9d9d; font-style: italic; vertical-align: middle;
}
.price-box-content { padding: 10px 14%; text-align: center;
}
.price-box-content ul { list-style: none; text-align: left; padding: 0;
}
.price-box-content ul li { font-family: "Work Sans"; color: #404040; line-height: 24px
}
.btn { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: auto; text-decoration: none; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 2px; padding: 8px 15px; background-color: #0095e5; color: #fff; font-family: "Work Sans","HelveticaNeue","Helvetica Neue",sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: normal; font-size: 14px; margin: 18px 0;
}
@media (max-width: 1210px) { .price-box-content { padding: 10px 30px; } .price-box-content ul { height: 200px; }
}
@media (max-width: 991px) { .price { margin-right: 0; } .price-adj { display: block; }
}
@media (max-width: 767px) { .price-box { float: none; width: 100%; margin-bottom: 12px; } .price-box-content ul { height: auto; } .contrast { margin-top: 0; } .accent { padding-top: 0; } .price-box-content ul { text-align: center; }
}
Simple Package Tier Display - Script Codes
Simple Package Tier Display - Script Codes
Home Page Home
Developer James Zedd
Username james_zedd
Uploaded October 11, 2022
Rating 3
Size 2,522 Kb
Views 10,120
Do you need developer help for Simple Package Tier Display?

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!

James Zedd (james_zedd) Script Codes
Name
The Lonely Planet
Responsive Multi-Column Table with Links
Simple jQuery Selector Class Change
Pure CSS Slide Out Menu
Flex
Modern Responsive Product Comparison Table
Pure CSS Toggle Function
Responsive Advert
Modern Responsive Product Comparison Table for E-commerce
Price
Create amazing captions 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!