Card pricing plans Website CSS Design

index.html and styles.css Here is a more polished look for your pricing plans page:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing Plans - SoengSouy Web Design</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container my-5">
        <!-- Section: Content -->
        <section class="text-center">
            <!-- Section heading -->
            <h3 class="font-weight-bold dark-grey-text pb-2 mb-4">Our Pricing Plans</h3>
            <!-- Section description -->
            <p class="text-muted w-responsive mx-auto mb-5">
                SoengSouy.Webdesign is a free online learning platform that introduces methods and techniques for coding websites, ranging from the basics to advanced levels. Learn how to design website templates, layouts, footers, panels, and much more.
            </p>

            <!-- Grid row for pricing cards -->
            <div class="row">
                <!-- Grid column for BASIC plan -->
                <div class="col-lg-4 col-md-12 mb-4">
                    <!-- Pricing card -->
                    <div class="card pricing-card white-text">
                        <!-- Price -->
                        <div class="aqua-gradient rounded-top">
                            <h4 class="option">BASIC</h4>
                        </div>
                        <!-- Features -->
                        <div class="card-body striped green-striped card-background px-5">
                            <h2 class="my-4 pb-3 h1">$20</h2>
                            <ul>
                                <li><p><strong>1</strong> project</p></li>
                                <li><p><strong>100</strong> components</p></li>
                                <li><p><strong>150</strong> features</p></li>
                                <li><p><strong>200</strong> members</p></li>
                            </ul>
                            <button class="mb-3 mt-3 btn aqua-gradient btn-rounded">Buy Now</button>
                        </div>
                    </div>
                </div>

                <!-- Grid column for PRO plan -->
                <div class="col-lg-4 col-md-6 mb-4">
                    <!-- Pricing card -->
                    <div class="card pricing-card white-text">
                        <!-- Price -->
                        <div class="peach-gradient rounded-top">
                            <h4 class="option">PRO</h4>
                        </div>
                        <!-- Features -->
                        <div class="card-body striped orange-striped card-background px-5">
                            <h2 class="my-4 pb-3 h1">$80</h2>
                            <ul>
                                <li><p><strong>1</strong> project</p></li>
                                <li><p><strong>100</strong> components</p></li>
                                <li><p><strong>150</strong> features</p></li>
                                <li><p><strong>200</strong> members</p></li>
                            </ul>
                            <button class="mb-3 mt-3 btn peach-gradient btn-rounded">Buy Now</button>
                        </div>
                    </div>
                </div>

                <!-- Grid column for ENTERPRISE plan -->
                <div class="col-lg-4 col-md-6 mb-4">
                    <!-- Pricing card -->
                    <div class="card pricing-card white-text">
                        <!-- Price -->
                        <div class="purple-gradient rounded-top">
                            <h4 class="option">ENTERPRISE</h4>
                        </div>
                        <!-- Features -->
                        <div class="card-body striped purple-striped card-background px-5">
                            <h2 class="my-4 pb-3 h1">$100</h2>
                            <ul>
                                <li><p><strong>1</strong> project</p></li>
                                <li><p><strong>100</strong> components</p></li>
                                <li><p><strong>150</strong> features</p></li>
                                <li><p><strong>200</strong> members</p></li>
                            </ul>
                            <button class="mb-3 mt-3 btn purple-gradient btn-rounded">Buy Now</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Section: Content -->
    </div>
</body>
</html>

styles.css

/* General Styles */
.h4, h4 {
    font-size: 1.5rem;
    color: white;
}

.mb-4, .my-4 {
    margin-bottom: 1.5rem!important;
}

.pricing-card {
    text-align: center;
}

.card {
    font-weight: 400;
    border: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.12);
}

/* Gradient Styles */
.aqua-gradient {
    background: linear-gradient(40deg, #2096ff, #05ffa3) !important;
}

.peach-gradient {
    background: linear-gradient(40deg, #ffd86f, #fc6262) !important;
}

.purple-gradient {
    background: linear-gradient(40deg, #ff6ec4, #7873f5) !important;
}

/* Card Styles */
.rounded-top {
    border-top-left-radius: .25rem!important;
    border-top-right-radius: .25rem!important;
}

.pricing-card .option {
    padding: 2.5rem;
    margin-bottom: 0;
    font-weight: 500;
}

.pricing-card .card-background {
    background-color: #28283f;
    border-radius: 0 0 .25rem .25rem;
}

.pricing-card .striped {
    padding: 1rem;
}

/* Padding Styles */
.pl-5, .px-5 {
    padding-left: 3rem!important;
}

.pr-5, .px-5 {
    padding-right: 3rem!important;
}

/* List Styles */
.pricing-card ul {
    padding: 0;
    list-style-type: none;
}

.pricing-card .striped.green-striped li {
    border-color: #33c28a;
}

.pricing-card .striped.orange-striped li {
    border-color: #e97d63;
}

.pricing-card .striped.purple-striped li {
    border-color: #963c94;
}

.pricing-card .striped li {
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(238, 238, 238, 0.3);
}

/* Button Styles */
h2, ul li p {
    color: white;
}

.btn-rounded {
    color: white !important;
    font-weight: 600 !important;
    border-radius: 1px !important;
}

.btn {
    margin: .375rem;
    color: inherit;
    text-transform: uppercase;
    word-wrap: break-word;
    white-space: normal;
    cursor: pointer;
    border: 0;
    border-radius: .125rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
    padding: .84rem 2.14rem;
    font-size: .81rem;
}

/* Margin and Spacing */
.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}

Key Enhancements:

Layout Adjustments:
- The pricing card layout is optimized for different screen sizes using the Bootstrap grid system (col-lg-4, col-md-6).
Card Design:
- The cards now have more vibrant gradient backgrounds for each plan (Basic, Pro, and Enterprise).
- Each card has a consistent rounded-top and box-shadow for a clean design.
Button Styling:
- Buttons now feature consistent styles and hover effects with btn-rounded to make them more visually appealing.
Typography:
- Clear separation between plan descriptions, prices, and features with enhanced font sizes for better readability.
Improved Colors:
- Each pricing card uses distinct gradient colors (aqua, peach, purple) to differentiate the plans visually.

Souy Soeng

Card pricing plans Website CSS Design

index.html

styles.css

Key Enhancements:

Post a Comment

Souy Soeng