{"id":8685,"date":"2024-01-20T17:55:00","date_gmt":"2024-01-20T17:55:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8685"},"modified":"2024-01-22T15:55:38","modified_gmt":"2024-01-22T10:55:38","slug":"product-comparison-template-html","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/","title":{"rendered":"Product Comparison Template in HTML & CSS"},"content":{"rendered":"

This HTML & CSS template comes with a responsive product comparison table with key features and details. It employs HTML and CSS to display product information effectively, helping users compare products at a glance.<\/p>\n

You can use this Comparison Template for different kinds of websites, making it a great tool to engage your audience. Moreover, it helps your website visitors save time and make smart choices while shopping. It also makes your website look better and can lead to more sales.<\/p>\n

How to Create Product Comparison Table in HTML<\/h2>\n

1. First, ensure that you’ve linked the CSS files for Font Awesome icons<\/a> and Google Fonts<\/a> in the HTML file’s <head><\/code> section. These links are necessary for the icons and fonts used in the template.<\/p>\n

<link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/css\/all.min.css'>\r\n<link rel=\"stylesheet\" href=\"https:\/\/pro.fontawesome.com\/releases\/v5.10.0\/css\/all.css\" integrity=\"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p\" crossorigin=\"anonymous\"\/>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\"><\/pre>\n
2. Create the HTML structure for product comparison as follows. Replace the sample product data with your own. Each product is represented as a row in the table, and you can add or remove rows as needed.<\/p>\n
<h2>Product Comparison Table V2<\/h2>\r\n<div class=\"zui-wrapper\">\r\n  <div class=\"instruction\">\r\n<em><i class=\"fas fa-arrows-alt-h\"><\/i> Swipe for more products<\/em>\r\n<\/div>\r\n    <div id=\"container\" class=\"zui-scroller\">\r\n        <table class=\"zui-table\">\r\n            <thead>\r\n                <tr>\r\n                    <th class=\"zui-sticky-col\">&nbsp;<\/th>\r\n                    <th id=\"product-col\" class=\"table-col\">\r\n                      <img class=\"product-img\" src=\"https:\/\/scv10mr-cdnpre-p-cus-00.azureedge.net\/-\/media\/images\/promega-worldwide\/global\/templates\/product-comparison-page\/maxwell-rscinstrument.jpg?rev=f5c81f5d6b0e4ad08583aaa2e42b9ce3&amp;sc_lang=en\">\r\n                      <h5>\r\n                        <a href=\"#\" class=\"product-link\">Maxwell<sup>&reg;<\/sup> RSC\r\n                            <span>&#187;<\/span>\r\n                        <\/a>\r\n                      <\/h5>\r\n                    <\/th>\r\n                    <th class=\"table-col\">\r\n                       <img class=\"product-img\" src=\"https:\/\/scv10mr-cdnpre-p-cus-00.azureedge.net\/-\/media\/images\/promega-worldwide\/europe\/promega-germany\/lp\/1908-maxwell-demo\/de-1908-maxwell-rsc48-blank.jpg?rev=11270ae5b13f4aca82c1a22a0fa43d34&sc_lang=en\">\r\n                      <h5>\r\n                        <a href=\"#\" class=\"product-link\">Maxwell<sup>&reg;<\/sup> RSC 48\r\n                          <span>&#187;<\/span>\r\n                          <\/a>\r\n                      <\/h5>\r\n                    <\/th>\r\n                    <th class=\"table-col\">\r\n                       <img class=\"product-img\" src=\"https:\/\/scv10mr-cdnpre-p-cus-00.azureedge.net\/-\/media\/images\/promega-worldwide\/global\/templates\/product-comparison-page\/maxwell-cscinstrument.jpg?rev=98b8a176d8834e96a582e2b987667794&sc_lang=en\">\r\n                      <h5>\r\n                        <a href=\"#\" class=\"product-link\">\r\n                            Maxwell<sup>&reg;<\/sup> CSC<span>&#187;<\/span>\r\n                        <\/a>\r\n                        <\/h5>\r\n                    <\/th>\r\n                    <th class=\"table-col\">\r\n                       <img class=\"product-img\" src=\"https:\/\/scv10mr-cdnpre-p-cus-00.azureedge.net\/-\/media\/images\/promega-worldwide\/global\/templates\/product-comparison-page\/maxwell-fscinstrument.jpg?rev=590466656dba4476aa38f989038d904b&sc_lang=en\">\r\n                      <h5>\r\n                        <a href=\"#\" class=\"product-link\">\r\n                            Maxwell<sup>&reg;<\/sup> FSC\r\n                            <span>&#187;<\/span>\r\n                        <\/a>\r\n                      <\/h5>\r\n                    <\/th>\r\n                    <th class=\"table-col\">\r\n                       <img class=\"product-img\" src=\"https:\/\/scv10mr-cdnpre-p-cus-00.azureedge.net\/-\/media\/images\/promega-worldwide\/global\/templates\/product-comparison-page\/maxwell-fscinstrument.jpg?rev=590466656dba4476aa38f989038d904b&sc_lang=en\">\r\n                      <h5>\r\n                        <a href=\"#\" class=\"product-link\">Maxwell ABC<\/a><\/h5>\r\n                    <\/th>\r\n                <\/tr>\r\n            <\/thead>\r\n            <tbody>\r\n                <tr>\r\n                    <td class=\"zui-sticky-col\">Application<\/td>\r\n                  <td><strong>For Research Use<\/strong><\/td>\r\n                    <td><strong>For Research Use (higher throughput)<\/strong><\/td>\r\n                    <td><strong>For IVD use<\/strong><\/td>\r\n                    <td><strong>For Forensic Use<\/strong><\/td>\r\n                    <td><strong>For Testing Use<\/strong><\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td class=\"zui-sticky-col zui-stripe-row\">Catalog Number<\/td>\r\n                    <td>AS4500<\/td>\r\n                    <td>AS8500<\/td>\r\n                    <td>AS6000<\/td>\r\n                    <td>AS4600<\/td>\r\n                    <td>AS1000<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td class=\"zui-sticky-col\">Throughput<\/td>\r\n                    <td>up to 16 samples<\/td>\r\n                    <td>up to 48 samples<\/td>\r\n                    <td>up to 16 samples<\/td>\r\n                    <td>up to 16 samples<\/td>\r\n                    <td>up to 32 samples<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td class=\"zui-sticky-col zui-stripe-row\">\r\n                        <a href=\"#\" class=\"product-link\">Quantus<sup>&trade;<\/sup> Flurometer<\/a> (for quantification)\r\n                    <\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-plus-circle\"><\/i>Optional<\/td>\r\n                    <td><i class=\"far fa-times-circle\"><\/i>Not Available<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td class=\"zui-sticky-col\">Bar Code Reader<\/td>\r\n                    <td><i class=\"far fa-plus-circle\"><\/i>Optional<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td class=\"zui-sticky-col zui-stripe-row\">Tablet PC<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td class=\"zui-sticky-col\">UV-Light (for decontamination)<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td class=\"zui-sticky-col zui-stripe-row\">Vision System (reduces the possibility of user errors)<\/td>\r\n                    <td><i class=\"far fa-times-circle\"><\/i>Not Available<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-times-circle\"><\/i>Not Available<\/td>\r\n                    <td><i class=\"far fa-times-circle\"><\/i>Not Available<\/td>\r\n                    <td><i class=\"far fa-times-circle\"><\/i>Not Available<\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td class=\"zui-sticky-col\">Compatible with MaxPrep<sup>&trade;<\/sup> Liquid Handler<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-times-circle\"><\/i>Not Available<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                    <td><i class=\"far fa-check-circle\"><\/i>Included<\/td>\r\n                <\/tr>\r\n            <\/tbody>\r\n        <\/table>\r\n    <\/div><\/pre>\n
3. Now, copy the following CSS code provided and paste it into a separate CSS file or within a <style><\/code> tag in your HTML document. You can change fonts, colors, and table appearance to match your website’s design.<\/p>\n
body {\r\n  font-family: 'Roboto', sans-serif;\r\n}\r\n\r\n.instruction {\r\n  text-align:right;\r\n  margin-bottom: 10px;\r\n  display: none;\r\n  margin-right: 10px;\r\n}\r\nem {\r\n  color: lightgrey;\r\n  font-size: 12px;\r\n  font-weight: ital;\r\n}\r\n\r\n.zui-table {\r\n    border-collapse: separate;\r\n    border-spacing: 0;\r\n    font-family: 'Roboto', sans-serif;\r\n    margin-bottom: 0;\r\n}\r\n\r\nh5 {\r\nfont-size: 1em;\r\n}\r\n\r\ntr:nth-child(even) {\r\n  background: #F3F3F3;\r\n}\r\n.zui-table thead th {\r\n    padding: 15px 20px;\r\n    text-align: left;\r\n    vertical-align: top;\r\n    min-width: 180px;\r\n}\r\n.zui-table tbody td {\r\n    color: #333;\r\n    font-size: 16px;\r\n    padding: 15px 20px;\r\n    white-space: normal;\r\n    vertical-align: top;\r\n}\r\n.zui-wrapper {\r\n  max-width: 1200px;\r\n  position: relative;\r\n}\r\n.zui-scroller {\r\n    overflow-x: scroll;\r\n    overflow-y: visible;\r\n    padding-bottom: 5px;\r\n    width: 100%;\r\n}\r\n\r\n.zui-table .zui-sticky-col {\r\n    left: 0;\r\n    position: sticky;\r\n    top: auto;\r\n    font-weight: 700;\r\n    min-width: 200px;\r\n    background-color: #FFFFFF;\r\n    box-shadow: inset -15px 0 10px -7px rgba(0,0,0,0.15);\r\n}\r\n\r\n.zui-sticky-col.zui-stripe-row {\r\n    background-color: #F3F3F3;\r\n}\r\n\r\n.product-img {\r\n    height: auto;\r\n    width: 150px;\r\n}\r\n\r\n.product-link {\r\n  color: #0371BD;\r\n  text-decoration: none;\r\n}\r\n\r\nth:not(:first-child),\r\ntd:not(:first-child) {\r\n    border-left: 1px solid lightgrey;\r\n}\r\n\r\n\/* general reset\/setup styling for icons - needed on all *\/\r\n.svg-inline--fa {\r\n    -moz-osx-font-smoothing: grayscale;\r\n    -webkit-font-smoothing: antialiased;\r\n    display: inline-block; \r\n    font-style: normal;\r\n    font-variant: normal;\r\n    text-rendering: auto;\r\n    line-height: 1;\r\n    font-family: \"Font Awesome 5 Pro\";\r\n    font-weight: 500;\r\n    font-size: 23px;\r\n    padding-right: 5px;\r\n}\r\n\r\n.fa-check-circle{\r\n    color: #028845;\r\n}\r\n.fa-plus-circle {\r\n    color: #2275D3;\r\n}\r\n.fa-times-circle {\r\n    color: gray;\r\n}\r\n\r\n.scroll-button { \r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 50%;\r\n  border: none;\r\n  background-color: #fdb813;\r\n}\r\n\r\n#prev-button,\r\n#next-button {\r\n    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\r\n    position: absolute;\r\n    top: 50%;\r\n}\r\n\r\n#prev-button {\r\n    left: 230px;\r\n    display: none;\r\n}\r\n\r\n#next-button {\r\n    right: -25px;\r\n}\r\n\r\n.fa-chevron-left,\r\n.fa-chevron-right {\r\n    font-size: 22px;\r\n    padding-right: 0;\r\n}\r\n\r\n\/* Phone *\/\r\n@media screen and (max-width: 768px) and (min-width: 320px)  {\r\n  .zui-table .zui-sticky-col {\r\n        min-width: 125px;\r\n    }\r\n    \r\n    .zui-table thead th {\r\n        min-width: 190px;\r\n    }\r\n    \r\n    .zui-table tbody td {\r\n        font-size: 15px;\r\n    }\r\n    \r\n    .product-img {\r\n        width: 100px;\r\n        height: auto;\r\n    }\r\n\/*\r\n    .scroll-button {\r\n        top: 36%;\r\n        width: 40px;\r\n        height: 40px;\r\n    }\r\n    #prev-button {\r\n        display: block;\r\n        left: 130px;\r\n    }\r\n    #next-button {\r\n        left: 35%;\r\n    }\r\n    *\/\r\n}\r\n\r\n@media screen and (max-width: 1280px) and (min-width: 768px)  {\r\n  .zui-table .zui-sticky-col {\r\n        min-width: 175px;\r\n    }\r\n      .zui-table thead th {\r\n        min-width: 180px;\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 1280px) {\r\n    .instruction {\r\n    display: block;\r\n  }  \r\n}<\/pre>\n
That’s all! hopefully, You’ve successfully implemented this HTML Product Comparison Template on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This HTML & CSS template comes with a responsive product comparison table with key features and details. It employs HTML…<\/p>\n","protected":false},"author":1,"featured_media":8691,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-8685","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"\nProduct Comparison Template in HTML & CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Product Comparison Template in HTML & CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Product Comparison Template in HTML & CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Product Comparison Template in HTML & CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-20T17:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:55:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Product-Comparison-Template-HTML.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Product Comparison Template in HTML & CSS\",\"datePublished\":\"2024-01-20T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:55:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/\"},\"wordCount\":231,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Product-Comparison-Template-HTML.png\",\"articleSection\":[\"HTML5 & CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/\",\"name\":\"Product Comparison Template in HTML & CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Product-Comparison-Template-HTML.png\",\"datePublished\":\"2024-01-20T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:55:38+00:00\",\"description\":\"Here is a free code snippet to create a Product Comparison Template in HTML & CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Product-Comparison-Template-HTML.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Product-Comparison-Template-HTML.png\",\"width\":1280,\"height\":960,\"caption\":\"Product Comparison Template HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 & CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Product Comparison Template in HTML & CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Product Comparison Template in HTML & CSS — CodeHim","description":"Here is a free code snippet to create a Product Comparison Template in HTML & CSS. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/","og_locale":"en_US","og_type":"article","og_title":"Product Comparison Template in HTML & CSS — CodeHim","og_description":"Here is a free code snippet to create a Product Comparison Template in HTML & CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-20T17:55:00+00:00","article_modified_time":"2024-01-22T10:55:38+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Product-Comparison-Template-HTML.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Product Comparison Template in HTML & CSS","datePublished":"2024-01-20T17:55:00+00:00","dateModified":"2024-01-22T10:55:38+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/"},"wordCount":231,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Product-Comparison-Template-HTML.png","articleSection":["HTML5 & CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/","url":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/","name":"Product Comparison Template in HTML & CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Product-Comparison-Template-HTML.png","datePublished":"2024-01-20T17:55:00+00:00","dateModified":"2024-01-22T10:55:38+00:00","description":"Here is a free code snippet to create a Product Comparison Template in HTML & CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Product-Comparison-Template-HTML.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Product-Comparison-Template-HTML.png","width":1280,"height":960,"caption":"Product Comparison Template HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/product-comparison-template-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 & CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Product Comparison Template in HTML & CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":4991,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=8685"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8685\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8691"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}