Google
Edit File: index.html
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SMA Negeri 2 Pematang Siantar | Cerdas, Berkarakter & Kompetitif</title> <meta name="title" content="SMA Negeri 2 Pematang Siantar | Cerdas, Berkarakter & Kompetitif"> <meta name="description" content="Situs Resmi SMA Negeri 2 Pematang Siantar (SMANDU). Sekolah unggulan di Sumatera Utara dengan Akreditasi A. Mencetak generasi berprestasi sejak 1954."> <meta name="keywords" content="SMA Negeri 2 Pematang Siantar, SMANDU Siantar, SMA 2 Siantar, NPSN 10211704, Sekolah Menengah Atas Sumatera Utara"> <meta name="author" content="SMA Negeri 2 Pematang Siantar"> <meta name="robots" content="index, follow"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <style> :root { --primary: #1e3a8a; --secondary: #3b82f6; --accent: #f59e0b; } body { font-family: 'Inter', sans-serif; overflow-x: hidden; } .font-serif { font-family: 'Playfair Display', serif; } html { scroll-behavior: smooth; } .glass-nav { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.1); } /* Mobile Menu Animation */ #mobile-menu { transition: all 0.3s ease-in-out; max-height: 0; overflow: hidden; opacity: 0; } #mobile-menu.active { max-height: 400px; opacity: 1; padding-bottom: 1.5rem; } .stat-card { transition: transform 0.3s ease; border-left: 4px solid var(--primary); } .stat-card:hover { transform: translateY(-5px); } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } @media (max-width: 640px) { h1 { font-size: 2.5rem !important; line-height: 1.2 !important; } .hero-text { font-size: 1rem !important; } } </style> </head> <body class="bg-slate-50 text-slate-900"> <nav class="fixed top-0 w-full z-50 glass-nav"> <div class="container"> <div class="flex justify-between items-center h-20"> <div class="flex items-center gap-2"> <div class="w-10 h-10 bg-blue-900 rounded flex items-center justify-center text-white font-bold text-xl">S2</div> <div class="leading-tight"> <span class="block font-bold text-blue-900 uppercase text-sm md:text-base">SMAN 2</span> <span class="block text-[10px] md:text-xs text-slate-500 tracking-widest uppercase italic">Pematang Siantar</span> </div> </div> <div class="hidden lg:flex gap-8 items-center text-sm font-semibold uppercase tracking-wider"> <a href="#visi" class="hover:text-blue-700 transition">Visi</a> <a href="#statistik" class="hover:text-blue-700 transition">Statistik</a> <a href="#akreditasi" class="hover:text-blue-700 transition">Akreditasi</a> <a href="#kontak" class="bg-blue-900 text-white px-5 py-2 rounded-full hover:bg-blue-700 transition">Kontak</a> </div> <button onclick="toggleMobileMenu()" class="lg:hidden text-2xl text-blue-900 focus:outline-none"> <i id="menu-icon" class="fa-solid fa-bars-staggered"></i> </button> </div> <div id="mobile-menu" class="lg:hidden"> <div class="flex flex-col gap-4 text-center font-bold uppercase tracking-widest text-sm text-blue-900 py-4 border-t border-slate-100"> <a href="#visi" onclick="toggleMobileMenu()" class="py-2">Visi</a> <a href="#statistik" onclick="toggleMobileMenu()" class="py-2">Statistik</a> <a href="#akreditasi" onclick="toggleMobileMenu()" class="py-2">Akreditasi</a> <a href="#kontak" onclick="toggleMobileMenu()" class="py-2 bg-blue-900 text-white rounded-lg">Kontak</a> </div> </div> </div> </nav> <section class="relative min-h-screen flex items-center pt-20 overflow-hidden bg-white"> <div class="absolute top-0 right-0 w-1/3 h-full bg-blue-50/50 -skew-x-12 transform translate-x-1/2"></div> <div class="container relative z-10 grid lg:grid-cols-2 gap-12 items-center"> <div class="space-y-6"> <div class="inline-flex items-center gap-2 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-bold uppercase tracking-widest"> <span class="relative flex h-2 w-2"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span> </span> NPSN: 10211704 </div> <h1 class="font-serif text-5xl md:text-7xl text-blue-950 leading-tight"> Eksistensi <br><span class="text-blue-600 italic underline decoration-accent/30 underline-offset-8">Sejak 1954.</span> </h1> <p class="hero-text text-lg text-slate-600 max-w-lg leading-relaxed"> Mewujudkan sekolah berkualitas yang kompetitif, berkarakter, dan religius melalui inovasi pendidikan berkelanjutan. </p> <div class="flex flex-wrap gap-4 pt-4"> <a href="#statistik" class="px-8 py-4 bg-blue-900 text-white font-bold rounded shadow-xl hover:bg-blue-800 transition">Data Sekolah</a> <a href="#akreditasi" class="px-8 py-4 border-2 border-blue-900 text-blue-900 font-bold rounded hover:bg-blue-50 transition">Riwayat</a> </div> </div> <div class="relative hidden lg:block"> <div class="w-full aspect-square bg-slate-200 rounded-2xl overflow-hidden shadow-2xl"> <div class="w-full h-full bg-gradient-to-br from-blue-900 to-blue-700 flex items-center justify-center italic text-white/10 text-9xl font-black"> SMANDU </div> </div> <div class="absolute -bottom-6 -left-6 bg-white p-6 rounded-xl shadow-xl border border-slate-100"> <p class="text-4xl font-black text-blue-900">70+</p> <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Tahun Mengabdi</p> </div> </div> </div> </section> <section id="visi" class="py-24 bg-blue-950 text-white relative"> <div class="container text-center max-w-4xl"> <h2 class="font-serif text-4xl mb-12">Visi Sekolah</h2> <div class="relative p-8 md:p-12 border border-white/10 rounded-3xl bg-white/5 backdrop-blur-sm"> <i class="fa-solid fa-quote-left absolute -top-6 left-1/2 -translate-x-1/2 text-5xl text-accent"></i> <p class="text-xl md:text-3xl font-light italic leading-relaxed"> "Terwujudnya Peserta Didik yang Bertaqwa, Berkarakter, Berprestasi, Mandiri, dan Berwawasan Lingkungan." </p> </div> </div> </section> <section id="statistik" class="py-24 bg-white"> <div class="container"> <div class="text-center mb-16"> <p class="text-blue-600 font-bold uppercase tracking-widest text-sm mb-2">Ringkasan Data</p> <h2 class="text-4xl font-bold text-slate-900 font-serif">Statistik Sekolah</h2> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8"> <div class="stat-card p-6 bg-slate-50 rounded-xl"> <p class="text-4xl font-black text-blue-900 mb-1">63</p> <p class="text-xs font-bold text-slate-500 uppercase tracking-wider">Total Guru</p> </div> <div class="stat-card p-6 bg-slate-50 rounded-xl"> <p class="text-4xl font-black text-blue-900 mb-1">1.105</p> <p class="text-xs font-bold text-slate-500 uppercase tracking-wider">Total Siswa</p> <p class="text-[9px] text-slate-400 mt-2 font-semibold">465 L | 640 P</p> </div> <div class="stat-card p-6 bg-slate-50 rounded-xl"> <p class="text-4xl font-black text-blue-900 mb-1">24</p> <p class="text-xs font-bold text-slate-500 uppercase tracking-wider">Ruang Kelas</p> </div> <div class="stat-card p-6 bg-slate-50 rounded-xl"> <p class="text-4xl font-black text-blue-900 mb-1">31</p> <p class="text-xs font-bold text-slate-500 uppercase tracking-wider">Rombel</p> </div> </div> </div> </section> <section id="akreditasi" class="py-24 bg-slate-50"> <div class="container"> <div class="grid lg:grid-cols-2 gap-16 items-center"> <div> <h2 class="text-4xl font-bold font-serif text-blue-950 mb-6">Riwayat Akreditasi</h2> <p class="text-slate-600 mb-8 leading-relaxed"> SMA Negeri 2 Pematang Siantar secara konsisten mempertahankan standar kualitas pendidikan tertinggi. </p> <div class="bg-white p-8 rounded-3xl shadow-xl border-t-8 border-blue-900"> <p class="text-slate-400 font-bold uppercase text-[10px] tracking-widest mb-2 text-center">Peringkat Terakhir</p> <p class="text-8xl font-black text-center text-blue-900 mb-4">A</p> <div class="text-center pt-4 border-t border-slate-100 font-bold text-slate-700">93 Poin</div> </div> </div> <div class="bg-white overflow-x-auto rounded-2xl border border-slate-200"> <table class="w-full text-left min-w-[400px]"> <thead class="bg-blue-900 text-white text-xs uppercase"> <tr> <th class="p-4">Tahun</th> <th class="p-4">Peringkat</th> <th class="p-4">SK Penetapan</th> </tr> </thead> <tbody class="divide-y divide-slate-100 text-sm"> <tr class="hover:bg-blue-50/50"> <td class="p-4 font-bold">2021</td> <td class="p-4 text-green-600 font-black">A</td> <td class="p-4 text-slate-500 font-mono text-[10px]">1347/BAN-SM/SK/2021</td> </tr> <tr class="hover:bg-blue-50/50"> <td class="p-4 font-bold">2016</td> <td class="p-4 text-green-600 font-black">A</td> <td class="p-4 text-slate-500 font-mono text-[10px]">740/BAP-SM/LL/XI/2016</td> </tr> </tbody> </table> </div> </div> </div> </section> <footer id="kontak" class="pt-24 pb-8 bg-blue-950 text-white"> <div class="container"> <div class="grid lg:grid-cols-3 gap-12 mb-16"> <div class="space-y-6"> <h3 class="text-2xl font-bold font-serif">SMANDU SIANTAR</h3> <p class="text-blue-200 text-sm leading-relaxed opacity-80 italic">"Mencetak insan cendekia yang berdaya saing global sejak tahun 1954."</p> </div> <div class="space-y-4 text-sm font-light"> <h3 class="text-sm font-bold uppercase tracking-widest text-accent">Hubungi Kami</h3> <p><i class="fa-solid fa-location-dot text-accent mr-2"></i> Jl. Patuan Anggi No.85a, Pematang Siantar</p> <p><i class="fa-solid fa-phone text-accent mr-2"></i> 0818-0557-4130</p> <p><i class="fa-solid fa-envelope text-accent mr-2"></i> smandups@yahoo.co.id</p> </div> <div class="space-y-4"> <h3 class="text-sm font-bold uppercase tracking-widest text-accent">Legalitas</h3> <p class="text-[10px]">SK Pendirian: 3659/B/III</p> <p class="text-[10px]">SK Operasional: 420/3998DM/2013</p> </div> </div> <div class="border-y border-white/10 py-6 mb-8"> <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-3">Partner Kami</p> <div id="random-links" class="flex flex-wrap gap-x-6 gap-y-2 text-xs font-semibold text-blue-300"> </div> </div> <div class="flex flex-col md:flex-row justify-between items-center gap-4 text-[10px] font-bold uppercase tracking-widest text-slate-400"> <p>© <span id="copyright-year"></span> SMAN 2 Pematang Siantar.</p> <p>NPSN 10211704</p> </div> </div> </footer> <script> function toggleMobileMenu() { const menu = document.getElementById('mobile-menu'); const icon = document.getElementById('menu-icon'); menu.classList.toggle('active'); if (menu.classList.contains('active')) { icon.classList.remove('fa-bars-staggered'); icon.classList.add('fa-xmark'); } else { icon.classList.remove('fa-xmark'); icon.classList.add('fa-bars-staggered'); } } </script> <script src="script.js"></script> </body> </html>