{"id":21074563,"url":"https://github.com/shamikaredkar/pricing-panel","last_synced_at":"2026-05-19T11:33:14.948Z","repository":{"id":235249797,"uuid":"790380527","full_name":"shamikaredkar/Pricing-Panel","owner":"shamikaredkar","description":"The Pricing-Plan Project features responsive subscription plans for various user needs, displayed in a user-friendly format across devices. It integrates media queries for optimal viewing on larger screens, focusing on clear, actionable subscription options.","archived":false,"fork":false,"pushed_at":"2024-06-24T01:11:07.000Z","size":462,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-20T22:38:58.824Z","etag":null,"topics":["css-media-queries","css-mediaquery","css3","html5","pricing-panel","pricing-table","responsive-design","responsive-design-mode","responsive-web-design","user-interface","web-design"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shamikaredkar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-22T19:20:00.000Z","updated_at":"2024-06-24T01:11:10.000Z","dependencies_parsed_at":"2024-04-25T11:00:14.274Z","dependency_job_id":null,"html_url":"https://github.com/shamikaredkar/Pricing-Panel","commit_stats":null,"previous_names":["shamikaredkar/pricing-panel"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamikaredkar%2FPricing-Panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamikaredkar%2FPricing-Panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamikaredkar%2FPricing-Panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shamikaredkar%2FPricing-Panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shamikaredkar","download_url":"https://codeload.github.com/shamikaredkar/Pricing-Panel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243517316,"owners_count":20303603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-media-queries","css-mediaquery","css3","html5","pricing-panel","pricing-table","responsive-design","responsive-design-mode","responsive-web-design","user-interface","web-design"],"created_at":"2024-11-19T19:16:46.547Z","updated_at":"2026-05-19T11:33:09.915Z","avatar_url":"https://github.com/shamikaredkar.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Pricing Plan Demo](https://github.com/shamikaredkar/Pricing-Panel/blob/main/Pricing-Plan-Preview.png)\n\n### Purpose:\n\nThe purpose of the Pricing-Plan Project is to present various service subscription options in a clear and appealing format, allowing potential customers to easily compare features and costs associated with each plan. The project aims to facilitate the decision-making process for users seeking to subscribe to a service, with emphasis on simplicity and ease of navigation.\n\n---\n\n### Features:\n\n\u003e Three distinct pricing tiers with unique icons and feature lists\n\u003e \n\n\u003e Responsive design to ensure accessibility across different devices.\n\u003e \n\n\u003e Interactive elements, such as hover effects, to enhance user experience.\n\u003e\n\n\u003e Clear call-to-action buttons for users to sign up or start a free trial.\n\u003e \n---\n\n### Technology Stack:\n\nHTML, CSS, External Fonts (Google Fonts)\n\n---\n\n### Code Documentation:\n\n## HTML\n\n\u003c/aside\u003e\n\n**index.html —** The document consists of a div with a class of panel pricing-table, which serves as the container for the individual pricing plans.\n\n- **`\u003cimg\u003e`**: Represents the tier's icon.\n- **`\u003ch2\u003e`**: Plan's name.\n- **`\u003cul\u003e` with `\u003cli\u003e`**: Listing the features.\n- **`\u003cspan\u003e`**: Displaying the price\n- **`\u003ca\u003e`**: Functioning as a signup or trial button\n\n## CSS\n\u003c/aside\u003e\n\n**app.css —**  This stylesheet applies custom styles to the pricing plans, including:\n\n- Layout and positioning of pricing plans.\n- Styling for icons, headers, and feature lists.\n- Design of buttons and their interactive states.\n\n**Features (`pricing-features`)**\n\n```css\n.pricing-features {\n    list-style: none;\n    padding: 0;\n    margin-bottom: 1.5rem;\n}\n.pricing-features-item {\n    margin-bottom: 0.5rem;\n    text-align: left;\n}\n```\n\n- **List Style**: Removes bullet points from the list for a cleaner look using `list-style`.\n- **Padding and Margin**: Resets `padding` to 0 and adds `margin-bottom` to space out the list from the subsequent price display. Adds spacing between individual list items for legibility with `margin-bottom`.\n\n**Price (`pricing-price`)**\n\n```css\n.pricing-price {\n    font-size: 2rem;\n    font-weight: bold;\n    display: block;\n    margin-bottom: 1.5rem;\n}\n```\n\n- **Display**: Uses `display: block` to ensure the price appears on a new line.\n- **Margin-Bottom**: Separates the price from the signup button with `margin-bottom`.\n\n### Media Queries\n\n```css\n@media (min-width: 900px) {\n    .panel {\n        flex-direction: row;\n    }\n\n    .pricing-plan {\n        border-bottom: none;\n        border-right: 1px solid #e1f1ff;\n        padding: 25px 50px;\n    }\n\n    .pricing-plan:last-child {\n        border-right: none;\n    }\n}\n```\n**Panel Layout:**\n- The `.panel` class changes the layout direction to a row using `flex-direction: row.` This means that on screens wider than 900 pixels, the pricing plans will be arranged side by side instead of stacking vertically.\n\n**Individual Pricing Plan Style Adjustments:**\n\n- The `.pricing-plan` class has its bottom border removed with `border-bottom: none`, ensuring there is no border at the bottom of each plan when side by side.\n- A right border is added with `border-right: 1px solid #e1f1ff` to separate each plan visually.\n- Padding is adjusted to `25px 50px` to provide more space inside each pricing plan, allowing for a more airy and less congested display of the plans' content.\n\n**Last Pricing Plan Adjustment:**\n\n- The `.pricing-plan:last-child` selector targets the last pricing plan to ensure that it does not have a right border with `border-right: none.` This prevents a border from appearing on the far right edge of the pricing table, which would be unnecessary and could disrupt the clean layout.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshamikaredkar%2Fpricing-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshamikaredkar%2Fpricing-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshamikaredkar%2Fpricing-panel/lists"}