{"id":1255,"date":"2024-01-03T07:57:31","date_gmt":"2024-01-03T12:57:31","guid":{"rendered":"https:\/\/forfrontend.com\/?p=1255"},"modified":"2024-06-26T04:54:01","modified_gmt":"2024-06-26T09:54:01","slug":"css-pricing-table","status":"publish","type":"post","link":"https:\/\/forfrontend.com\/css-pricing-table\/","title":{"rendered":"15+ CSS Pricing Tables"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">CSS pricing tables are a way of displaying different plans or options for a product or service on a website. They usually have columns for each plan, and rows for the features or benefits. I&#8217;m excited to share a curated collection of over <strong>15+ CSS pricing tables<\/strong>, complete with free source code. You can easily download these and integrate them into your upcoming projects.<\/p>\n\n\n<div class=\"gb-container gb-container-38d5f44b\">\n<div class=\"gb-container gb-container-337c6748\">\n\n<p class=\"wp-block-paragraph\"><strong>Also Read:<\/strong><\/p>\n\n\n<div class=\"gb-container gb-container-c382925c\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/forfrontend.com\/css-periodic-tables\/\" data-type=\"post\" data-id=\"3929\">8 CSS Periodic Tables<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/forfrontend.com\/14-css-buttons-with-source-code\/\" data-type=\"post\" data-id=\"28\">16 CSS Buttons With Source Code<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/forfrontend.com\/popup-animation-css\/\" data-type=\"post\" data-id=\"935\">15 Popup Animation CSS<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/forfrontend.com\/css-paginations\/\" data-type=\"post\" data-id=\"1249\">20+ CSS Paginations<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/forfrontend.com\/multi-column-slider-in-css\/\" data-type=\"post\" data-id=\"32\">Multi Column Slider | Multiple Item Carousel Html CSS<\/a><\/p>\n\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-156c5fd4 ex-post-main-box\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5787258203496599\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"fluid\"\n     data-ad-layout-key=\"-6t+ed+2i-1n-4w\"\n     data-ad-client=\"ca-pub-5787258203496599\"\n     data-ad-slot=\"2493303957\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/div>\n\n<div class=\"gb-container gb-container-e2888a44 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Diamond Pricing Table (Fully Responsive)<\/h2>\n\n\n<div class=\"gb-container gb-container-1db41768\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"540\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Diamond-Pricing-table-Fully-Responsive.jpg\" alt=\"Diamond Pricing table (Fully Responsive)\" class=\"wp-image-1571\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Diamond-Pricing-table-Fully-Responsive.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Diamond-Pricing-table-Fully-Responsive-300x150.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Diamond-Pricing-table-Fully-Responsive-1024x512.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Diamond-Pricing-table-Fully-Responsive-768x384.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-b752022c\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-d4abed94\">\n<div class=\"gb-grid-column gb-grid-column-c6d98161\"><div class=\"gb-container gb-container-c6d98161\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-bce8a31c\"><div class=\"gb-container gb-container-bce8a31c\">\n\n<p class=\"wp-block-paragraph\">Aashima Jain<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-85389fea\">\n<div class=\"gb-grid-column gb-grid-column-b906666e\"><div class=\"gb-container gb-container-b906666e\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-24626309\"><div class=\"gb-container gb-container-24626309\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/Aashima\/pen\/xzdOJO\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/Aashima\/pen\/xzdOJO\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-4639a9df\">\n<div class=\"gb-grid-column gb-grid-column-92963403\"><div class=\"gb-container gb-container-92963403\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-d2a35a7b\"><div class=\"gb-container gb-container-d2a35a7b\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-9743cb17\">\n<div class=\"gb-grid-column gb-grid-column-8ea146da\"><div class=\"gb-container gb-container-8ea146da\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-92e9ae25\"><div class=\"gb-container gb-container-92e9ae25\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-5f8a6f37 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Responsive Pricing Table: Showcase and Compare Offers<\/h2>\n\n\n<div class=\"gb-container gb-container-1be8f700\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"486\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Responsive-Pricing-Table.jpg\" alt=\"Responsive Pricing Table\" class=\"wp-image-1572\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Responsive-Pricing-Table.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Responsive-Pricing-Table-300x135.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Responsive-Pricing-Table-1024x461.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Responsive-Pricing-Table-768x346.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-8e79a4fd\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-23bd02bc\">\n<div class=\"gb-grid-column gb-grid-column-e11ce43a\"><div class=\"gb-container gb-container-e11ce43a\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-636424be\"><div class=\"gb-container gb-container-636424be\">\n\n<p class=\"wp-block-paragraph\">ABHAY<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-d34f6592\">\n<div class=\"gb-grid-column gb-grid-column-ba4aee9f\"><div class=\"gb-container gb-container-ba4aee9f\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-c7b86bfd\"><div class=\"gb-container gb-container-c7b86bfd\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/its_abhay\/pen\/abQyxBP\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/its_abhay\/pen\/abQyxBP\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-84df70b1\">\n<div class=\"gb-grid-column gb-grid-column-e37e56ca\"><div class=\"gb-container gb-container-e37e56ca\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-118a9154\"><div class=\"gb-container gb-container-118a9154\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-5b2e21b3\">\n<div class=\"gb-grid-column gb-grid-column-e6605a35\"><div class=\"gb-container gb-container-e6605a35\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-8fd489bf\"><div class=\"gb-container gb-container-8fd489bf\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-b6295c29\">\n\n<h3 class=\"wp-block-heading\">Description<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This project aims to display three subscription options\u2014Basic, Standard, and Business\u2014in a visually appealing manner. Each option is presented in a unique, stylish box that includes a title, an icon, the cost per student or team, and a list of features. A &#8220;START FREE 7-DAY TRIAL&#8221; button is also included in each box to encourage users to try out the service. The design is modern, clean, and user-friendly, making it easier for potential customers to make a decision based on their needs and budget.<\/p>\n\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-0fd5bd86 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Html Pricing Table<\/h2>\n\n\n<div class=\"gb-container gb-container-ae8b00d4\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"598\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Html-Pricing-Table.jpg\" alt=\"Html Pricing Table\" class=\"wp-image-1573\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Html-Pricing-Table.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Html-Pricing-Table-300x166.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Html-Pricing-Table-1024x567.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Html-Pricing-Table-768x425.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-769dc731\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-304356a6\">\n<div class=\"gb-grid-column gb-grid-column-db5f69fd\"><div class=\"gb-container gb-container-db5f69fd\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-c33cf210\"><div class=\"gb-container gb-container-c33cf210\">\n\n<p class=\"wp-block-paragraph\">Amriad<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-21d35ecf\">\n<div class=\"gb-grid-column gb-grid-column-ba2b4222\"><div class=\"gb-container gb-container-ba2b4222\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-cd437c67\"><div class=\"gb-container gb-container-cd437c67\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/Amriad\/pen\/zYJPPNP\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/Amriad\/pen\/zYJPPNP\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-60b637cc\">\n<div class=\"gb-grid-column gb-grid-column-de03c309\"><div class=\"gb-container gb-container-de03c309\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-6dd0afcd\"><div class=\"gb-container gb-container-6dd0afcd\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-acbe018c\">\n<div class=\"gb-grid-column gb-grid-column-fd652c96\"><div class=\"gb-container gb-container-fd652c96\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-7dcd4b2f\"><div class=\"gb-container gb-container-7dcd4b2f\">\n\n<p class=\"wp-block-paragraph\">No<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-16852a1b\">\n\n<h3 class=\"wp-block-heading\">Description<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The code snippet is designed to showcase pricing plans for a hosting service. The layout is divided into three distinct cards, each representing a different tier of service: Basic, Standard, and Premium. Each card is color-coded and contains a wealth of information, making it easier for potential customers to compare and contrast the features of each plan. The design is sleek yet informative, aiming to guide the user effortlessly through their decision-making process.<\/p>\n\n\n<div class=\"gb-container gb-container-08370cf7\">\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Customization:<\/strong><\/h3>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Html:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Section &amp; Cards<\/strong>: The HTML structure is wrapped in a <code>&lt;section&gt;<\/code> tag with a class of <code>pricing-plans<\/code>. Inside, there are three <code>&lt;div&gt;<\/code> elements, each representing a pricing card (Basic, Standard, Premium).<\/li>\n\n\n\n<li><strong>Heading<\/strong>: Each card has a heading section with an <code>&lt;h4&gt;<\/code> tag for the plan name and a <code>&lt;p&gt;<\/code> tag for a brief description.<\/li>\n\n\n\n<li><strong>Price<\/strong>: The price is displayed prominently, with a <code>&lt;sub&gt;<\/code> tag for the &#8220;\/month&#8221; text.<\/li>\n\n\n\n<li><strong>Features<\/strong>: A list of features is presented in an unordered list (<code>&lt;ul&gt;<\/code>), with each feature in a list item (<code>&lt;li&gt;<\/code>).<\/li>\n\n\n\n<li><strong>CTA Button<\/strong>: A call-to-action (CTA) button labeled &#8220;SELECT&#8221; is placed at the bottom of each card.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Global Styles<\/strong>: The CSS starts with global styles, setting the margin, padding, and font for all elements.<\/li>\n\n\n\n<li><strong>Body &amp; Layout<\/strong>: The body of the page is styled to center the pricing table. The <code>.pricing-plans<\/code> class uses Flexbox for layout.<\/li>\n\n\n\n<li><strong>Card Styles<\/strong>: Each pricing card has a base style defined under <code>.pricing-card<\/code>, with variations based on the plan type (Basic, Standard, Premium).<\/li>\n\n\n\n<li><strong>Hover Effects<\/strong>: A hover effect is added to the cards, making them slightly lift and change color when hovered over.<\/li>\n\n\n\n<li><strong>Typography<\/strong>: Various text elements within the cards are styled for readability and emphasis.<\/li>\n\n\n\n<li><strong>CTA Button<\/strong>: The CTA button is styled to match the color scheme of each card and changes appearance when clicked.<\/li>\n<\/ul>\n\n\n\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-156c5fd4 ex-post-main-box\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5787258203496599\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"fluid\"\n     data-ad-layout-key=\"-6t+ed+2i-1n-4w\"\n     data-ad-client=\"ca-pub-5787258203496599\"\n     data-ad-slot=\"2493303957\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/div>\n\n<div class=\"gb-container gb-container-44c623cd ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Pricing Table<\/h2>\n\n\n<div class=\"gb-container gb-container-54530757\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"366\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pricing-Table.jpg\" alt=\"Pricing Table\" class=\"wp-image-1578\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pricing-Table.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pricing-Table-300x102.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pricing-Table-1024x347.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pricing-Table-768x260.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-198d686e\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-9e7ef806\">\n<div class=\"gb-grid-column gb-grid-column-4b5ad1f6\"><div class=\"gb-container gb-container-4b5ad1f6\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-fa459202\"><div class=\"gb-container gb-container-fa459202\">\n\n<p class=\"wp-block-paragraph\">Roman Grankin<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-84f6737a\">\n<div class=\"gb-grid-column gb-grid-column-0c066a3f\"><div class=\"gb-container gb-container-0c066a3f\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-3952e98b\"><div class=\"gb-container gb-container-3952e98b\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/romangrankin\/pen\/xxPJabY\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/romangrankin\/pen\/xxPJabY\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-3ec34f1a\">\n<div class=\"gb-grid-column gb-grid-column-6170718a\"><div class=\"gb-container gb-container-6170718a\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-98604c78\"><div class=\"gb-container gb-container-98604c78\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-3da02d20\">\n<div class=\"gb-grid-column gb-grid-column-d3bf113a\"><div class=\"gb-container gb-container-d3bf113a\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-f721f156\"><div class=\"gb-container gb-container-f721f156\">\n\n<p class=\"wp-block-paragraph\">No<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-94d8ee3a\">\n\n<h3 class=\"wp-block-heading\">Description<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This snippet is a sophisticated pricing table designed for a service-based website. It features three distinct pricing plans: Free, Lite, and Pro. Each plan is encapsulated in a card-like container, with varying background gradients and icons to differentiate them.<\/p>\n\n\n<div class=\"gb-container gb-container-fc81364d\">\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Customization:<\/strong><\/h3>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container &amp; Pricing Divs<\/strong>: The layout starts with a <code>&lt;div&gt;<\/code> element with a class of <code>.container<\/code>, which houses another <code>&lt;div&gt;<\/code> with a class of <code>.pricing<\/code>. This sets the stage for the pricing cards.<\/li>\n\n\n\n<li><strong>Pricing Cards<\/strong>: Each pricing card is a <code>&lt;div&gt;<\/code> element with a class of <code>.pricing-card<\/code>. They contain a heading, a list of features, the price, and a &#8216;Buy&#8217; button.<\/li>\n\n\n\n<li><strong>Headings<\/strong>: The headings are <code>&lt;h3&gt;<\/code> elements with classes that change based on the plan, allowing for different background colors.<\/li>\n\n\n\n<li><strong>Features List<\/strong>: The features are listed in an unordered list (<code>&lt;ul&gt;<\/code>), with list items (<code>&lt;li&gt;<\/code>) that have either an <code>icon-yes<\/code> or <code>icon-no<\/code> class to indicate availability.<\/li>\n\n\n\n<li><strong>Price &amp; Button<\/strong>: The price is displayed in a <code>&lt;p&gt;<\/code> element, and the &#8216;Buy&#8217; button is a <code>&lt;button&gt;<\/code> element.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Global Styles<\/strong>: Universal styles for box-sizing, margin, and padding are set initially.<\/li>\n\n\n\n<li><strong>Typography<\/strong>: The Poppins font is used for a modern look.<\/li>\n\n\n\n<li><strong>Layout &amp; Flexbox<\/strong>: The <code>.pricing<\/code> class uses flexbox to align the pricing cards.<\/li>\n\n\n\n<li><strong>Card Styling<\/strong>: Each card has a shadow, rounded corners, and padding for a card-like appearance.<\/li>\n\n\n\n<li><strong>Icons<\/strong>: Custom icons are used before each list item, with filters applied for color manipulation.<\/li>\n\n\n\n<li><strong>Button Styles<\/strong>: The buttons have transitions for hover effects and change in appearance based on the plan.<\/li>\n<\/ul>\n\n\n\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-7f638a0c ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Responsive Pricing Table<\/h2>\n\n\n<div class=\"gb-container gb-container-fc8beeb1\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"483\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/IMG_20231028_103226.jpg\" alt=\"Responsive Pricing Table\" class=\"wp-image-1579\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/IMG_20231028_103226.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/IMG_20231028_103226-300x134.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/IMG_20231028_103226-1024x458.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/IMG_20231028_103226-768x343.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-a5fa8bce\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-faa5609f\">\n<div class=\"gb-grid-column gb-grid-column-32b978f7\"><div class=\"gb-container gb-container-32b978f7\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-a4762a1c\"><div class=\"gb-container gb-container-a4762a1c\">\n\n<p class=\"wp-block-paragraph\">Sanket Bodake<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-71359fa0\">\n<div class=\"gb-grid-column gb-grid-column-7724e02b\"><div class=\"gb-container gb-container-7724e02b\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-42ab5f54\"><div class=\"gb-container gb-container-42ab5f54\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/sanketbodke\/pen\/zYwLpNG\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/sanketbodke\/pen\/zYwLpNG\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-4e205b89\">\n<div class=\"gb-grid-column gb-grid-column-1eefda22\"><div class=\"gb-container gb-container-1eefda22\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-3b9004a3\"><div class=\"gb-container gb-container-3b9004a3\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-f10a797b\">\n<div class=\"gb-grid-column gb-grid-column-4c647ea5\"><div class=\"gb-container gb-container-4c647ea5\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-c44d4614\"><div class=\"gb-container gb-container-c44d4614\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-bd7b08d7\">\n<div class=\"gb-container gb-container-113d13d9\">\n\n\n\n<h3 class=\"wp-block-heading\">Walkthrough of Code:<\/h3>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Html:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wrapper Div<\/strong>: The entire pricing table is wrapped in a <code>&lt;div&gt;<\/code> with a class of <code>.wrapper<\/code>.<\/li>\n\n\n\n<li><strong>Table Divs<\/strong>: Each pricing plan is represented by a <code>&lt;div&gt;<\/code> with a class of <code>.table<\/code> and an additional class for the plan name (e.g., <code>.Basic<\/code>, <code>.Premium<\/code>, <code>.Ultimate<\/code>).<\/li>\n\n\n\n<li><strong>Price Section<\/strong>: The price is displayed in a circular design, using nested divs and spans to create the effect.<\/li>\n\n\n\n<li><strong>Package Name<\/strong>: A horizontal line with the package name displayed in the middle.<\/li>\n\n\n\n<li><strong>Features List<\/strong>: Features are listed in a <code>&lt;div&gt;<\/code> with a class of <code>.features<\/code>. Each feature is a list item (<code>&lt;li&gt;<\/code>) with a description and an icon.<\/li>\n\n\n\n<li><strong>Button<\/strong>: A &#8216;Purchase&#8217; button is at the bottom of each card.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Global Styles<\/strong>: Universal styles for box-sizing, margin, and padding are set initially.<\/li>\n\n\n\n<li><strong>Flexbox<\/strong>: The <code>.wrapper<\/code> class uses flexbox to align the pricing cards.<\/li>\n\n\n\n<li><strong>Card Styling<\/strong>: Each card has a shadow for depth and padding for spacing.<\/li>\n\n\n\n<li><strong>Price Circle<\/strong>: The price is displayed in a circular design, achieved through border-radius and nested divs.<\/li>\n\n\n\n<li><strong>Icons<\/strong>: Font Awesome icons are used to indicate feature availability.<\/li>\n\n\n\n<li><strong>Button Styles<\/strong>: The buttons have transitions for hover effects and change in appearance based on the plan.<\/li>\n\n\n\n<li><strong>Media Queries<\/strong>: Responsive design is implemented for different screen sizes.<\/li>\n<\/ul>\n\n\n\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-6a5ac428 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Pure CSS Animated Pricing<\/h2>\n\n\n<div class=\"gb-container gb-container-922320f0\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"534\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pure-CSS-Animated-Pricing.jpg\" alt=\"Pure CSS Animated Pricing\" class=\"wp-image-1581\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pure-CSS-Animated-Pricing.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pure-CSS-Animated-Pricing-300x148.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pure-CSS-Animated-Pricing-1024x506.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pure-CSS-Animated-Pricing-768x380.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-40bc4667\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-a8260dda\">\n<div class=\"gb-grid-column gb-grid-column-b7374d15\"><div class=\"gb-container gb-container-b7374d15\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-df47a8cf\"><div class=\"gb-container gb-container-df47a8cf\">\n\n<p class=\"wp-block-paragraph\">Aashima Jain<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-9fceff41\">\n<div class=\"gb-grid-column gb-grid-column-b9fcea1f\"><div class=\"gb-container gb-container-b9fcea1f\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-8c085600\"><div class=\"gb-container gb-container-8c085600\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/Aashima\/pen\/pKNPZB\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/Aashima\/pen\/pKNPZB\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-ef26172a\">\n<div class=\"gb-grid-column gb-grid-column-4c2a62a6\"><div class=\"gb-container gb-container-4c2a62a6\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-0b560fce\"><div class=\"gb-container gb-container-0b560fce\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-da66e405\">\n<div class=\"gb-grid-column gb-grid-column-0e6f7d3f\"><div class=\"gb-container gb-container-0e6f7d3f\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-4f24ede6\"><div class=\"gb-container gb-container-4f24ede6\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-32f8bad0\">\n<div class=\"gb-container gb-container-ebe2ce07\">\n\n\n\n<h3 class=\"wp-block-heading\">Walkthrough of Code:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s a fully responsive pricing plan created using Clip-path and CSS, featuring a beautiful hover effect on the button. The project was initially created on June 8, 2018, and last updated on July 26, 2018.<\/p>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Html:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container &amp; Row<\/strong>: Using Bootstrap&#8217;s grid system (<code>container<\/code> and <code>row<\/code>) simplifies the layout creation. It ensures that the pricing tables are aligned and responsive without having to write custom CSS.<\/li>\n\n\n\n<li><strong>Pricing Table Div<\/strong>: The <code>.pricing-table<\/code> class encapsulates each pricing plan. This makes it easier to apply common styles and maintain code.<\/li>\n\n\n\n<li><strong>Price Value<\/strong>: The <code>.price-value<\/code> and <code>.value<\/code> classes are used to isolate the pricing information. This allows for targeted styling and potential JavaScript manipulation, like dynamic pricing updates.<\/li>\n\n\n\n<li><strong>Pricing Header<\/strong>: The <code>.pricing-header<\/code> class is used to separate the plan name from the rest of the content. This enhances readability and allows for specific styling.<\/li>\n\n\n\n<li><strong>Pricing Content<\/strong>: The <code>.pricing-content<\/code> class wraps the feature list. This is useful for applying styles to the list as a whole, like padding or background color.<\/li>\n\n\n\n<li><strong>Sign-Up Button<\/strong>: The <code>.pricingTable-Sign-Up<\/code> class is used to style the &#8216;Buy Plan&#8217; button distinctly from other elements, making it stand out to encourage user action.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Global Styles<\/strong>: General styles for the body and headings are set to ensure consistency across the page. This reduces redundancy in the code.<\/li>\n\n\n\n<li><strong>Pricing Table<\/strong>: The <code>.pricing-table<\/code> class sets text alignment and z-index to ensure the text is centered and layered correctly. This improves the visual hierarchy.<\/li>\n\n\n\n<li><strong>Polygonal Background<\/strong>: The <code>clip-path<\/code> property is used to create a unique, eye-catching background shape. This adds a modern, dynamic feel to the design.<\/li>\n\n\n\n<li><strong>Price Styling<\/strong>: The hover effect on the <code>.value<\/code> class adds interactivity, making the user experience more engaging.<\/li>\n\n\n\n<li><strong>Plan Name<\/strong>: The hover effect on the plan name (<code>letter-spacing<\/code>) subtly draws attention, encouraging users to interact.<\/li>\n\n\n\n<li><strong>Feature List<\/strong>: The subtle border between each feature (<code>border-bottom<\/code>) improves readability by separating each item.<\/li>\n\n\n\n<li><strong>Button<\/strong>: The hover effect on the &#8216;Buy Plan&#8217; button is designed to capture attention, encouraging users to take action.<\/li>\n\n\n\n<li><strong>Media Query<\/strong>: The media query ensures the design is responsive, adapting to different screen sizes without requiring separate code for each device.<\/li>\n<\/ul>\n\n\n\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-ec381e88 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Glassmorphiam Responsive Pricing Table UI<\/h2>\n\n\n<div class=\"gb-container gb-container-ec1a9e73\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"556\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Glassmorphiam-Responsive-Pricing-Table-UI.jpg\" alt=\"Glassmorphiam Responsive Pricing Table UI\" class=\"wp-image-1583\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Glassmorphiam-Responsive-Pricing-Table-UI.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Glassmorphiam-Responsive-Pricing-Table-UI-300x154.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Glassmorphiam-Responsive-Pricing-Table-UI-1024x527.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Glassmorphiam-Responsive-Pricing-Table-UI-768x395.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-96be7bd6\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-c83d8dcc\">\n<div class=\"gb-grid-column gb-grid-column-0b41a277\"><div class=\"gb-container gb-container-0b41a277\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-d3238643\"><div class=\"gb-container gb-container-d3238643\">\n\n<p class=\"wp-block-paragraph\">Sofiullah Chowdhury<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-195ab492\">\n<div class=\"gb-grid-column gb-grid-column-d3152a86\"><div class=\"gb-container gb-container-d3152a86\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-aae4dcb5\"><div class=\"gb-container gb-container-aae4dcb5\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/iamsofiullah\/pen\/eYWmrYN\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/iamsofiullah\/pen\/eYWmrYN\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-34c3eed4\">\n<div class=\"gb-grid-column gb-grid-column-ca4856b4\"><div class=\"gb-container gb-container-ca4856b4\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-316eb1a9\"><div class=\"gb-container gb-container-316eb1a9\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-1284c669\">\n<div class=\"gb-grid-column gb-grid-column-3e9bd4a8\"><div class=\"gb-container gb-container-3e9bd4a8\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-0b4fc7ec\"><div class=\"gb-container gb-container-0b4fc7ec\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-35fb1ece\">\n<div class=\"gb-container gb-container-b367b4d4\">\n\n\n\n<h3 class=\"wp-block-heading\">Walkthrough of Code:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The design employs a popular UI trend known as &#8220;Glassmorphism,&#8221; characterized by frosted glass-like elements with a blurred background, semi-transparency, and vivid, layered colors. This creates a sense of depth and a futuristic, immersive user experience.<\/p>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Html:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container Class<\/strong>: The <code>.container<\/code> and <code>.grid<\/code> classes set the stage for the card layout. They&#8217;re the backbone of the design, providing structure and alignment.<\/li>\n\n\n\n<li><strong>Card Class<\/strong>: Ah, the <code>.card<\/code> class! This is where the Glassmorphism magic happens. It&#8217;s like a frosted glass pane that holds all the plan details.<\/li>\n\n\n\n<li><strong>Title &amp; Pricing<\/strong>: The <code>.card_title<\/code> and <code>.pricing<\/code> classes are the stars of the show. They&#8217;re big, bold, and impossible to ignore\u2014just like a headline act.<\/li>\n\n\n\n<li><strong>Features List<\/strong>: The <code>.features<\/code> class is the supporting cast. It lists what&#8217;s included in each plan, but without stealing the spotlight.<\/li>\n\n\n\n<li><strong>CTA Button<\/strong>: The <code>.cta_btn<\/code> class is the showstopper, urging you to take action. It&#8217;s styled to grab your attention but not to overwhelm.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Universal Styles<\/strong>: The <code>*<\/code> selector is the stagehand, setting everything to zero and making sure the show runs smoothly.<\/li>\n\n\n\n<li><strong>Body Styling<\/strong>: The <code>body<\/code> is the theater itself, setting the scene with a full-screen background image.<\/li>\n\n\n\n<li><strong>Glassmorphism<\/strong>: The <code>.card<\/code> class uses <code>backdrop-filter<\/code> to blur the background, creating that frosted glass effect. It&#8217;s like the special effects team in a movie.<\/li>\n\n\n\n<li><strong>Typography<\/strong>: Various classes like <code>.card_title<\/code> and <code>.pricing<\/code> ensure that the text is not just legible but also theatrical. It&#8217;s the script of our play.<\/li>\n\n\n\n<li><strong>Hover Effects<\/strong>: These are the interactive elements, the audience participation if you will. They make sure you&#8217;re not just watching but also engaging.<\/li>\n\n\n\n<li><strong>Media Queries<\/strong>: These are the adaptable set designs, ensuring the show looks good whether you&#8217;re sitting in the front row or the back.<\/li>\n<\/ul>\n\n\n\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-c2e9cf98 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Pricing Table Comparison Plan<\/h2>\n\n\n<div class=\"gb-container gb-container-76c0e8ee\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"658\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pricing-Table-Comparison-Plan.jpg\" alt=\"Pricing Table Comparison Plan\" class=\"wp-image-1585\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pricing-Table-Comparison-Plan.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pricing-Table-Comparison-Plan-300x183.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pricing-Table-Comparison-Plan-1024x624.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pricing-Table-Comparison-Plan-768x468.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-ad588e6b\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-67c492ee\">\n<div class=\"gb-grid-column gb-grid-column-31428541\"><div class=\"gb-container gb-container-31428541\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-945bed93\"><div class=\"gb-container gb-container-945bed93\">\n\n<p class=\"wp-block-paragraph\">Priya Maheshwari<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-127df091\">\n<div class=\"gb-grid-column gb-grid-column-815d3c23\"><div class=\"gb-container gb-container-815d3c23\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-6af016d4\"><div class=\"gb-container gb-container-6af016d4\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/Priyamaheshwari\/pen\/qBqxwyK\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/Priyamaheshwari\/pen\/qBqxwyK\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-cb9047de\">\n<div class=\"gb-grid-column gb-grid-column-15d7f288\"><div class=\"gb-container gb-container-15d7f288\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-0fca65d8\"><div class=\"gb-container gb-container-0fca65d8\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-036977e2\">\n<div class=\"gb-grid-column gb-grid-column-66c8bbb8\"><div class=\"gb-container gb-container-66c8bbb8\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-de53f7cd\"><div class=\"gb-container gb-container-de53f7cd\">\n\n<p class=\"wp-block-paragraph\">No<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-156c5fd4 ex-post-main-box\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5787258203496599\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"fluid\"\n     data-ad-layout-key=\"-6t+ed+2i-1n-4w\"\n     data-ad-client=\"ca-pub-5787258203496599\"\n     data-ad-slot=\"2493303957\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/div>\n\n<div class=\"gb-container gb-container-3f063c52 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">CSS3 Pricing Table<\/h2>\n\n\n<div class=\"gb-container gb-container-df01fd8c\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"753\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS3-Pricing-Table.jpg\" alt=\"CSS3 Pricing Table\" class=\"wp-image-1586\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS3-Pricing-Table.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS3-Pricing-Table-300x209.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS3-Pricing-Table-1024x714.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS3-Pricing-Table-768x535.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-52f747d9\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-d003850a\">\n<div class=\"gb-grid-column gb-grid-column-16ffc2ca\"><div class=\"gb-container gb-container-16ffc2ca\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-5b764e2c\"><div class=\"gb-container gb-container-5b764e2c\">\n\n<p class=\"wp-block-paragraph\">Mojtaba Seyedi<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-9863bfe4\">\n<div class=\"gb-grid-column gb-grid-column-a569b450\"><div class=\"gb-container gb-container-a569b450\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-8bc28654\"><div class=\"gb-container gb-container-8bc28654\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/seyedi\/pen\/rNOwKQp\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/seyedi\/pen\/rNOwKQp\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-15c69918\">\n<div class=\"gb-grid-column gb-grid-column-bb936d3a\"><div class=\"gb-container gb-container-bb936d3a\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-2046983a\"><div class=\"gb-container gb-container-2046983a\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-00fae97f\">\n<div class=\"gb-grid-column gb-grid-column-e5ce8b26\"><div class=\"gb-container gb-container-e5ce8b26\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-c2ee90c7\"><div class=\"gb-container gb-container-c2ee90c7\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-6a6d8561 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Pure Css Pricing Plan(Svg)<\/h2>\n\n\n<div class=\"gb-container gb-container-2b61af95\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"572\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pure-Css-Pricing-PlanSvg.jpg\" alt=\"Pure Css Pricing Plan(Svg)\" class=\"wp-image-1587\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pure-Css-Pricing-PlanSvg.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pure-Css-Pricing-PlanSvg-300x159.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pure-Css-Pricing-PlanSvg-1024x542.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Pure-Css-Pricing-PlanSvg-768x407.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-d1821f5d\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-49e965d6\">\n<div class=\"gb-grid-column gb-grid-column-7a737b60\"><div class=\"gb-container gb-container-7a737b60\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-d93fb697\"><div class=\"gb-container gb-container-d93fb697\">\n\n<p class=\"wp-block-paragraph\">Aashima Jain<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-ddead22f\">\n<div class=\"gb-grid-column gb-grid-column-bcb9324a\"><div class=\"gb-container gb-container-bcb9324a\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-4d242236\"><div class=\"gb-container gb-container-4d242236\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/Aashima\/pen\/wXRbQR\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/Aashima\/pen\/wXRbQR\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-7961f910\">\n<div class=\"gb-grid-column gb-grid-column-62eae542\"><div class=\"gb-container gb-container-62eae542\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-bf3346b7\"><div class=\"gb-container gb-container-bf3346b7\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-67539d4e\">\n<div class=\"gb-grid-column gb-grid-column-c6b9a1e0\"><div class=\"gb-container gb-container-c6b9a1e0\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-9151fd72\"><div class=\"gb-container gb-container-9151fd72\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-dc0dcc3f ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Awesome CSS Pricing Card<\/h2>\n\n\n<div class=\"gb-container gb-container-b52a03d3\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"637\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Awesome-CSS-Pricing-Card.jpg\" alt=\"Awesome CSS Pricing Card\" class=\"wp-image-1588\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Awesome-CSS-Pricing-Card.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Awesome-CSS-Pricing-Card-300x177.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Awesome-CSS-Pricing-Card-1024x604.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Awesome-CSS-Pricing-Card-768x453.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-ea63e006\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-2fe9dae9\">\n<div class=\"gb-grid-column gb-grid-column-549cf59a\"><div class=\"gb-container gb-container-549cf59a\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-00d28ced\"><div class=\"gb-container gb-container-00d28ced\">\n\n<p class=\"wp-block-paragraph\">Lily Khan<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-3d312186\">\n<div class=\"gb-grid-column gb-grid-column-fab3ffba\"><div class=\"gb-container gb-container-fab3ffba\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-a7248f0f\"><div class=\"gb-container gb-container-a7248f0f\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/Lilykhan\/pen\/xxGjXwq\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/Lilykhan\/pen\/xxGjXwq\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-57a58662\">\n<div class=\"gb-grid-column gb-grid-column-beb71ae6\"><div class=\"gb-container gb-container-beb71ae6\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-261f586c\"><div class=\"gb-container gb-container-261f586c\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-40cc77a1\">\n<div class=\"gb-grid-column gb-grid-column-d6a707ea\"><div class=\"gb-container gb-container-d6a707ea\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-4d176049\"><div class=\"gb-container gb-container-4d176049\">\n\n<p class=\"wp-block-paragraph\">No<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-d4c1a36b ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Responsive Pricing Table (HTML &amp; CSS) Only<\/h2>\n\n\n<div class=\"gb-container gb-container-43130a9c\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"682\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Responsive-Pricing-Table-HTML-CSS-Only.jpg\" alt=\"Responsive Pricing Table (HTML &amp; CSS) Only\" class=\"wp-image-1589\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Responsive-Pricing-Table-HTML-CSS-Only.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Responsive-Pricing-Table-HTML-CSS-Only-300x189.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Responsive-Pricing-Table-HTML-CSS-Only-1024x647.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Responsive-Pricing-Table-HTML-CSS-Only-768x485.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-91b5075f\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-58cbfe8e\">\n<div class=\"gb-grid-column gb-grid-column-604d16f0\"><div class=\"gb-container gb-container-604d16f0\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-74b52a5a\"><div class=\"gb-container gb-container-74b52a5a\">\n\n<p class=\"wp-block-paragraph\">Wilson<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-b6e35f36\">\n<div class=\"gb-grid-column gb-grid-column-50f42bf2\"><div class=\"gb-container gb-container-50f42bf2\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-b3432439\"><div class=\"gb-container gb-container-b3432439\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/weixiong15\/pen\/xxbPxNb\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/weixiong15\/pen\/xxbPxNb\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-284665d7\">\n<div class=\"gb-grid-column gb-grid-column-65ae163f\"><div class=\"gb-container gb-container-65ae163f\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-88879d26\"><div class=\"gb-container gb-container-88879d26\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-7fd1368d\">\n<div class=\"gb-grid-column gb-grid-column-0d57d2dc\"><div class=\"gb-container gb-container-0d57d2dc\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-54ebfc9f\"><div class=\"gb-container gb-container-54ebfc9f\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-156c5fd4 ex-post-main-box\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5787258203496599\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"fluid\"\n     data-ad-layout-key=\"-6t+ed+2i-1n-4w\"\n     data-ad-client=\"ca-pub-5787258203496599\"\n     data-ad-slot=\"2493303957\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/div>\n\n<div class=\"gb-container gb-container-555673b5 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Simple Pricing Table<\/h2>\n\n\n<div class=\"gb-container gb-container-c319c1e5\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"515\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Simple-Pricing-Table.jpg\" alt=\"Simple Pricing Table \" class=\"wp-image-1590\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Simple-Pricing-Table.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Simple-Pricing-Table-300x143.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Simple-Pricing-Table-1024x488.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Simple-Pricing-Table-768x366.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-65df0bbd\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-59c4d180\">\n<div class=\"gb-grid-column gb-grid-column-c6c4c1f8\"><div class=\"gb-container gb-container-c6c4c1f8\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-08488473\"><div class=\"gb-container gb-container-08488473\">\n\n<p class=\"wp-block-paragraph\">shamim khan<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-0f17be81\">\n<div class=\"gb-grid-column gb-grid-column-fba20cb9\"><div class=\"gb-container gb-container-fba20cb9\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-a0e07abe\"><div class=\"gb-container gb-container-a0e07abe\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/shamim539\/pen\/rNBrbep\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/shamim539\/pen\/rNBrbep\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-07179a58\">\n<div class=\"gb-grid-column gb-grid-column-f592484a\"><div class=\"gb-container gb-container-f592484a\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-ad78a922\"><div class=\"gb-container gb-container-ad78a922\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-6d8e9633\">\n<div class=\"gb-grid-column gb-grid-column-55eae66f\"><div class=\"gb-container gb-container-55eae66f\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-ceb38516\"><div class=\"gb-container gb-container-ceb38516\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-d35a8673 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">CSS Ribbon Style Pricing Plan<\/h2>\n\n\n<div class=\"gb-container gb-container-924bab15\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"632\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS-Ribbon-Style-Pricing-Plan.jpg\" alt=\"CSS Ribbon Style Pricing Plan \" class=\"wp-image-1591\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS-Ribbon-Style-Pricing-Plan.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS-Ribbon-Style-Pricing-Plan-300x176.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS-Ribbon-Style-Pricing-Plan-1024x599.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS-Ribbon-Style-Pricing-Plan-768x449.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-3304eb21\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-4597ef6b\">\n<div class=\"gb-grid-column gb-grid-column-7e6ef639\"><div class=\"gb-container gb-container-7e6ef639\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-0b5d8cad\"><div class=\"gb-container gb-container-0b5d8cad\">\n\n<p class=\"wp-block-paragraph\">Aashima Jain<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-398539cb\">\n<div class=\"gb-grid-column gb-grid-column-eafa45cd\"><div class=\"gb-container gb-container-eafa45cd\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-c79e5285\"><div class=\"gb-container gb-container-c79e5285\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/Aashima\/pen\/zWwjjL\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/Aashima\/pen\/zWwjjL\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-18175324\">\n<div class=\"gb-grid-column gb-grid-column-fcde785d\"><div class=\"gb-container gb-container-fcde785d\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-3ecd34f5\"><div class=\"gb-container gb-container-3ecd34f5\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-1045e232\">\n<div class=\"gb-grid-column gb-grid-column-eeadd152\"><div class=\"gb-container gb-container-eeadd152\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-8aca2db1\"><div class=\"gb-container gb-container-8aca2db1\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-ebe3f5bd\">\n<div class=\"gb-container gb-container-efa8e1e6\">\n\n\n\n<h3 class=\"wp-block-heading\">Walkthrough of Code:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This pricing table offers three different plans, each with its own set of features and pricing. It&#8217;s a straightforward way to display various service tiers to potential customers.<\/p>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Html:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container<\/strong>: A <code>&lt;div&gt;<\/code> with a class of <code>.container<\/code> wraps the entire pricing table, which is standard practice in Bootstrap to center and pad the content.<\/li>\n\n\n\n<li><strong>Row and Columns<\/strong>: Inside the container, a <code>&lt;div&gt;<\/code> with a class of <code>.row<\/code> is used to contain the individual pricing plans. Each plan is placed within its own column, using <code>.col-md-4<\/code> and <code>.col-sm-6<\/code> to define the column width based on screen size.<\/li>\n\n\n\n<li><strong>Individual Plans<\/strong>: Each plan is encapsulated in a <code>&lt;div&gt;<\/code> with a class of <code>.pricing-table<\/code>. Inside this, several child divs define the header, price, features, and the &#8220;Order Now&#8221; button.<\/li>\n\n\n\n<li><strong>List of Features<\/strong>: An unordered list (<code>&lt;ul&gt;<\/code>) is used to list the features of each plan. Each feature is a list item (<code>&lt;li&gt;<\/code>).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Body Styling<\/strong>: The <code>body<\/code> selector sets a top margin of 20px. The <code>!important<\/code> flag ensures this style takes precedence.<\/li>\n\n\n\n<li><strong>Typography<\/strong>: The <code>h3<\/code> selector sets the font size to 25px and the font weight to 600, making the plan titles bold and prominent.<\/li>\n\n\n\n<li><strong>Global Styles<\/strong>: The <code>a:hover, a:focus<\/code> and <code>ul<\/code> selectors remove text decoration from links and list bullets, respectively, for a cleaner look.<\/li>\n\n\n\n<li><strong>Pricing Table Base<\/strong>: The <code>.pricing-table<\/code> class sets the background color to <code>#2b2f3a<\/code> and text color to white. It also uses <code>position: relative<\/code> to enable absolute positioning within it.<\/li>\n\n\n\n<li><strong>Header Styling<\/strong>: The <code>.pricing-header<\/code> class sets the background color and padding for the header section of each plan. It also uses <code>position: relative<\/code> for potential child elements.<\/li>\n\n\n\n<li><strong>Ribbon Base<\/strong>: The <code>.pricing-header<\/code> class not only styles the header but also serves as the base for the ribbon effect. It uses <code>position: relative<\/code> to allow for the placement of pseudo-elements.<\/li>\n\n\n\n<li><strong>Pseudo-elements for Ribbon<\/strong>: The <code>.pricing-header:before<\/code> and <code>.pricing-header:after<\/code> pseudo-elements create the ribbon effect at both ends of the header. They are positioned absolutely within the <code>.pricing-header<\/code> and have a background color that matches the header.<\/li>\n\n\n\n<li><strong>Ribbon Corners<\/strong>: The <code>:before<\/code> and <code>:after<\/code> pseudo-elements for the <code>.title<\/code> class create the ribbon corners. They use border properties to create a triangular shape at both ends of the title.<\/li>\n\n\n\n<li><strong>Ribbon Skew<\/strong>: The <code>.pricing-table:after<\/code> and <code>.pricingTable-Sign-Up:before<\/code> pseudo-elements use the CSS <code>transform: skew()<\/code> property to create a skewed background, adding a 3D effect to the ribbon.<\/li>\n\n\n\n<li><strong>Dynamic Ribbon Colors<\/strong>: The <code>.yellow<\/code> and <code>.blue<\/code> classes can be added to change the ribbon color, making it dynamic and adaptable to different plans.<\/li>\n\n\n\n<li><strong>Price Styling<\/strong>: The <code>.price-value<\/code> class styles the price section, setting the background color to <code>#546f7a<\/code> and the font size to 50px.<\/li>\n\n\n\n<li><strong>Feature List Styling<\/strong>: The <code>.pricing-content<\/code> class sets the font size, color, and line height for the feature list. It also adds a bottom border to each list item for separation.<\/li>\n\n\n\n<li><strong>CTA Button Styling<\/strong>: The <code>.pricingTable-Sign-Up<\/code> class styles the &#8220;Order Now&#8221; button, setting its background color and padding. It also uses <code>position: relative<\/code> for child elements.<\/li>\n\n\n\n<li><strong>Media Queries<\/strong>: The <code>@media<\/code> rules at the end make the pricing table responsive, adjusting its bottom margin based on screen size.<\/li>\n<\/ul>\n\n\n\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-2280d971 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">CSS Gradient Pricing Table<\/h2>\n\n\n<div class=\"gb-container gb-container-393c4a58\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"443\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS-Gradient-Pricing-Table.jpg\" alt=\"CSS Gradient Pricing Table\" class=\"wp-image-1595\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS-Gradient-Pricing-Table.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS-Gradient-Pricing-Table-300x123.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS-Gradient-Pricing-Table-1024x420.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/CSS-Gradient-Pricing-Table-768x315.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-21ced58a\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-49237493\">\n<div class=\"gb-grid-column gb-grid-column-8bc1be77\"><div class=\"gb-container gb-container-8bc1be77\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-b60749b9\"><div class=\"gb-container gb-container-b60749b9\">\n\n<p class=\"wp-block-paragraph\">Assia Chemlali<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-833ce5ef\">\n<div class=\"gb-grid-column gb-grid-column-3ca7855c\"><div class=\"gb-container gb-container-3ca7855c\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-28e4e10c\"><div class=\"gb-container gb-container-28e4e10c\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/AssiaChemlali\/pen\/gVXLEN\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/AssiaChemlali\/pen\/gVXLEN\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-e2bb398c\">\n<div class=\"gb-grid-column gb-grid-column-8b345926\"><div class=\"gb-container gb-container-8b345926\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-e555d970\"><div class=\"gb-container gb-container-e555d970\">\n\n<p class=\"wp-block-paragraph\">HTML &amp; CSS<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-d0ea2d86\">\n<div class=\"gb-grid-column gb-grid-column-8a6d3d90\"><div class=\"gb-container gb-container-8a6d3d90\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-7261dbdd\"><div class=\"gb-container gb-container-7261dbdd\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-8340818b\">\n<div class=\"gb-container gb-container-ccb9788c\">\n\n\n\n<h3 class=\"wp-block-heading\">Walkthrough of Code:<\/h3>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Html:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wrapper Div<\/strong>: The <code>.wrapper<\/code> div serves as the container for all the pricing tables, providing a grid layout for them.<\/li>\n\n\n\n<li><strong>Individual Pricing Tables<\/strong>: Each pricing table is encapsulated in a <code>.pricing-table<\/code> div, which contains two main child divs: <code>.head<\/code> and <code>.content<\/code>.<\/li>\n\n\n\n<li><strong>Head Section<\/strong>: The <code>.head<\/code> div holds the title of the pricing plan, represented by an <code>&lt;h4&gt;<\/code> element.<\/li>\n\n\n\n<li><strong>Content Section<\/strong>: The <code>.content<\/code> div is further divided into three parts:\n<ul class=\"wp-block-list\">\n<li><strong>Price<\/strong>: A div with a class of <code>.price<\/code> displays the cost of the plan.<\/li>\n\n\n\n<li><strong>Features List<\/strong>: An unordered list (<code>&lt;ul&gt;<\/code>) enumerates the features of the plan.<\/li>\n\n\n\n<li><strong>Sign-Up Button<\/strong>: A <code>div<\/code> with a class of <code>.sign-up<\/code> contains the call-to-action button for signing up.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/forfrontend.com\/css-strikethrough\/\" data-type=\"post\" data-id=\"280\">Strikethrough<\/a> Features<\/strong>: The <code>&lt;del&gt;<\/code> tag is used to strike out features that are not included in the plan, providing a visual cue to the user.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Global Reset<\/strong>: The <code>*<\/code> selector is used to reset default margins and padding, and to set <code>box-sizing<\/code> to <code>border-box<\/code>.<\/li>\n\n\n\n<li><strong>Typography<\/strong>: The <code>body<\/code> selector sets the default font family and size.<\/li>\n\n\n\n<li><strong>Grid Layout<\/strong>: The <code>.wrapper<\/code> class uses CSS Grid to layout the pricing tables, with responsive adjustments for smaller screens.<\/li>\n\n\n\n<li><strong>Pricing Table Styling<\/strong>: The <code>.pricing-table<\/code> class adds a box shadow, text alignment, and padding, along with rounded corners via <code>border-radius<\/code>.<\/li>\n\n\n\n<li><strong>Head Styling<\/strong>: The <code>.head<\/code> class sets a bottom border and includes a hover effect to change the border color.<\/li>\n\n\n\n<li><strong>Price Circle<\/strong>: The <code>.price<\/code> class styles the price as a circle with a gradient background and a white border. It also includes a hover effect to scale the circle.<\/li>\n\n\n\n<li><strong>List Styling<\/strong>: The <code>ul<\/code> and <code>li<\/code> selectors remove list bullets and set margins, font size, and color for the features list.<\/li>\n\n\n\n<li><strong>Button Styling<\/strong>: The <code>.btn<\/code> class styles the sign-up button, including hover effects for a subtle shadow and color change.<\/li>\n<\/ul>\n\n\n\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-156c5fd4 ex-post-main-box\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5787258203496599\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"fluid\"\n     data-ad-layout-key=\"-6t+ed+2i-1n-4w\"\n     data-ad-client=\"ca-pub-5787258203496599\"\n     data-ad-slot=\"2493303957\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/div>\n\n<div class=\"gb-container gb-container-3ef05025 ex-post-main-box\">\n\n<h2 class=\"wp-block-heading has-text-align-center\">Advanced Responsive Flip Pricing Table<\/h2>\n\n\n<div class=\"gb-container gb-container-daa79e3c\">\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"954\" src=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Advanced-Responsive-Flip-Pricing-Table.jpg\" alt=\"Advanced Responsive Flip Pricing Table\" class=\"wp-image-1596\" srcset=\"https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Advanced-Responsive-Flip-Pricing-Table.jpg 1080w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Advanced-Responsive-Flip-Pricing-Table-300x265.jpg 300w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Advanced-Responsive-Flip-Pricing-Table-1024x905.jpg 1024w, https:\/\/forfrontend.com\/wp-content\/uploads\/2023\/10\/Advanced-Responsive-Flip-Pricing-Table-768x678.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-2-color has-alpha-channel-opacity has-accent-2-background-color has-background is-style-wide\"\/>\n\n\n<div class=\"gb-container gb-container-285f538a\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-cc702a65\">\n<div class=\"gb-grid-column gb-grid-column-429c1bf5\"><div class=\"gb-container gb-container-429c1bf5\">\n\n<p class=\"has-text-color has-link-color wp-elements-15b52b468fba53a675151ec8cbb9d5e3 wp-block-paragraph\" style=\"color:#777777\"><strong>Author<\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-e4cfb0fe\"><div class=\"gb-container gb-container-e4cfb0fe\">\n\n<p class=\"wp-block-paragraph\">Shane Heyns<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-08dc4032\">\n<div class=\"gb-grid-column gb-grid-column-ce2c89f4\"><div class=\"gb-container gb-container-ce2c89f4\">\n\n<p class=\"has-text-color has-link-color wp-elements-4a29319e6ccd751e2061d43e99b789b8 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Source Code<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-b69270c4\"><div class=\"gb-container gb-container-b69270c4\">\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/shaneheyns\/pen\/qgKOVP\" data-type=\"link\" data-id=\"https:\/\/codepen.io\/shaneheyns\/pen\/qgKOVP\" target=\"_blank\" rel=\"noopener\">Demo\/Source Code<\/a><\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-8e3cd6e7\">\n<div class=\"gb-grid-column gb-grid-column-198dfde5\"><div class=\"gb-container gb-container-198dfde5\">\n\n<p class=\"has-text-color has-link-color wp-elements-b45d61aa9da0bb2a349fc75ea83ba9b0 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Language<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-a11acd33\"><div class=\"gb-container gb-container-a11acd33\">\n\n<p class=\"wp-block-paragraph\">Html, CSS &amp; Js<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-grid-wrapper gb-grid-wrapper-58dd7f12\">\n<div class=\"gb-grid-column gb-grid-column-7310aec8\"><div class=\"gb-container gb-container-7310aec8\">\n\n<p class=\"has-text-color has-link-color wp-elements-bbbecad284487e97c447a707851ec173 wp-block-paragraph\" style=\"color:#777777\"><strong><strong>Responsive<\/strong><\/strong><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-36c89d99\"><div class=\"gb-container gb-container-36c89d99\">\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>CSS pricing tables are a way of displaying different plans or options for a product &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"15+ CSS Pricing Tables\" class=\"read-more button\" href=\"https:\/\/forfrontend.com\/css-pricing-table\/\" aria-label=\"More on 15+ CSS Pricing Tables\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":1600,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[204],"tags":[206,60,205],"class_list":["post-1255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tables","tag-animated","tag-css","tag-pricing-table","resize-featured-image"],"_links":{"self":[{"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/posts\/1255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/comments?post=1255"}],"version-history":[{"count":19,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/posts\/1255\/revisions"}],"predecessor-version":[{"id":3987,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/posts\/1255\/revisions\/3987"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/media\/1600"}],"wp:attachment":[{"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/media?parent=1255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/categories?post=1255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/forfrontend.com\/wp-json\/wp\/v2\/tags?post=1255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}