Price Comparison Table
How do I make an price comparison table?
What is a price comparison table? How do you make a price comparison table? This script and codes were developed by Orrin Ward on 01 February 2023, Wednesday.
Price Comparison Table - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Price Comparison Table</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='comparison-cards'> <dl class='titles'> <dt></dt> <dt class='great-if' data-title='Great if...'>Great if...</dt> <dt data-title='Rate'>Rate*</dt> <dt data-title='Access'>Access</dt> <dt data-title='Risk'>Risk</dt> <dt></dt> </dl> <dl class='product-card' id='product-1'> <dd>Product 1</dd> <dd class='great-if' data-title='Great if...'> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus doloremque ipsam qui, modi dolor. Doloribus doloremque ipsam qui, modi dolor. </p> </dd> <dd data-title='Rate'>x.x%</dd> <dd data-title='Access'>Access Feature</dd> <dd data-title='Risk'>SafeGuard Feature</dd> <dd> <a class='btn'>Find out more</a> </dd> </dl> <dl class='product-card' id='product-2'> <dd>Product 2</dd> <dd class='great-if' data-title='Great if...'> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus doloremque ipsam qui, modi dolor. Doloribus doloremque ipsam qui, modi dolor. </p> </dd> <dd data-title='Rate'>x.x%</dd> <dd data-title='Access'>Access Feature</dd> <dd data-title='Risk'>SafeGuard Feature</dd> <dd> <a class='btn'>Find out more</a> </dd> </dl> <dl class='product-card' id='product-3'> <dd>Product 3</dd> <dd class='great-if' data-title='Great if...'> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus doloremque ipsam qui, modi dolor. Doloribus doloremque ipsam qui, modi dolor. </p> </dd> <dd data-title='Rate'>x.x%</dd> <dd data-title='Access'>Access Feature</dd> <dd data-title='Risk'>SafeGuard Feature</dd> <dd> <a class='btn'>Find out more</a> </dd> </dl>
</div>
</body>
</html>
Price Comparison Table - Script Codes CSS Codes
/* Responsive mixin */
body { background: white; color: #333;
}
.comparison-cards { width: 934px; margin: 20px auto; font-size: 20px;
}
.comparison-cards dl { margin: 0; margin-right: 2%; float: left;
}
.comparison-cards dl.titles { width: 15%;
}
.comparison-cards dl.product-card { width: 26.33333%;
}
.comparison-cards dl.titles { text-align: right;
}
.comparison-cards dl:nth-child(4n) { margin-right: 0;
}
.comparison-cards dl > * { height: 2em; border-bottom: 1px dotted rgba(0, 0, 0, 0.2); margin-bottom: 0.5em; margin-top: 0.5em; margin-left: 0;
}
.comparison-cards dl > *.great-if { height: 6em;
}
.comparison-cards dl > *:first-child { margin-top: 0;
}
.comparison-cards dl > *:last-child { margin-bottom: 0; border-bottom: none;
}
.comparison-cards dl p { font-size: 0.8em;
}
.comparison-cards dl p:first-child { margin-top: 0;
}
.comparison-cards dl p:last-child { margin-bottom: 0;
}
@media (max-width: 800px) { .comparison-cards { width: auto; } .comparison-cards dl.product-card { width: auto; padding: 0.5em; margin: 0.5em; background: white; box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.4); border-radius: 0.2em; } .comparison-cards dl > * { height: auto !important; margin: 4px 0; border-top: 1px dotted rgba(0, 0, 0, 0.1); padding: 0.2em; } .comparison-cards dl > *:first-child { border-top: 0; margin-top: 0; } .comparison-cards dl > *:last-child { border-bottom: 0; margin-bottom: 0; } .comparison-cards dl.titles { display: none; } .comparison-cards dl dd { width: 100%; } .comparison-cards dl dd:before { display: block; font-size: 0.8em; font-style: italic; content: attr(data-title); }
}
.btn { display: inline-block; font-size: 18px; padding: 0.3em 0.6em; background: blue; color: white; border-radius: 0.2em;
}
Developer | Orrin Ward |
Username | orrinward |
Uploaded | February 01, 2023 |
Rating | 3 |
Size | 3,459 Kb |
Views | 4,048 |
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 |
Expandable block items. | 2,923 Kb |
Basic leemail playground | 3,870 Kb |
AfG App launcher slug SCSS | 2,262 Kb |
Clunky visual filtering based on classes | 2,800 Kb |
Lnd-health-check | 4,002 Kb |
AfG Utilities Testing | 2,739 Kb |
Markerly Demo | 1,919 Kb |
Leemail signup form play | 2,092 Kb |
Super Discount | 3,225 Kb |
Simple filtering by html5 targets. | 2,426 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 |
Click handler test | Snapson | 2,329 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Beautiful canvas stars | Matths | 2,399 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
Medium Menu | Lucasmotta | 3,923 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
DFF Website | Hawcubite | 10,123 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!