KPI FAI UMJ: Cara membuat Flip Model Card KTP

Ada versi terbaru untuk bentuk Flip Card dan mirip KTP gitu, pastinya terlihat bagus, nah, codenya bisa didapatkan di bawah ini dan free di copy paste untuk menghiasi blogspot atau website anda, bukan hanya tiga flip card, kurang atau lebih dari itu bisa dibuat, nah codenya dibawah ini.

Code HTML

Your Message:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perfect ID Card Flip</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
        <div class="flip-card">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="shimmer"></div>
                    <div class="card-content">
                        <div class="profile-section">
                            <div class="img-wrapper">
                                <img src="https://picsum.photos/200/200?random=1" alt="Avatar">
                            </div>
                        </div>
                        <div class="info-section">
                            <div class="status-badge">Available</div>
                            <h2 class="name-display">Ahmad Dani</h2>
                            <p class="role-display">Fullstack Developer</p>
                        </div>
                    </div>
                    <div class="bottom-bar">Nama Lengkap: Ahmad Dani</div>
                </div>

<div class="flip-card-back">
                    <div class="shimmer"></div>
                    <h3>Connect With Me</h3>
                    <div class="social-grid">
                        <a href="#" target="_blank" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                        <a href="#" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
                        <a href="#" target="_blank" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" target="_blank" title="Threads"><i class="fa-brands fa-threads"></i></a>
                        <a href="#" target="_blank" title="Twitter"><i class="fa-brands fa-x-twitter"></i></a>
                    </div>
                </div>
            </div>
        </div>
        
        </div>

Code CSS

Your Message:

:root {
    --glass: rgba(255, 255, 255, 0.1);
    --border: rgba(255, 255, 255, 0.2);
    --accent: #00d2ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }

body {
    background: #121212;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

#particles-js { position: fixed; width: 100%; height: 100%; z-index: 1; }

.container {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    /* Menyesuaikan grid untuk kartu bentuk horizontal */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.flip-card {
    height: 220px; /* Bentuk Lanskap Sesuai Gambar */
    perspective: 1000px;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.6s ease-out;
}

.flip-card.show { opacity: 1; transform: translateY(0); }

.flip-card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner, .flip-card.active .flip-card-inner { transform: rotateY(180deg); }

/* --- SISI DEPAN (Biru Transparan) --- */
.flip-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 24px;
    border: 1px solid rgba(0, 210, 255, 0.3); /* Border biru halus */
    
    /* Background Biru Transparan dengan Blur */
    background: rgba(0, 123, 255, 0.15); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- SISI BELAKANG (Hitam Transparan) --- */
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Background Hitam Transparan dengan Blur */
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
}

/* Penyesuaian Teks agar kontras di background hitam */
.flip-card-back h3 {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Penyesuaian Kilauan (Shimmer) agar lebih terlihat di warna biru */
.shimmer {
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    animation: shine 5s infinite;
}

/* --- SISI DEPAN (LAYOUT HORIZONTAL) --- */
.card-content {
    display: flex;
    padding: 25px;
    height: 80%;
    align-items: center;
}

.profile-section { flex: 1; display: flex; justify-content: center; }

.img-wrapper {
    width: 100px; height: 100px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, var(--accent), #92fe9d);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

.img-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid #121212; }

.info-section { flex: 2; padding-left: 20px; }

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(0, 210, 255, 0.15);
    color: var(--accent);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.name-display { color: white; font-size: 1.4rem; margin-bottom: 4px; }
.role-display { color: #aaa; font-size: 0.85rem; }

.bottom-bar {
    position: absolute; bottom: 0; width: 100%;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 25px;
    color: white; font-size: 0.75rem;
    border-top: 1px solid var(--border);
}

/* --- SISI BELAKANG (GRID SOSMED) --- */
.flip-card-back {
    transform: rotateY(180deg);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    padding: 20px;
}

.flip-card-back h3 { color: white; margin-bottom: 20px; font-size: 1rem; opacity: 0.8; }

.social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.social-grid a {
    width: 45px; height: 45px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.2rem; transition: 0.3s;
}

.social-grid a:hover {
    background: var(--accent);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
}

/* SHIMMER EFFECT */
.shimmer {
    position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-20deg); animation: shine 5s infinite;
}
@keyframes shine { 0% { left: -150%; } 20% { left: 150%; } 100% { left: 150%; } }

Code JavaScript

Your Message:

Partner Strategis