KPI FAI UMJ: Cara Membuat Flip Card Kren

Your Message:

Bagaimana cara membuat Flip Card secantik ini?

Begini cara membuatnya!.

Pertama buat Code untuk buka dan penutupnya <style> untuk buka dan penutupnya </style> untuk code CSS nya letakkan diantara keduanya, setelah itu letakkan dibawah code </head>.

untuk selanjutnya tergantung kreasi anda.

Previewnya Klik Tombol di bawah ini

Preview Link Pertama Kode HTML nya

Your Message:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Glassmorphism Flip Cards</title>
    <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="flip-card">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <img src="https://picsum.photos/400/600?random=2" alt="Profile">
                    <div class="name-tag">Siti Sarah</div>
                </div>
                <div class="flip-card-back">
                    <h3>Siti Sarah</h3>
                    <p>UI/UX Designer</p>
                    <div class="social-icons">
                        <a href="#" target="_blank"><i class="fab fa-behance"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-dribbble"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>

<div class="flip-card">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <img src="https://picsum.photos/400/600?random=3" alt="Profile">
                    <div class="name-tag">Budi Utomo</div>
                </div>
                <div class="flip-card-back">
                    <h3>Budi Utomo</h3>
                    <p>Video Editor</p>
                    <div class="social-icons">
                        <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
            </div>
        </div>

<div class="flip-card">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <img src="https://picsum.photos/400/600?random=4" alt="Profile">
                    <div class="name-tag">Linda Chen</div>
                </div>
                <div class="flip-card-back">
                    <h3>Linda Chen</h3>
                    <p>Marketing</p>
                    <div class="social-icons">
                        <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                        <a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
                    </div>
                </div>
            </div>
        </div>

<div class="flip-card">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <img src="https://picsum.photos/400/600?random=5" alt="Profile">
                    <div class="name-tag">Kevin Sanjaya</div>
                </div>
                <div class="flip-card-back">
                    <h3>Kevin Sanjaya</h3>
                    <p>App Specialist</p>
                    <div class="social-icons">
                        <a href="#" target="_blank"><i class="fab fa-whatsapp"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Code CSS

Your Message:

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

body {
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    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: 25px;
    width: 90%;
    max-width: 1400px;
    padding: 20px;
    /* Grid 5 Kolom (PC) */
    grid-template-columns: repeat(5, 1fr);
}

/* Responsive Table & HP */
@media (max-width: 1100px) { .container { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .container { grid-template-columns: repeat(1, 1fr); } }

/* Flip Card Logic */
.flip-card {
    height: 380px;
    perspective: 1000px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

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

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    cursor: pointer;
}

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

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Sisi Depan */
.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.name-tag {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: 600;
}

/* Sisi Belakang (Glassmorphism) */
.flip-card-back {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    color: white;
    font-size: 1.4rem;
    transition: 0.3s;
    text-decoration: none;
}

.social-icons a:hover {
    transform: translateY(-5px);
    color: #00d2ff;
}

CSS Tambahan Untuk Media Sosial

Your Message:

/* ... (Gunakan CSS sebelumnya, lalu update bagian ini) ... */

.social-icons {
    display: flex;
    flex-wrap: wrap; /* Agar ikon turun jika layar sempit */
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
    padding: 0 10px;
}

.social-icons a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.3rem;
    transition: all 0.3s ease;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

/* Warna Hover Spesifik Platform */
.social-icons a:hover {
    transform: translateY(-5px) scale(1.1);
    color: #fff;
}

.social-icons a[title="WhatsApp"]:hover { background: #25D366; }
.social-icons a[title="Instagram"]:hover { background: #E1306C; }
.social-icons a[title="LinkedIn"]:hover { background: #0077B5; }
.social-icons a[title="Facebook"]:hover { background: #1877F2; }
.social-icons a[title="Threads"]:hover { background: #000000; }
.social-icons a[title="Twitter/X"]:hover { background: #1DA1F2; }

/* ... (Sisa CSS Grid & Flip tetap sama) ... */

Code JavaScript

Your Message:

// 1. Inisialisasi Partikel Latar Belakang
particlesJS("particles-js", {
    "particles": {
        "number": { "value": 80 },
        "color": { "value": "#ffffff" },
        "shape": { "type": "circle" },
        "opacity": { "value": 0.3 },
        "size": { "value": 3 },
        "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.2, "width": 1 },
        "move": { "enable": true, "speed": 2 }
    },
    "interactivity": {
        "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" } }
    }
});

// 2. Animasi Kartu & Fitur Klik
document.addEventListener('DOMContentLoaded', () => {
    const cards = document.querySelectorAll('.flip-card');

// Reveal Animation (Satu per satu)
    cards.forEach((card, index) => {
        setTimeout(() => {
            card.classList.add('show');
        }, index * 200);
    });

// Support Klik/Tap untuk Mobile
    cards.forEach(card => {
        card.addEventListener('click', function() {
            this.classList.toggle('active');
        });
    });
});

Code Media Sosial

Your Message:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip Cards - Social Media Complete</title>
    <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">
                    <img src="https://picsum.photos/400/600?random=1" alt="Profile">
                    <div class="name-tag">Nama Lengkap</div>
                </div>
                <div class="flip-card-back">
                    <h3>Nama Lengkap</h3>
                    <p>Professional Title</p>
                    
                    <div class="social-icons">
                        <a href="https://wa.me/62812345678" target="_blank" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                        <a href="https://instagram.com/username" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
                        <a href="https://linkedin.com/in/username" target="_blank" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        <a href="https://facebook.com/username" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="https://threads.net/@username" target="_blank" title="Threads"><i class="fa-brands fa-threads"></i></a>
                        <a href="https://twitter.com/username" target="_blank" title="Twitter/X"><i class="fa-brands fa-x-twitter"></i></a>
                    </div>
                </div>
            </div>
        </div>

</div>

Partner Strategis