→ Ankit khedkar
→ Credit Card Clone

Credit Card Clone

On hover shows backside of credit card

This bootstrap css example is contributed by Ankit khedkar, on 20-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is copy

Tags: Other Clone

Author Ankit khedkar

2.1k

v.5.3

Fork Fullscreen

<div class="container">
    <div class="credit-card mx-auto">
        <div class="credit-card-front">
            <div class="d-flex justify-content-between">
                <img src="data:image/png;base64,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" alt="Chip" width="50">
                <div class="hologram"></div>
            </div>
            <div class="card-number">
                4539 1488 0343 6467
            </div>
            <div class="d-flex justify-content-between align-items-end">
                <div>
                    <div class="card-holder mb-1">John Doe</div>
                    <div class="card-expires">Valid Thru: 12/25</div>
                </div>
                <img src="https://img.icons8.com/color/48/000000/visa.png" alt="Visa" width="60">
            </div>
        </div>
        <div class="credit-card-back">
            <div class="magnetic-strip"></div>
            <div class="cvv">
                <span class="me-2">CVV</span>123
            </div>
            <div class="card-details p-3">
                This card is property of Our Bank. Misuse is criminal offence. If found, please return to Our Bank or to
                the nearest bank.
            </div>
        </div>
    </div>
</div>

More Examples

Credit cards bootstrap 5
credit cards design made with Bootstrap 5

Author:
Ankit khedkar

2 years ago

4.4k

v.5.3
Changelog page template

Author:
Asmath

1 year ago

4.3k

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

1 year ago

8.8k

v.5.3
Background image with bootstrap 4
Bootstrap 4 background image

Author:
Anonymous

1 year ago

2k

v.4.6
Minimal Changelog Page Template design

Author:
Asmath

1 year ago

3k

v.5.3
Responsive video container

Author:
Anonymous

2 years ago

1.7k

v.4.6
Parallax effect with image background

Author:
Anonymous

1 year ago

3.1k

v.4.6
Privacy policy template with boostrap 5

Author:
Anonymous

1 year ago

4k

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

1 year ago

11.2k

v.5.3
Bootstrap 5 chat template

Author:
Andreas Müller

2 years ago

4k

v.5.3
Invoice template with bootstrap

Author:
Anonymous

2 years ago

1.9k

v.4.6
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

2 years ago

3.9k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent