A Code by alejandrokundrah

Open In Editor Publish Your Code

<body>
    <div class="card">
        <div class="payment_bx">
            <div class="content">
                <div class="card_bx">
                    <label for="">CARDHOLDER</label>
                    <input type="text" placeholder="Enter Your Name..." value="Wemo Darrielle">
                </div>
                <div class="card_bx">
                    <label for="">CARD NUMBER</label>
                    <input type="text" name="credit-number" placeholder="xxxx - xxxx - xxxx - xxxx" value="4576 - 9562 - 2356 - 7867">
                    <img src="img/master.png" alt="" id="master">
                </div>
                <div class="exp_cvv">
                    <div class="card_bx">
                        <label for="">EXP DATE</label>
                        <input type="tel" maxlength="5" value="02/28">
                    </div>
                    <div class="card_bx">
                        <label for="">CVV</label>
                        <input type="tel" maxlength="" value="008">
                    </div>
                </div>
            </div>
            <div class="Price_btn">
                <div class="price">
                    <div class="pack">
                        <h6>Total</h6>
                        <h3>$40 <sup>99</sup></h3>
                    </div>
                </div>
                <div class="btn">
                    <h5>PURCHASE</h5>
                </div>
            </div>
        </div>
        <div class="product_bx">
            <h5>YOU ARE PURCHASING</h5>
            <h2>AirPods</h2>
            <img src="img/Airpods.png" alt="" id="poster">
            <div class="cards">
                <div class="card_img">
                    <img src="img/air1.png" alt="">
                    <h6 class="dot"></h6>
                </div>
                <div class="card_img">
                    <img src="img/Airpods.png" alt="">
                    <h6 class="dot"></h6>
                </div>
                <div class="card_img">
                    <img src="img/air3.png" alt="">
                    <h6 class="dot"></h6>
                </div>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Css Reset */

* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    height: 100vh;
    background: #0380f3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    width: 800px;
    height: 450px;
    /* border: 1px solid #fff; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card .payment_bx,
.product_bx {
    position: relative;
    width: 40%;
    height: 100%;
    /* border: 1px solid #fff; */
}

.card .payment_bx {
    width: 60%;
    overflow: hidden;
}

.card .payment_bx::before {
    content: '';
    position: absolute;
    width: 85%;
    height: 100%;
    background: #111e32;
    border-radius: 30px;
    /* box-shadow: 40px;  */
    box-shadow: 40px 0px 50px -35px rgb(0, 0, 0, .8);
    z-index: -1;
}

.card .payment_bx::after {
    content: '';
    position: absolute;
    width: 130px;
    height: 101%;
    background: #111e32;
    /* background: #719fe6; */
    border-radius: 30px;
    /* box-shadow: 40px;  */
    right: 7.5%;
    top: -8px;
    transform: rotate(10deg);
    z-index: -1;
}

.card .product_bx {
    height: 85%;
    background: #fff;
    border-radius: 0px 30px 30px 0px;
}

.card .product_bx::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    left: -50%;
    z-index: -2;
}

.card .payment_bx .content {
    padding: 20px 0px 20px 50px;
    /* border: 1px solid #fff; */
}

