Home
Alif Bima Pradana
Class A Profile - Information Systems Study Program

Class A Profile - Information Systems Study Program

Digital Innovation
The Future Starts Here.

This tailwind example is contributed by Alif Bima Pradana, on 10-Mar-2026. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Front page

Landing Page

Author Alif Bima Pradana

Fork Fullscreen

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Kelas A - Sistem Informasi</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    
    <script src="https://unpkg.com/lucide@latest"></script>

<script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    colors: {
                        primary: '#d90202',
                        'primary-dark': '#b00000',
                        'primary-light': '#ff4d4d',
                        secondary: '#14b8a6', // Teal for blobs
                    },
                    backgroundImage: {
                        'grid-pattern': "linear-gradient(to right, #e5e7eb 1px, transparent 1px), linear-gradient(to bottom, #e5e7eb 1px, transparent 1px)",
                        'grid-pattern-dark': "linear-gradient(to right, #374151 1px, transparent 1px), linear-gradient(to bottom, #374151 1px, transparent 1px)",
                    }
                }
            }
        }
    </script>

/* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .dark .glass {
            background: rgba(17, 24, 39, 0.7);
        }

/* Blob Animation */
        @keyframes blob {
            0% { transform: translate(0px, 0px) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
            100% { transform: translate(0px, 0px) scale(1); }
        }
        .animate-blob {
            animation: blob 7s infinite;
        }
        .animation-delay-2000 {
            animation-delay: 2s;
        }
        .animation-delay-4000 {
            animation-delay: 4s;
        }

/* Scroll Animation Classes */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

/* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #d1d5db;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }
        .dark ::-webkit-scrollbar-thumb {
            background: #4b5563;
        }
    </style>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-800 dark:text-gray-100 transition-colors duration-300">

<nav class="fixed w-full z-50 glass border-b border-gray-200 dark:border-gray-800 transition-colors duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                
                <div class="flex-shrink-0 flex items-center gap-2 cursor-pointer" onclick="window.scrollTo(0,0)">
                    <div class="w-10 h-10 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center text-white shadow-lg">
                        <span class="font-bold text-lg">A</span>
                    </div>
                    <div>
                        <h1 class="font-bold text-xl tracking-tight leading-none">Sistem Informasi</h1>
                        <p class="text-xs text-gray-500 dark:text-gray-400 font-medium tracking-wide">KELAS A - ANGKATAN 2024</p>
                    </div>
                </div>

<div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-8">
                        <a href="#home" class="hover:text-primary font-medium transition-colors">Home</a>
                        <a href="#profil" class="hover:text-primary font-medium transition-colors">Profil</a>
                        <a href="#struktur" class="hover:text-primary font-medium transition-colors">Struktur</a>
                        <a href="#activities" class="hover:text-primary font-medium transition-colors">Kegiatan</a>
                        <a href="#prestasi" class="hover:text-primary font-medium transition-colors">Prestasi</a>
                        <a href="#jadwal" class="hover:text-primary font-medium transition-colors">Jadwal</a>
                        <a href="#gallery" class="hover:text-primary font-medium transition-colors">Galeri</a>
                    </div>
                </div>

<div class="flex items-center gap-4">
                    
                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none">
                        <i data-lucide="moon" class="w-5 h-5 block dark:hidden text-gray-600"></i>
                        <i data-lucide="sun" class="w-5 h-5 hidden dark:block text-yellow-400"></i>
                    </button>
                    
                    
                    <div class="-mr-2 flex md:hidden">
                        <button id="mobile-menu-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-200 hover:text-primary focus:outline-none">
                            <i data-lucide="menu" class="w-6 h-6"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

<div id="mobile-menu" class="fixed inset-y-0 right-0 w-64 bg-white dark:bg-gray-900 shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out md:hidden flex flex-col z-50 h-screen">
            <div class="p-6 flex justify-between items-center border-b border-gray-100 dark:border-gray-800">
                <span class="font-bold text-lg">Menu</span>
                <button id="close-menu-btn" class="text-gray-500 hover:text-primary">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>
            <div class="px-4 py-6 space-y-2 flex flex-col h-full overflow-y-auto">
                <a href="#home" class="mobile-link flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium hover:bg-red-50 dark:hover:bg-gray-800 hover:text-primary transition-colors">
                    <i data-lucide="home" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                    Home
                </a>
                <a href="#profil" class="mobile-link flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium hover:bg-red-50 dark:hover:bg-gray-800 hover:text-primary transition-colors">
                    <i data-lucide="user" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                    Profil Kelas
                </a>
                <a href="#struktur" class="mobile-link flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium hover:bg-red-50 dark:hover:bg-gray-800 hover:text-primary transition-colors">
                    <i data-lucide="users" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                    Struktur
                </a>
                <a href="#activities" class="mobile-link flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium hover:bg-red-50 dark:hover:bg-gray-800 hover:text-primary transition-colors">
                    <i data-lucide="activity" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                    Kegiatan
                </a>
                <a href="#prestasi" class="mobile-link flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium hover:bg-red-50 dark:hover:bg-gray-800 hover:text-primary transition-colors">
                    <i data-lucide="trophy" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                    Prestasi
                </a>
                <a href="#jadwal" class="mobile-link flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium hover:bg-red-50 dark:hover:bg-gray-800 hover:text-primary transition-colors">
                    <i data-lucide="calendar-clock" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                    Jadwal
                </a>
                <a href="#gallery" class="mobile-link flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium hover:bg-red-50 dark:hover:bg-gray-800 hover:text-primary transition-colors">
                    <i data-lucide="image" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                    Galeri
                </a>
                <a href="#contact" class="mobile-link flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium hover:bg-red-50 dark:hover:bg-gray-800 hover:text-primary transition-colors">
                    <i data-lucide="phone" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                    Kontak
                </a>
            </div>
        </div>
    </nav>

<section id="home" class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
        
        <div class="absolute inset-0 bg-[size:40px_40px] bg-grid-pattern dark:bg-grid-pattern-dark opacity-[0.4] dark:opacity-[0.1] -z-10"></div>
        
        
        <div class="absolute top-0 -left-4 w-72 h-72 bg-primary rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob dark:mix-blend-normal dark:opacity-30"></div>
        <div class="absolute top-0 -right-4 w-72 h-72 bg-secondary rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000 dark:mix-blend-normal dark:opacity-20"></div>
        <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000 dark:hidden"></div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                
                <div class="reveal">
                    <div class="inline-flex items-center px-3 py-1 rounded-full bg-red-100 dark:bg-red-900/30 text-primary text-sm font-semibold mb-6 border border-red-200 dark:border-red-900/50">
                        <span class="flex h-2 w-2 rounded-full bg-primary mr-2"></span>
                        Mahasiswa Sistem Informasi Terbaik
                    </div>
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white mb-6 leading-tight">
                        Inovasi Digital <br>
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-orange-600">Masa Depan</span>
                        Dimulai Di Sini.
                    </h1>
                    <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-lg leading-relaxed">
                        Selamat datang di website resmi Kelas A. Kami adalah komunitas pembelajar yang aktif, kolaboratif, dan siap menjadi pemimpin di era teknologi informasi.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#profil" class="px-8 py-4 bg-primary hover:bg-primary-dark text-white rounded-xl font-semibold transition-all shadow-lg hover:shadow-red-500/30 flex items-center justify-center gap-2">
                            <span>Kenali Kami</span>
                            <i data-lucide="arrow-right" class="w-5 h-5"></i>
                        </a>
                        <a href="#contact" class="px-8 py-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white rounded-xl font-semibold hover:bg-gray-50 dark:hover:bg-gray-700 transition-all flex items-center justify-center gap-2">
                            <span>Hubungi Kami</span>
                        </a>
                    </div>
                    
                    
                    <div class="mt-12 grid grid-cols-3 gap-6 border-t border-gray-200 dark:border-gray-800 pt-8">
                        <div>
                            <p class="text-3xl font-bold text-gray-900 dark:text-white">40+</p>
                            <p class="text-sm text-gray-500">Mahasiswa</p>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-gray-900 dark:text-white">15+</p>
                            <p class="text-sm text-gray-500">Proyek</p>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-gray-900 dark:text-white">100%</p>
                            <p class="text-sm text-gray-500">Solidaritas</p>
                        </div>
                    </div>
                </div>

<div class="relative reveal delay-200 hidden lg:block">
                    <div class="relative w-full aspect-square max-w-lg mx-auto">
                        
                        <div class="absolute inset-0 bg-gradient-to-tr from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 rounded-[2rem] shadow-2xl border border-gray-200 dark:border-gray-700 p-8 flex flex-col justify-between overflow-hidden">
                            
                            <div class="absolute top-6 right-6 opacity-10">
                                <i data-lucide="code-2" class="w-32 h-32"></i>
                            </div>
                            
                            
                            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full p-8">
                                <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Students Collaboration" class="w-full h-full object-cover rounded-2xl shadow-lg brightness-90">
                            </div>

<div class="absolute bottom-8 left-8 bg-white dark:bg-gray-800 p-4 rounded-xl shadow-xl flex items-center gap-3 animate-bounce" style="animation-duration: 3s;">
                                <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-lg">
                                    <i data-lucide="database" class="w-6 h-6 text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500">Skill</p>
                                    <p class="font-bold text-sm">Database & coding</p>
                                </div>
                            </div>

<div class="absolute top-12 -left-4 bg-white dark:bg-gray-800 p-4 rounded-xl shadow-xl flex items-center gap-3 animate-bounce" style="animation-duration: 4s;">
                                <div class="bg-green-100 dark:bg-green-900 p-2 rounded-lg">
                                    <i data-lucide="bar-chart-3" class="w-6 h-6 text-green-600 dark:text-green-400"></i>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500">Focus</p>
                                    <p class="font-bold text-sm">Business Analyst</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="profil" class="py-20 bg-gray-50 dark:bg-gray-900/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16 reveal">
                <h2 class="text-base font-semibold text-primary tracking-wide uppercase">Tentang Kami</h2>
                <p class="mt-2 text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
                    Profil Kelas A
                </p>
                <p class="mt-4 text-lg text-gray-500 dark:text-gray-400">
                    Kami bukan sekadar teman sekelas, kami adalah partner dalam berkembang, berinovasi, dan meraih masa depan di dunia teknologi informasi.
                </p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                
                <div class="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-shadow border border-gray-100 dark:border-gray-700 reveal">
                    <div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center text-primary mb-6">
                        <i data-lucide="users" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Kompak & Solid</h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Menjunjung tinggi kebersamaan dalam setiap kegiatan akademik maupun non-akademik. Satu sakit, semua merasakan.
                    </p>
                </div>

<div class="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-shadow border border-gray-100 dark:border-gray-700 reveal delay-100">
                    <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center text-blue-600 dark:text-blue-400 mb-6">
                        <i data-lucide="cpu" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Tech Enthusiast</h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Selalu haus akan pengetahuan teknologi terbaru. Coding, UI/UX, dan Data adalah makanan sehari-hari kami.
                    </p>
                </div>

<div class="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-shadow border border-gray-100 dark:border-gray-700 reveal delay-200">
                    <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center text-yellow-600 dark:text-yellow-400 mb-6">
                        <i data-lucide="award" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Berprestasi</h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Aktif mengikuti kompetisi dan mencetak prestasi membanggakan untuk program studi dan universitas.
                    </p>
                </div>
            </div>
        </div>
    </section>

<section id="struktur" class="py-20 relative overflow-hidden">
        
        <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-gray-100 dark:bg-gray-800 rounded-full opacity-50 -z-10"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-end mb-12 reveal">
                <div>
                    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">Struktur Kepengurusan</h2>
                    <p class="mt-2 text-gray-500 dark:text-gray-400">Orang-orang hebat di balik layar Kelas A.</p>
                </div>
                <button class="hidden md:flex items-center gap-2 text-primary font-semibold hover:gap-3 transition-all">
                    Lihat Selengkapnya <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </button>
            </div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                
                <div class="group relative bg-white dark:bg-gray-800 rounded-xl shadow-lg border-t-4 border-primary overflow-hidden reveal">
                    <div class="aspect-w-3 aspect-h-4 h-64 bg-gray-200 dark:bg-gray-700">
                        
                        <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Ketua Kelas" class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-4 text-center">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Budi Santoso</h3>
                        <p class="text-sm text-primary font-medium mb-3">Ketua Kelas</p>
                        <div class="flex justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
                            <a href="#" class="text-gray-400 hover:text-primary"><i data-lucide="instagram" class="w-4 h-4"></i></a>
                            <a href="#" class="text-gray-400 hover:text-primary"><i data-lucide="linkedin" class="w-4 h-4"></i></a>
                        </div>
                    </div>
                </div>

<div class="group relative bg-white dark:bg-gray-800 rounded-xl shadow-lg border-t-4 border-secondary overflow-hidden reveal delay-100">
                    <div class="aspect-w-3 aspect-h-4 h-64 bg-gray-200 dark:bg-gray-700">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Wakil Ketua" class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-4 text-center">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Siti Aminah</h3>
                        <p class="text-sm text-secondary font-medium mb-3">Wakil Ketua</p>
                        <div class="flex justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
                            <a href="#" class="text-gray-400 hover:text-secondary"><i data-lucide="instagram" class="w-4 h-4"></i></a>
                            <a href="#" class="text-gray-400 hover:text-secondary"><i data-lucide="linkedin" class="w-4 h-4"></i></a>
                        </div>
                    </div>
                </div>

<div class="group relative bg-white dark:bg-gray-800 rounded-xl shadow-lg border-t-4 border-yellow-500 overflow-hidden reveal delay-200">
                    <div class="aspect-w-3 aspect-h-4 h-64 bg-gray-200 dark:bg-gray-700">
                        <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Sekretaris" class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-4 text-center">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Rina Putri</h3>
                        <p class="text-sm text-yellow-500 font-medium mb-3">Sekretaris</p>
                        <div class="flex justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
                            <a href="#" class="text-gray-400 hover:text-yellow-500"><i data-lucide="instagram" class="w-4 h-4"></i></a>
                            <a href="#" class="text-gray-400 hover:text-yellow-500"><i data-lucide="linkedin" class="w-4 h-4"></i></a>
                        </div>
                    </div>
                </div>

<div class="group relative bg-white dark:bg-gray-800 rounded-xl shadow-lg border-t-4 border-blue-500 overflow-hidden reveal delay-300">
                    <div class="aspect-w-3 aspect-h-4 h-64 bg-gray-200 dark:bg-gray-700">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Bendahara" class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500">
                    </div>
                    <div class="p-4 text-center">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Ahmad Fauzi</h3>
                        <p class="text-sm text-blue-500 font-medium mb-3">Bendahara</p>
                        <div class="flex justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity">
                            <a href="#" class="text-gray-400 hover:text-blue-500"><i data-lucide="instagram" class="w-4 h-4"></i></a>
                            <a href="#" class="text-gray-400 hover:text-blue-500"><i data-lucide="linkedin" class="w-4 h-4"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="activities" class="py-20 bg-gray-50 dark:bg-gray-900/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal">
                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">Kegiatan Kami</h2>
                <p class="mt-2 text-gray-500 dark:text-gray-400">Keseimbangan antara akademik dan organisasi</p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                
                <div class="group relative h-80 rounded-2xl overflow-hidden cursor-pointer reveal">
                    <img src="https://images.unsplash.com/photo-1531482615713-2afd69097998?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Seminar" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex flex-col justify-end p-6">
                        <div class="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                            <p class="text-xs font-bold text-primary mb-1">AKADEMIK</p>
                            <h3 class="text-xl font-bold text-white mb-2">Seminar Teknologi</h3>
                            <p class="text-sm text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Sharing session mengenai tren AI terbaru.</p>
                        </div>
                    </div>
                </div>

<div class="group relative h-80 rounded-2xl overflow-hidden cursor-pointer reveal delay-100">
                    <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Makrab" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex flex-col justify-end p-6">
                        <div class="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                            <p class="text-xs font-bold text-secondary mb-1">NON-AKADEMIK</p>
                            <h3 class="text-xl font-bold text-white mb-2">Makrab Angkatan</h3>
                            <p class="text-sm text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Malam keakraban mempererat tali persaudaraan.</p>
                        </div>
                    </div>
                </div>

<div class="group relative h-80 rounded-2xl overflow-hidden cursor-pointer reveal delay-200">
                    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Project" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex flex-col justify-end p-6">
                        <div class="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                            <p class="text-xs font-bold text-yellow-500 mb-1">KOLABORASI</p>
                            <h3 class="text-xl font-bold text-white mb-2">Project Web</h3>
                            <p class="text-sm text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Membangun sistem informasi desa bersama.</p>
                        </div>
                    </div>
                </div>

<div class="group relative h-80 rounded-2xl overflow-hidden cursor-pointer reveal delay-300">
                    <img src="https://images.unsplash.com/photo-1544531586-fde5298cdd40?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Olahraga" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex flex-col justify-end p-6">
                        <div class="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                            <p class="text-xs font-bold text-blue-500 mb-1">OLAHRAGA</p>
                            <h3 class="text-xl font-bold text-white mb-2">Futsal Rutin</h3>
                            <p class="text-sm text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Sparring mingguan antar kelas.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="prestasi" class="py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
                
                <div class="lg:col-span-1 reveal">
                    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">Wall of Fame <br> <span class="text-primary">Kelas A</span></h2>
                    <p class="text-gray-600 dark:text-gray-400 mb-6">
                        Bukti nyata dedikasi kami dalam mengasah skill dan kompetensi di bidang Sistem Informasi.
                    </p>
                    <div class="bg-gradient-to-r from-primary to-red-700 p-6 rounded-2xl text-white shadow-lg">
                        <div class="flex items-center gap-4 mb-4">
                            <i data-lucide="trophy" class="w-10 h-10 text-yellow-300"></i>
                            <div>
                                <h4 class="text-2xl font-bold">Total 12+</h4>
                                <p class="text-sm opacity-90">Kejuaraan Tahun Ini</p>
                            </div>
                        </div>
                        <p class="text-sm opacity-80 italic">"Usaha tidak akan pernah mengkhianati hasil."</p>
                    </div>
                </div>

<div class="lg:col-span-2 space-y-4">
                    
                    <div class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 flex items-start gap-4 hover:border-primary transition-colors reveal delay-100">
                        <div class="flex-shrink-0 w-10 h-10 bg-yellow-100 dark:bg-yellow-900/30 rounded-full flex items-center justify-center text-yellow-600">1</div>
                        <div>
                            <h4 class="font-bold text-gray-900 dark:text-white text-lg">Juara 1 Hackathon Nasional 2024</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Tim: CodeWarriors (Budi, Siti, Ahmad)</p>
                        </div>
                    </div>
                    
                    <div class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 flex items-start gap-4 hover:border-primary transition-colors reveal delay-200">
                        <div class="flex-shrink-0 w-10 h-10 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center text-gray-600">2</div>
                        <div>
                            <h4 class="font-bold text-gray-900 dark:text-white text-lg">Juara 2 UI/UX Design Competition</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Penyelenggara: Universitas Gadjah Mada</p>
                        </div>
                    </div>
                    
                    <div class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 flex items-start gap-4 hover:border-primary transition-colors reveal delay-300">
                        <div class="flex-shrink-0 w-10 h-10 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center text-orange-600">3</div>
                        <div>
                            <h4 class="font-bold text-gray-900 dark:text-white text-lg">Best Paper - Seminar Nasional TI</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Kategori: Artificial Intelligence Implementation</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="jadwal" class="py-20 bg-gray-50 dark:bg-gray-900/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12 reveal">
                <h2 class="text-base font-semibold text-primary tracking-wide uppercase">Akademik</h2>
                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mt-2">Jadwal Perkuliahan</h2>
                <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden reveal">
                    <div class="bg-primary/10 dark:bg-primary/20 p-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
                        <h3 class="font-bold text-lg text-primary">Senin</h3>
                        <i data-lucide="calendar" class="w-5 h-5 text-primary"></i>
                    </div>
                    <div class="p-4 space-y-4">
                        <div class="pb-3 border-b border-gray-100 dark:border-gray-700 last:border-0 last:pb-0">
                            <span class="inline-block px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-bold rounded mb-2">07:30 - 10:00</span>
                            <h4 class="font-bold text-gray-800 dark:text-gray-200">Algoritma & Pemrograman</h4>
                            <div class="flex items-center gap-2 mt-1 text-sm text-gray-500">
                                <i data-lucide="map-pin" class="w-3 h-3"></i> R. Lab Komputer 1
                            </div>
                        </div>
                        <div class="pb-3 border-b border-gray-100 dark:border-gray-700 last:border-0 last:pb-0">
                            <span class="inline-block px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-bold rounded mb-2">13:00 - 15:30</span>
                            <h4 class="font-bold text-gray-800 dark:text-gray-200">Matematika Diskrit</h4>
                            <div class="flex items-center gap-2 mt-1 text-sm text-gray-500">
                                <i data-lucide="map-pin" class="w-3 h-3"></i> R. Teori 304
                            </div>
                        </div>
                    </div>
                </div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden reveal delay-100">
                    <div class="bg-secondary/10 dark:bg-secondary/20 p-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
                        <h3 class="font-bold text-lg text-secondary">Selasa</h3>
                        <i data-lucide="calendar" class="w-5 h-5 text-secondary"></i>
                    </div>
                    <div class="p-4 space-y-4">
                        <div class="pb-3 border-b border-gray-100 dark:border-gray-700 last:border-0 last:pb-0">
                            <span class="inline-block px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 text-xs font-bold rounded mb-2">09:30 - 12:00</span>
                            <h4 class="font-bold text-gray-800 dark:text-gray-200">Basis Data Dasar</h4>
                            <div class="flex items-center gap-2 mt-1 text-sm text-gray-500">
                                <i data-lucide="map-pin" class="w-3 h-3"></i> R. Lab Basis Data
                            </div>
                        </div>
                    </div>
                </div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden reveal delay-150">
                    <div class="bg-orange-100 dark:bg-orange-900/20 p-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
                        <h3 class="font-bold text-lg text-orange-600 dark:text-orange-400">Rabu</h3>
                        <i data-lucide="calendar" class="w-5 h-5 text-orange-600 dark:text-orange-400"></i>
                    </div>
                    <div class="p-4 space-y-4">
                        <div class="pb-3 border-b border-gray-100 dark:border-gray-700 last:border-0 last:pb-0">
                            <span class="inline-block px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-bold rounded mb-2">07:30 - 09:10</span>
                            <h4 class="font-bold text-gray-800 dark:text-gray-200">Bahasa Inggris</h4>
                            <div class="flex items-center gap-2 mt-1 text-sm text-gray-500">
                                <i data-lucide="map-pin" class="w-3 h-3"></i> R. Bahasa 1
                            </div>
                        </div>
                        <div class="pb-3 border-b border-gray-100 dark:border-gray-700 last:border-0 last:pb-0">
                            <span class="inline-block px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs font-bold rounded mb-2">10:00 - 12:30</span>
                            <h4 class="font-bold text-gray-800 dark:text-gray-200">Sistem Operasi</h4>
                            <div class="flex items-center gap-2 mt-1 text-sm text-gray-500">
                                <i data-lucide="map-pin" class="w-3 h-3"></i> R. Lab Jaringan
                            </div>
                        </div>
                    </div>
                </div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden reveal delay-200">
                    <div class="bg-blue-100 dark:bg-blue-900/20 p-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
                        <h3 class="font-bold text-lg text-blue-600 dark:text-blue-400">Kamis</h3>
                        <i data-lucide="calendar" class="w-5 h-5 text-blue-600 dark:text-blue-400"></i>
                    </div>
                    <div class="p-4 space-y-4">
                        <div class="pb-3 border-b border-gray-100 dark:border-gray-700 last:border-0 last:pb-0">
                            <span class="inline-block px-2 py-1 bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-400 text-xs font-bold rounded mb-2">13:00 - 15:30</span>
                            <h4 class="font-bold text-gray-800 dark:text-gray-200">Pengantar Manajemen</h4>
                            <div class="flex items-center gap-2 mt-1 text-sm text-gray-500">
                                <i data-lucide="map-pin" class="w-3 h-3"></i> R. Teori 305
                            </div>
                        </div>
                    </div>
                </div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden reveal delay-250">
                    <div class="bg-gray-100 dark:bg-gray-700 p-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center">
                        <h3 class="font-bold text-lg text-gray-600 dark:text-gray-300">Jumat</h3>
                        <i data-lucide="calendar" class="w-5 h-5 text-gray-600 dark:text-gray-300"></i>
                    </div>
                    <div class="p-4 flex items-center justify-center h-full min-h-[120px]">
                        <p class="text-gray-500 italic">Tidak ada jadwal kuliah (Libur/Kegiatan Mandiri)</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="gallery" class="py-20 bg-white dark:bg-gray-950">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12 reveal">
                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">Galeri Momen</h2>
                <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
            </div>

<section class="py-20 border-t border-gray-100 dark:border-gray-800">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal">
            <i data-lucide="quote" class="w-12 h-12 text-primary/30 mx-auto mb-6 fill-current"></i>
            <h3 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6">
                "Kelas A bukan hanya sekadar tempat belajar, tapi rumah kedua. Solidaritasnya luar biasa, skill individunya di atas rata-rata. Bangga menjadi bagian dari keluarga ini."
            </h3>
            <div class="flex items-center justify-center gap-4">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Alumni" class="w-12 h-12 rounded-full ring-2 ring-primary">
                <div class="text-left">
                    <p class="font-bold text-gray-900 dark:text-white">Rizky Ramadhan</p>
                    <p class="text-sm text-gray-500">Alumni Angkatan 2020</p>
                </div>
            </div>
        </div>
    </section>

<footer id="contact" class="bg-gray-900 text-white pt-20 pb-10 border-t border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
                
                <div>
                    <div class="flex items-center gap-2 mb-6">
                        <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center font-bold">A</div>
                        <h2 class="text-xl font-bold">SI Kelas A</h2>
                    </div>
                    <p class="text-gray-400 text-sm leading-relaxed mb-6">
                        Membangun generasi emas teknologi informasi yang berkarakter, inovatif, dan berdaya saing global.
                    </p>
                    <div class="flex gap-4">
                        <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary transition-colors"><i data-lucide="instagram" class="w-4 h-4"></i></a>
                        <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary transition-colors"><i data-lucide="twitter" class="w-4 h-4"></i></a>
                        <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary transition-colors"><i data-lucide="linkedin" class="w-4 h-4"></i></a>
                    </div>
                </div>

<div>
                    <h3 class="text-lg font-bold mb-6">Tautan Cepat</h3>
                    <ul class="space-y-3 text-gray-400 text-sm">
                        <li><a href="#home" class="hover:text-primary transition-colors">Home</a></li>
                        <li><a href="#profil" class="hover:text-primary transition-colors">Profil</a></li>
                        <li><a href="#struktur" class="hover:text-primary transition-colors">Struktur Organisasi</a></li>
                        <li><a href="#jadwal" class="hover:text-primary transition-colors">Jadwal Kuliah</a></li>
                        <li><a href="#gallery" class="hover:text-primary transition-colors">Galeri</a></li>
                    </ul>
                </div>

<div>
                    <h3 class="text-lg font-bold mb-6">Hubungi Kami</h3>
                    <ul class="space-y-4 text-gray-400 text-sm">
                        <li class="flex items-start gap-3">
                            <i data-lucide="map-pin" class="w-5 h-5 text-primary flex-shrink-0"></i>
                            <span>Gedung Fakultas Ilmu Komputer, Lantai 3, Ruang 304.</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i data-lucide="mail" class="w-5 h-5 text-primary flex-shrink-0"></i>
                            <span>kelas_a_si@univ.ac.id</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i data-lucide="phone" class="w-5 h-5 text-primary flex-shrink-0"></i>
                            <span>+62 812 3456 7890</span>
                        </li>
                    </ul>
                </div>

<div>
                    <h3 class="text-lg font-bold mb-6">Tetap Terhubung</h3>
                    <p class="text-gray-400 text-sm mb-4">Dapatkan update terbaru dari kegiatan kami.</p>
                    <div class="flex">
                        <input type="email" placeholder="Email Anda" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-l-lg focus:outline-none focus:border-primary text-sm text-white">
                        <button class="bg-primary px-4 py-2 rounded-r-lg hover:bg-red-700 transition-colors">
                            <i data-lucide="send" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
            </div>

<div class="border-t border-gray-800 pt-8 text-center">
                <p class="text-gray-500 text-sm">
                    &copy; 2024 Kelas A Sistem Informasi. All rights reserved. Created with ❤️ & ☕.
                </p>
            </div>
        </div>
    </footer>

<script>
        // Initialize Lucide Icons
        lucide.createIcons();

// Dark Mode Logic
        const themeToggleBtn = document.getElementById('theme-toggle');
        const html = document.documentElement;
        
        // Check local storage or system preference
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
        } else {
            html.classList.remove('dark');
        }

themeToggleBtn.addEventListener('click', () => {
            html.classList.toggle('dark');
            if (html.classList.contains('dark')) {
                localStorage.theme = 'dark';
            } else {
                localStorage.theme = 'light';
            }
        });

// Mobile Menu Logic
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const closeMenuBtn = document.getElementById('close-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        const mobileLinks = document.querySelectorAll('.mobile-link');

mobileMenuBtn.addEventListener('click', toggleMenu);
        closeMenuBtn.addEventListener('click', toggleMenu);
        
        // Close menu when a link is clicked
        mobileLinks.forEach(link => {
            link.addEventListener('click', toggleMenu);
        });

// Scroll Animation (Fade Up)
        const observerOptions = {
            threshold: 0.1,
            rootMargin: "0px 0px -50px 0px"
        };

document.querySelectorAll('.reveal').forEach(el => {
            observer.observe(el);
        });
    </script>
</body>
</html>

Related Examples

Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

1 year ago

2.1k
landing page

Author:
Akram Khan

8 months ago

747
template hero

Author:
Raul antonio de la cruz hernandez

2 months ago

506
AutoFill Pro - Smart Form Automation
AutoFill Pro - Smart Form Automation

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

43
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 months ago

289
hero template

Author:
Raul antonio de la cruz hernandez

2 months ago

88
Template hero

Author:
Raul antonio de la cruz hernandez

2 months ago

369
Standard Landing Boilerplate

Author:
Hasan AlDoy (McDoy)

1 year ago

1.3k
landi page template

Author:
Raul antonio de la cruz hernandez

2 months ago

215
login!!!!
html , css

Author:
Hacker Development

9 months ago

1.2k
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

1 year ago

1.2k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

22.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components