bytetrooper / flexbox-pricing-table-

a pricing page with a responsive layout using flexbox and media queries

Flexbox-Pricing-table-

The site features a pricing page that displays three pricing plans: Basic, Standard, and Premium. Each plan is contained within a pricing box, represented by the

element with the class pricing-plan.

Each pricing box includes a title (div class="plan-title"), a price (div class="plan-price"), a list of features (ul class="plan-features"), and a sign-up button (button class="plan-button").

The CSS styles define the overall appearance of the pricing page. The .pricing-container class sets up a flex container that horizontally aligns the pricing boxes and vertically centers them within the viewport.

The media query in the CSS code adjusts the layout for screens up to 768 pixels in width. In this case, it switches the flex-direction to column, which stacks the pricing boxes vertically on smaller screens.

Additionally, various CSS rules define the styling for the pricing boxes, such as font styles, background colors, borders, and hover effects on the sign-up buttons.

Overall, this pricing page aims to provide a responsive and visually appealing display of different pricing plans, allowing users to easily compare the features and sign up for their desired plan.