.card .payment_bx .content .card_bx {
    position: relative;
    width: 80%;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to right, #0371d4, transparent) 100 1%;
    border-top: none;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.card .payment_bx .content .card_bx label {
    color: #0070d6;
    font-size: 13px;
    font-weight: 600;
}

.card .payment_bx .content .card_bx input {
    margin-top: 10px;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.card .payment_bx .content .card_bx img {
    position: absolute;
    width: 60px;
    right: 0;
    bottom: 0;
}

.card .payment_bx .content .exp_cvv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 90px;
}

.card .payment_bx .content .exp_cvv .card_bx {
    width: 40%;
}

.card .payment_bx .Price_btn {
    margin: 30px 0px 0px 50px;
    display: flex;
    align-items: center;
}

.card .payment_bx .Price_btn .price {
    position: relative;
    width: 200px;
    height: 80px;
    background: #0070d6;
    border-radius: 10px 0px 0px 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 10px 3px 20px -5px rgb(0, 112, 214, .5);
}

.card .payment_bx .Price_btn .price h3 {
    font-size: 25px;
    font-weight: 800;
}

.card .payment_bx .Price_btn .btn {
    width: 200px;
    height: 80px;
    background: #fff;
    border-radius: 0px 10px 10px 0px;
    color: #0070d6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .3s linear;
}

.card .payment_bx .Price_btn .btn:hover {
    background: rgb(0, 112, 214, .6);
    color: #fff;
}

.card .product_bx {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.card .product_bx h5 {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 400;
    color: rgb(0, 0, 0, .6);
}

.card .product_bx h2 {
    font-family: Auto;
}

.card .product_bx .cards {
    display: flex;
    align-items: center;
}

.card .product_bx .cards .card_img {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 5px;
    /* border: 1px solid #000; */
    border-radius: 10px;
    transition: .3s linear;
    cursor: pointer;
}

.card .product_bx .cards .card_img:hover {
    box-shadow: 0px 0px 20px rgb(0, 0, 0, .2);
}

.card .product_bx .cards .card_img:nth-child(2) {
    box-shadow: 0px 0px 20px rgb(0, 0, 0, .2);
}

.card .product_bx .cards .card_img img {
    width: 100%;
    height: 100%;
}

.card .product_bx .cards .card_img h6 {
    position: absolute;
    bottom: -20px;
    left: 45%;
    border: 2px solid #0070d6;
    border-radius: 50%;
    padding: 1px;
    background: #0070d6;
}

.card .product_bx .cards .card_img:nth-child(2) h6 {
    background: transparent;
    box-shadow: 0px 0px 5px #0070d6;
}

JS

// Credit card type detection with subtle visual feedback
let credit_number = document.getElementsByName('credit-number')[0];

credit_number.addEventListener('keyup', (e) => {
    let number4 = parseInt((credit_number.value).slice(0, 4));
    let masterImg = document.getElementById('master');
    
    // Card type detection with smooth transition
    if (number4 >= 5100 && number4 <= 5599) {
        masterImg.style.opacity = '0';
        setTimeout(() => {
            masterImg.src = "img/master.png";
            masterImg.style.opacity = '1';
        }, 150);
    } else if (number4 >= 4000 && number4 <= 4999) {
        masterImg.style.opacity = '0';
        setTimeout(() => {
            masterImg.src = "img/visa.png";
            masterImg.style.opacity = '1';
        }, 150);
    }
    
    // Auto-format card number
    let value = e.target.value.replace(/\s/g, '').replace(/[^0-9]/gi, '');
    let formattedValue = value.match(/.{1,4}/g)?.join(' ');
    e.target.value = formattedValue || value;
});

// Product images array
const img = ["img/air1.png", "img/Airpods.png", "img/air3.png"];

// Reset functions with smooth transitions
let dotoff = () => {
    Array.from(document.getElementsByClassName('dot')).forEach((ele) => {
        ele.style.boxShadow = "unset";
        ele.style.background = "#4a5568";
    });
}

let cardoff = () => {
    Array.from(document.getElementsByClassName('card_img')).forEach((ele) => {
        ele.classList.remove('active');
    });
}

// Product image switching with enhanced animations
Array.from(document.getElementsByClassName('card_img')).forEach((ele, i) => {
    ele.addEventListener('click', () => {
        cardoff();
        dotoff();
        
        // Smooth image transition
        let poster = document.getElementById('poster');
        poster.style.opacity = '0';
        poster.style.transform = 'scale(0.9)';
        
        setTimeout(() => {
            poster.src = img[i];
            poster.style.opacity = '1';
            poster.style.transform = 'scale(1)';
        }, 200);
        
        // Update active states
        ele.classList.add('active');
        document.getElementsByClassName('dot')[i].style.background = "transparent";
        document.getElementsByClassName('dot')[i].style.boxShadow = "0px 0px 8px rgba(74, 85, 104, 0.6)";
    });
});

// Set initial active state
document.addEventListener('DOMContentLoaded', () => {
    document.getElementsByClassName('card_img')[1].classList.add('active');
    document.getElementsByClassName('dot')[1].style.background = "transparent";
    document.getElementsByClassName('dot')[1].style.boxShadow = "0px 0px 8px rgba(74, 85, 104, 0.6)";
});

// Enhanced form interactions
document.querySelectorAll('input').forEach(input => {
    input.addEventListener('focus', function() {
        this.parentElement.style.borderBottomColor = 'rgba(255, 255, 255, 0.6)';
    });
    
    input.addEventListener('blur', function() {
        this.parentElement.style.borderBottomColor = 'rgba(255, 255, 255, 0.2)';
    });
});

// Purchase button interaction
document.querySelector('.btn').addEventListener('click', function() {
    this.style.transform = 'translateY(-2px) scale(0.98)';
    setTimeout(() => {
        this.style.transform = 'translateY(-2px) scale(1)';
    }, 150);
});

// Subtle card floating animation
let cardElement = document.querySelector('.card');
let isHovering = false;

cardElement.addEventListener('mouseenter', () => {
    isHovering = true;
});

cardElement.addEventListener('mouseleave', () => {
    isHovering = false;
});

// Smooth mouse tracking for subtle tilt effect
cardElement.addEventListener('mousemove', (e) => {
    if (!isHovering) return;
    
    const rect = cardElement.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    
    const rotateX = (y - centerY) / 20;
    const rotateY = (centerX - x) / 20;
    
    cardElement.style.transform = `translateY(-5px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});

cardElement.addEventListener('mouseleave', () => {
    cardElement.style.transform = 'translateY(0) rotateX(0) rotateY(0)';
});

box-shadow: 0 0 10px #00d4ff;
    `;
        
    particle.style.left = Math.random() * window.innerWidth + 'px';
    particle.style.top = window.innerHeight + 'px';
        
    document.body.appendChild(particle);
        
    let position = window.innerHeight;
    const speed = 1 + Math.random() * 2;
        
    function animateParticle() {
        position -= speed;
        particle.style.top = position + 'px';
        particle.style.opacity = position / window.innerHeight;
            
        if (position < -10) {
            document.body.removeChild(particle);
        } else {
            requestAnimationFrame(animateParticle);
        }
    }
        
    animateParticle();
}

// Create particles periodically
setInterval(createFloatingParticle, 2000);

// Add loading animation on page load
window.addEventListener('load', () => {
    document.querySelector('.card').style.opacity = '0';
    document.querySelector('.card').style.transform = 'translateY(50px) scale(0.9)';
        
    setTimeout(() => {
        document.querySelector('.card').style.transition = 'all 0.8s ease-out';
        document.querySelector('.card').style.opacity = '1';
        document.querySelector('.card').style.transform = 'translateY(0px) scale(1)';
    }, 100);
});// Credit card type detection with enhanced visual feedback
let credit_number = document.getElementsByName('credit-number')[0];

credit_number.addEventListener('keyup', () => {
    let number4 = (credit_number.value).slice(0, 5);
    const masterImg = document.getElementById('master');

if (5000 >= number4) {
        masterImg.src = "img/master.png";
        masterImg.style.filter = "drop-shadow(0 0 10px rgba(255, 0, 0, 0.5))";
    } else {
        masterImg.src = "img/visa.png";
        masterImg.style.filter = "drop-shadow(0 0 10px rgba(0, 100, 200, 0.5))";
    }

// Add typing animation effect
    masterImg.style.transform = "scale(1.1)";
    setTimeout(() => {
        masterImg.style.transform = "scale(1)";
    }, 200);
});

// Enhanced product image switching with animations
const img = ["img/air1.png", "img/Airpods.png", "img/air3.png"];

let dotoff = () => {
    Array.from(document.getElementsByClassName('dot')).forEach((ele, i) => {
        ele.style.boxShadow = "unset";
        ele.style.background = "#7b2cbf";
        ele.style.borderColor = "#7b2cbf";
    });
}

let cardoff = () => {
    Array.from(document.getElementsByClassName('card_img')).forEach((ele, i) => {
        ele.style.transform = "translateY(0px) scale(1)";
        ele.style.boxShadow = "unset";
    });
}

Array.from(document.getElementsByClassName('card_img')).forEach((ele, i) => {
    ele.addEventListener('click', () => {
        cardoff();
        dotoff();

// Enhanced image transition
        const poster = document.getElementById('poster');
        poster.style.opacity = '0';
        poster.style.transform = 'scale(0.8) rotate(10deg)';

setTimeout(() => {
            poster.src = img[i];
            poster.style.opacity = '1';
            poster.style.transform = 'scale(1) rotate(0deg)';
        }, 200);

// Enhanced card selection feedback
        document.getElementsByClassName("card_img")[i].style.transform = "translateY(-5px) scale(1.05)";
        document.getElementsByClassName("card_img")[i].style.boxShadow = "0 15px 30px rgba(123, 44, 191, 0.3)";

// Enhanced dot animation
        document.getElementsByClassName('dot')[i].style.background = "transparent";
        document.getElementsByClassName('dot')[i].style.boxShadow = "0 0 15px #00d4ff";
        document.getElementsByClassName('dot')[i].style.borderColor = "#00d4ff";
    });

// Add hover sound effect simulation
    ele.addEventListener('mouseenter', () => {
        ele.style.filter = 'brightness(1.1)';
    });

ele.addEventListener('mouseleave', () => {
        if (!ele.style.transform.includes('scale(1.05)')) {
            ele.style.filter = 'brightness(1)';
        }
    });
});

// Enhanced input focus effects
document.querySelectorAll('.card_bx input').forEach(input => {
    input.addEventListener('focus', () => {
        input.parentElement.style.transform = 'scale(1.02)';
    });

input.addEventListener('blur', () => {
        input.parentElement.style.transform = 'scale(1)';
    });

// Add typing sound effect simulation with visual feedback
    input.addEventListener('input', () => {
        const glow = input.parentElement.querySelector('.input-glow');
        glow.style.boxShadow = '0 0 20px rgba(0, 212, 255, 0.5)';
        setTimeout(() => {
            glow.style.boxShadow = 'none';
        }, 300);
    });
});

// Enhanced purchase button interaction
document.querySelector('.btn').addEventListener('click', () => {
    // Add purchase animation
    const btn = document.querySelector('.btn');
    btn.style.transform = 'scale(0.95)';
    btn.innerHTML = '<i class="fas fa-check"></i><h5>PROCESSING...</h5>';

setTimeout(() => {
        btn.style.transform = 'scale(1)';
        btn.innerHTML = '<i class="fas fa-check-circle"></i><h5>COMPLETED!</h5>';
        btn.style.background = 'linear-gradient(135deg, #00ff7f, #00d4ff)';
    }, 1500);

setTimeout(() => {
        btn.innerHTML = '<i class="fas fa-credit-card"></i><h5>PURCHASE NOW</h5>';
        btn.style.background = '';
    }, 3000);
});

// Add floating particles animation
function createFloatingParticle() {
    const particle = document.createElement('div');
    particle.style.cssText = `
        position: fixed;
        width: 4px;
        height: 4px;
        background: #00d4ff;
        border-radius: 50%;
        pointer-events: none;
        z-index: -1;
        box-shadow: 0 0 10px #00d4ff;
    `;

particle.style.left = Math.random() * window.innerWidth + 'px';
    particle.style.top = window.innerHeight + 'px';

document.body.appendChild(particle);

let position = window.innerHeight;
    const speed = 1 + Math.random() * 2;

function animateParticle() {
        position -= speed;
        particle.style.top = position + 'px';
        particle.style.opacity = position / window.innerHeight;

if (position < -10) {
            document.body.removeChild(particle);
        } else {
            requestAnimationFrame(animateParticle);
        }
    }

animateParticle();
}

// Create particles periodically
setInterval(createFloatingParticle, 2000);

setTimeout(() => {
        document.querySelector('.card').style.transition = 'all 0.8s ease-out';
        document.querySelector('.card').style.opacity = '1';
        document.querySelector('.card').style.transform = 'translateY(0px) scale(1)';
    }, 100);
});

A Code by alejandrokundrah

Recommended

CSS Loading Animation HTML Structure

Loading page

AdminHub Admin Dashboard v2.1

HTML

CSS

JS

Recommended

CSS Loading Animation HTML Structure

Loading page

AdminHub Admin Dashboard v2.1

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS