Modern Responsive Product Comparison Table
How do I make an modern responsive product comparison table?
What is a modern responsive product comparison table? How do you make a modern responsive product comparison table? This script and codes were developed by James Zedd on 06 December 2022, Tuesday.
Modern Responsive Product Comparison Table Previews
Modern Responsive Product Comparison Table - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modern Responsive Product Comparison Table</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="table-container"> <div class="tableWIV"> <div class="table-headWIV"> <div class="columnWIV blank end"> </div> <div class="columnWIV"> </div> <div class="columnWIV title">Off the Shelf</div> <div class="columnWIV title light wiivv">Wiivv</div> <div class="columnWIV title">Orthotics</div> <div class="columnWIV blank end"> </div> </div> <div class="rowWIV"> <div class="columnWIV light blank end"> </div> <div class="columnWIV light col-title"> <p> Cost Effective<span>Get a pair for all your shoes</span> </p> </div> <div class="columnWIV light pricing">$20 - $50</div> <div class="columnWIV light pricing text--green">$69 - $89</div> <div class="columnWIV light pricing">$400+</div> <div class="columnWIV light blank end"> </div> </div> <div class="rowWIV"> <div class="columnWIV light blank end"> </div> <div class="columnWIV light col-title"> <p> Custom Fit To You<span>Made for your exact feet</span> </p> </div> <div class="columnWIV light blank"></div> <div class="columnWIV dark"><i class="material-icons text--green">check</i></div> <div class="columnWIV light blank"></div> <div class="columnWIV light blank end"> </div> </div> <div class="rowWIV"> <div class="columnWIV light blank end"> </div> <div class="columnWIV light col-title"> <p>Convenient<span>Measure from anywhere using your smart phone</span> </p> </div> <div class="columnWIV light blank"></div> <div class="columnWIV light"><i class="material-icons text--green">check</i></div> <div class="columnWIV light blank"></div> <div class="columnWIV light blank end"> </div> </div> <div class="rowWIV"> <div class="columnWIV light blank end"> </div> <div class="columnWIV light col-title"> <p> Happiness Guarantee<span>Try for 30-days risk-free</span> </p> </div> <div class="columnWIV light blank"></div> <div class="columnWIV dark"><i class="material-icons text--green">check</i></div> <div class="columnWIV light blank"></div> <div class="columnWIV light blank end"> </div> </div> <div class="rowWIV"> <div class="columnWIV light blank end"> </div> <div class="columnWIV light col-title"> <p> Custom Designs<span>Choose your favorite designs and colors</span> </p> </div> <div class="columnWIV light blank"></div> <div class="columnWIV light wiivv--last"><i class="material-icons text--green">check</i></div> <div class="columnWIV light blank"></div> <div class="columnWIV light blank end"> </div> </div> </div><!-- table -->
</div>
<!-- credits -->
<div class="credits"> <p>created for</p> <a href="https://wiivv.com">wiivv.com</a>
</div>
</body>
</html>
Modern Responsive Product Comparison Table - Script Codes CSS Codes
body { background-color: #f4f4f4;
}
.tableWIV { border: 1px solid #eaeaea;
}
.tableWIV { display:table; font-size:16px; color:#222222; margin:10px 0; width: 100%;
}
.table-headWIV { display: table-header-group;
}
.table-headWIV .columnWIV { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 600; color: #404040; border-bottom: 0;
}
.table-headWIV .columnWIV.wiivv { font-size: 28px; font-weight: 700; color: #000000; border-top: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; border-bottom: 0; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.columnWIV.title { padding: 0 30px;
}
.rowWIV { display:table-row; /* Defines a table row */
}
.columnWIV{ display:table-cell; /* Defines a table cell */ font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 400; padding:10px 20px; border-bottom:1px solid #d9d9d9; text-align: center; min-width: 100px !important; vertical-align: middle;
}
.columnWIV.light { background-color: #ffffff;
}
.columnWIV.dark { background-color: #f7f7f7;
}
.rowWIV .columnWIV:nth-child(4) { border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; border-top: 0; border-bottom: 0;
}
.material-icons { font-size: 30px;
}
.text--green { color: #7ed321;
}
.col-title { font-family: "Muli", sans-serif; font-size: 18px; font-weight: 300; text-align: left;
}
.col-title span { display: block; font-size: 14px; font-weight: 700;
}
.wiivv--last { -webkit-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.75); box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.75); -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;
}
.credits { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 300; color: #9d9d9d; text-align: center; margin: 30px 0;
}
.credits p { margin: 12px 0 0;
}
.credits a { color: #9d9d9d; transition: all 300ms ease-in-out;
}
.credits a:hover { color: #222222;
}
/* === Responsive === */
@media (max-width: 991px) and (min-width: 768px) { .end { display: none; }
}
@media (max-width: 767px) { .table-container { padding: 15px; max-width: 600px; margin: 0 auto; } .table-headWIV { display: none; } .tableWIV, .rowWIV { display: block; width: auto; } .rowWIV .columnWIV { width: 1%; white-space: wrap; } .columnWIV.dark { background-color: #ffffff; } .blank { display: none; } .rowWIV .columnWIV:nth-child(3):before { content: 'Off The Shelf'; display: block; font-size: 16px; font-weight: 300; color: #404040; } .rowWIV .columnWIV:nth-child(4):before { content: 'Wiivv'; display: block; font-size: 16px; font-weight: 300; color: #404040; } .rowWIV .columnWIV:nth-child(5):before { content: 'Orthotics'; display: block; font-size: 16px; font-weight: 300; color: #404040; } .col-title { display: block; width: auto !important; font-size: 24px; font-weight: 700; text-align: center; border-bottom: 0; } .wiivv--last { -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
}
@media (max-width: 510px) { .rowWIV { border-bottom: 1px solid #d9d9d9; } .rowWIV .columnWIV { display: block; width: auto; } .rowWIV .columnWIV.blank { display: none; } .columnWIV { border-bottom: 0; }
}
| Developer | James Zedd |
| Username | james_zedd |
| Uploaded | December 06, 2022 |
| Rating | 3 |
| Size | 2,952 Kb |
| Views | 10,120 |
Do you need developer help for Modern Responsive Product Comparison 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!
James Zedd (james_zedd) Script Codes
| Name | Size |
| HTML for IID | 1,792 Kb |
| Pure CSS Toggle Function | 2,566 Kb |
| A Pen by James Zedd | 2,674 Kb |
| Flex Chart | 4,111 Kb |
| Responsive Multi-Column Table with Links | 4,956 Kb |
| Simple jQuery Selector Class Change | 1,802 Kb |
| Pure CSS Pop Up Modal | 2,858 Kb |
| Simple Package Tier Display | 2,522 Kb |
| Flex | 2,796 Kb |
| FS Core Values | 2,020 Kb |
Create amazing sales emails 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!
Similar Scripts & Codes
| Name | Username | Size |
| Simple content swap | Snografx | 1,859 Kb |
| CSS Hover Effects | Alen | 3,613 Kb |
| CSS Flip Animation | Bbodine1 | 2,525 Kb |
| A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
| Improved Page Flipping Effect | Usaphp | 5,201 Kb |
| Voting App - register | MatheusLima92 | 1,948 Kb |
| CSS3 iPad | Vikvarg | 1,766 Kb |
| TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
| Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
| Modal Dialog | Gigaleet | 2,251 Kb |
Do you want hide your ip address?
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!