Voucher card/coupon like html view

General
1

I’m intending to make this voucher card/coupon like section in my Laravel project.

image
image823×295 74.6 KB

Does anyone know genuinely how to create this? I’ve tried many ways, but it came off futile. Particularly the white curvy thingy on the right.

(I had to cover the assets since I’m afraid my coworker will come across this problem…) putting that aside I hope someone will give me a solution, thank you!

What I’ve tried

image
image823×295 64.5 KB

blade:

<div class="container mt-5">
        <div class="promo-card">
            <div class="row g-0">
                <div class="col-md-4 col-lg-1 bg-best-deal d-flex align-items-center justify-content-center">
                    <p class="best-deal-text">Text</p>
                </div>
                <div class="col-md-8 col-lg-9">
                    <div class="card-body d-flex align-items-center">
                        <div class="row w-100">
                            <div class="col-lg-7 position-relative">
                                <img src="{{ asset('assets/img.png') }}" class="img-fluid" alt="Promo Image">
                            </div>
                            <div class="col-lg-5 d-flex align-items-center">
                                <div class="container-fluid">
                                    <!-- Text and promo code goes here-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

css:

.promo-card {
        border: 4px solid transparent;
        border-radius: 24px;
        background: linear-gradient(white, white) padding-box, linear-gradient(90deg, #F5C020 -26.92%, #FFE598 100%) border-box;
        overflow: hidden;
        background-color: #ffffff;
        border-radius: 24px;
        box-shadow: 0px 19.66px 132.3px 0px rgba(251, 214, 104, 0.5);
    }

    .best-deal-text {
        color: #1B5458;
        writing-mode: vertical-rl;
        font-weight: 570;
        font-size: 2.5rem;
    }

    .bg-best-deal {
        background: linear-gradient(90deg, #F5C020 -26.92%, #FFE598 100%);

    }

    .image-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        overflow: hidden;
    }

    .image-overlay svg {
        height: 100%;
        width: 40px;
        position: absolute;
        right: 0;
    }
2

To create a voucher card/coupon-like section in Laravel with the white curvy design on the right side, you can use a combination of HTML, CSS, and SVG for the curvy effect. Here’s how you can approach it:

1. HTML Structure

You already have a good structure, but to add the white curvy part, you’ll need to integrate SVG or use CSS for the shape.

html

Copy code

<div class="container mt-5">
    <div class="promo-card">
        <div class="row g-0">
            <div class="col-md-4 col-lg-1 bg-best-deal d-flex align-items-center justify-content-center">
                <p class="best-deal-text">Text</p>
            </div>
            <div class="col-md-8 col-lg-9">
                <div class="card-body d-flex align-items-center">
                    <div class="row w-100">
                        <div class="col-lg-7 position-relative">
                            <img src="{{ asset('assets/img.png') }}" class="img-fluid" alt="Promo Image">
                        </div>
                        <div class="col-lg-5 d-flex align-items-center position-relative">
                            <div class="container-fluid">
                                <!-- Text and promo code goes here-->
                            </div>
                            <!-- Curvy Shape -->
                            <div class="curvy-shape"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2. CSS Styling

css

Copy code

.promo-card {
    border: 4px solid transparent;
    border-radius: 24px;
    background: linear-gradient(white, white) padding-box, linear-gradient(90deg, #F5C020 -26.92%, #FFE598 100%) border-box;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0px 19.66px 132.3px 0px rgba(251, 214, 104, 0.5);
    position: relative;
}

.best-deal-text {
    color: #1B5458;
    writing-mode: vertical-rl;
    font-weight: 570;
    font-size: 2.5rem;
}

.bg-best-deal {
    background: linear-gradient(90deg, #F5C020 -26.92%, #FFE598 100%);
}

/* The curvy shape on the right side */
.curvy-shape {
    position: absolute;
    right: -20px; /* Adjust this value to match your design */
    top: 0;
    bottom: 0;
    width: 60px; /* Adjust this value to match your design */
    background: white;
    border-radius: 0 0 0 100%;
    box-shadow: -20px 0 20px rgba(0, 0, 0, 0.1);
}

/* Additional overlay for the curve */
.curvy-shape::before {
    content: "";
    position: absolute;
    top: 0;
    right: -40px;
    bottom: 0;
    width: 80px;
    background: linear-gradient(to right, white 50%, transparent 50%);
    border-radius: 0 0 0 100%;
}

3. Explanation

  • Curvy Shape: The .curvy-shape class is used to create the white curvy part on the right side of the card. It’s positioned absolutely inside the card to ensure it stays on the right edge.
  • Box Shadow: The slight box shadow on the curve gives it a more distinct, raised effect.
  • Before Element: The ::before pseudo-element is used to add an additional overlay, enhancing the curvy effect.

4. Adjustments

You may need to adjust the sizes, positions, and colors to perfectly match your design. The idea is to use CSS shapes to create the curvy effect, which can be fine-tuned according to your design needs.

This approach should help you achieve the desired look for your voucher card/coupon section in your Laravel project.