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

Animated Login form

YouMusic-U-personal-Music

A Code by nehapanchal8087

HTML

CSS

JS

Recommended

Animated Login form

YouMusic-U-personal-Music

A Code by nehapanchal8087

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS