sriparthu
Creating Beautiful Pricing Cards with HTML and CSS Mini Project

Creating Beautiful Pricing Cards with HTML and CSS Mini Project

sri parthu's photo
sri parthu
·

5 min read

Table of contents

Introduction

  • HTML and CSS work hand in hand to bring creative web designs to life. A pricing card layout is a fantastic example where structure and style combine to deliver clarity and visual appeal. It typically involves:

    1. HTML: To define the content structure, such as pricing tiers, features, and call-to-action buttons.

    2. CSS: To enhance the design with colors, typography, shadows, and responsive layouts.

  • In this blog, we'll guide you through creating responsive and visually appealing pricing cards using HTML and CSS.

    • Pricing cards are essential for showcasing product or service plans, and we'll ensure they're not only functional but also look professional. Whether you're a beginner or an experienced developer, this tutorial will help you design cards that work seamlessly across devices.

      What to Expect:

      1. Setting up the basic HTML structure.

      2. Styling the pricing cards with CSS.

      3. Adding finishing touches to make the cards stand out.

      4. Later, we will design responsiveness for various screen sizes.

HTML: Structuring the Pricing Cards

  • The HTML code is the backbone of your pricing cards, defining their structure and content. Each pricing plan—Basic, Pro, and Enterprise—is represented as an individual "card," containing essential elements such as the plan name, pricing, features, and a call-to-action button.

Key Features of the HTML Code:

  1. Semantic Structure

    • <div> elements group related content logically, creating containers for all cards and individual cards themselves.

    • The <h1> tag serves as the main heading for the section, ensuring the content is clear and accessible.

  2. Class Usage

    • Classes like .container, .card, and .popular make styling with CSS seamless, allowing for unique designs for specific elements.

    • The .disabled class visually indicates unavailable features by greying out the corresponding text.

  3. Flexibility

    • Using <ul> and <li> tags for the feature list provides a clean and organized way to showcase plan details.

Here’s the full HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing Cards</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Choose Your Plan</h1>
        <div class="pricing-cards">
            <div class="card basic">
                <h2>Basic</h2>
                <div class="price">$9.99<span>/month</span></div>
                <ul>
                    <li>✓ 10GB Storage</li>
                    <li>✓ 1 User</li>
                    <li>✓ Basic Support</li>
                    <li class="disabled">✗ SSL Certificate</li>
                    <li class="disabled">✗ Priority Support</li>
                </ul>
                <button>Select Plan</button>
            </div>

            <div class="card pro">
                <div class="popular">Most Popular</div>
                <h2>Pro</h2>
                <div class="price">$19.99<span>/month</span></div>
                <ul>
                    <li>✓ 50GB Storage</li>
                    <li>✓ 5 Users</li>
                    <li>✓ Priority Support</li>
                    <li>✓ SSL Certificate</li>
                    <li class="disabled">✗ Custom Domain</li>
                </ul>
                <button>Select Plan</button>
            </div>

            <div class="card enterprise">
                <h2>Enterprise</h2>
                <div class="price">$29.99<span>/month</span></div>
                <ul>
                    <li>✓ 100GB Storage</li>
                    <li>✓ Unlimited Users</li>
                    <li>✓ 24/7 Support</li>
                    <li>✓ SSL Certificate</li>
                    <li>✓ Custom Domain</li>
                </ul>
                <button>Select Plan</button>
            </div>
        </div>
    </div>
</body>
</html>

CSS: Styling the Pricing Cards

  • CSS plays a pivotal role in transforming the basic HTML structure into an engaging and responsive design. It ensures that the pricing cards are not only functional but also visually appealing and user-friendly.

Key Features of the CSS

  1. Background Gradient

    • The body element is styled with a linear gradient to create a smooth transition between two colors, adding depth and a modern aesthetic to the page.

  2. Card Styling

    • Each card features a white background, rounded corners, and a subtle shadow, creating a clean and professional "floating" effect.

    • On hover, the cards shift slightly upward, adding interactivity and improving user experience.

  3. Flexbox Layout

    • Flexbox is used to neatly align and evenly space the cards within the container.

    • This ensures a clean, responsive layout that adapts effortlessly to different screen sizes.

  4. Highlighting the Pro Plan

    • The .popular class is used to highlight the "Pro" plan as the recommended choice.

    • A distinct badge and standout styling make it visually appealing and easier for users to identify.

Here’s the full CSS code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

h1 {
    color: white;
    margin-bottom: 50px;
    font-size: 2.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.pricing-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    width: 300px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
}

.popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff6b6b;
    color: white;
    padding: 5px 15px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
}

h2 {
    color: #2d3436;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.price {
    font-size: 2.5rem;
    color: #2d3436;
    margin-bottom: 30px;
    font-weight: bold;
}

.price span {
    font-size: 1rem;
    color: #636e72;
    font-weight: normal;
}

ul {
    list-style: none;
    margin-bottom: 30px;
}

li {
    padding: 10px 0;
    color: #636e72;
    border-bottom: 1px solid #eee;
}

li.disabled {
    color: #b2bec3;
}

button {
    background: #6c5ce7;
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    background: #5b4bc4;
}

.pro {
    background: #fafafa;
    border: 2px solid #6c5ce7;
}

OutPut

Conclusion

  • By combining HTML and CSS, you can design a visually stunning and fully functional pricing cards layout that elevates any product or service website. The use of semantic HTML ensures a clean and accessible structure, while Flexbox simplifies alignment for a design. Adding CSS transitions enhances interactivity, creating an engaging user experience.

  • This project showcases how design and functionality can work in harmony. Whether you're building for a personal project or a professional website, pricing cards are a versatile and essential feature.

  • Start experimenting today! Customize the layout, tweak the styles, and make it uniquely yours. With a little creativity, the possibilities are endless!

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥

HTML5CSS3CSS Animationcss flexboxCSSCSS FrameworksHTML tags