Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DVGMNHS Anti-Corruption Campaign</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@700;900&display=swap'); | |
| .hero-bg { | |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://static.photos/black/1200x630/10'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .slogan-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(5px); | |
| border-left: 5px solid #dc2626; | |
| } | |
| .activity-card { | |
| transition: all 0.3s ease; | |
| } | |
| .activity-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Hero Section --> | |
| <div class="hero-bg text-white py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-6xl mx-auto text-center" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 font-['Montserrat']">DR. VICENTE F. GUSTILO MEMORIAL NATIONAL HIGH SCHOOL</h1> | |
| <div class="w-32 h-1 bg-red-600 mx-auto my-6"></div> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-8 text-red-500 font-['Bebas+Neue']">WEEK-LONG ANTI-CORRUPTION CAMPAIGN</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16"> | |
| <!-- Broken Chains Icon --> | |
| <div class="flex flex-col items-center" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="bg-black p-6 rounded-full mb-4"> | |
| <i data-feather="link" class="w-12 h-12 text-red-500"></i> | |
| </div> | |
| <p class="text-xl">Breaking the Chains of Corruption</p> | |
| </div> | |
| <!-- Fist Icon --> | |
| <div class="flex flex-col items-center" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="bg-black p-6 rounded-full mb-4"> | |
| <i data-feather="activity" class="w-12 h-12 text-red-500"></i> | |
| </div> | |
| <p class="text-xl">United Against Corruption</p> | |
| </div> | |
| <!-- Marching People --> | |
| <div class="flex flex-col items-center" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="bg-black p-6 rounded-full mb-4"> | |
| <i data-feather="users" class="w-12 h-12 text-red-500"></i> | |
| </div> | |
| <p class="text-xl">Marching for Justice</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slogans Section --> | |
| <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-black">WISER, STRONGER SLOGANS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="slogan-card p-6 rounded-lg shadow-md" data-aos="fade-right"> | |
| <p class="text-xl font-bold text-red-600 mb-2">"A Nation That Tolerates Corruption Buries Its Own Future."</p> | |
| <p class="text-gray-700">Corruption is not just stealing from the present, but robbing our children of their future.</p> | |
| </div> | |
| <div class="slogan-card p-6 rounded-lg shadow-md" data-aos="fade-left"> | |
| <p class="text-xl font-bold text-red-600 mb-2">"When Justice Sleeps, Corruption Awakens – We Must Stay Awake."</p> | |
| <p class="text-gray-700">Vigilance is our weapon against the creeping darkness of corruption.</p> | |
| </div> | |
| <div class="slogan-card p-6 rounded-lg shadow-md" data-aos="fade-right"> | |
| <p class="text-xl font-bold text-red-600 mb-2">"The Price of Corruption Is Paid by the Poor."</p> | |
| <p class="text-gray-700">Every stolen peso is a meal taken from a hungry child's plate.</p> | |
| </div> | |
| <div class="slogan-card p-6 rounded-lg shadow-md" data-aos="fade-left"> | |
| <p class="text-xl font-bold text-red-600 mb-2">"To End Corruption, We Must Begin with Courage."</p> | |
| <p class="text-gray-700">The fight starts with each of us saying NO to dishonesty.</p> | |
| </div> | |
| <div class="slogan-card p-6 rounded-lg shadow-md col-span-1 md:col-span-2" data-aos="zoom-in"> | |
| <p class="text-2xl font-bold text-red-600 mb-2 text-center">"Integrity Builds Nations; Corruption Destroys Them."</p> | |
| <p class="text-gray-700 text-center">Our collective honesty is the foundation of a strong Philippines.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activities Section --> | |
| <div class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-100"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-black">CAMPAIGN ACTIVITIES</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Black Friday --> | |
| <div class="activity-card bg-white rounded-lg overflow-hidden shadow-lg" data-aos="flip-left"> | |
| <div class="bg-black h-48 flex items-center justify-center"> | |
| <i data-feather="moon" class="w-16 h-16 text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Friday (Sept. 19)</h3> | |
| <p class="text-lg font-semibold text-red-600 mb-2">Black Friday</p> | |
| <p class="text-gray-700">Wear BLACK 🖤 as a sign of protest against corruption in all its forms.</p> | |
| </div> | |
| </div> | |
| <!-- Bulletin Board --> | |
| <div class="activity-card bg-white rounded-lg overflow-hidden shadow-lg" data-aos="flip-up"> | |
| <div class="bg-red-600 h-48 flex items-center justify-center"> | |
| <i data-feather="clipboard" class="w-16 h-16 text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Monday & Tuesday (Sept. 22–23)</h3> | |
| <p class="text-lg font-semibold text-red-600 mb-2">Anti-Corruption Bulletin Board</p> | |
| <p class="text-gray-700">Posting and updating of information about corruption and its effects on society.</p> | |
| </div> | |
| </div> | |
| <!-- March Against Corruption --> | |
| <div class="activity-card bg-white rounded-lg overflow-hidden shadow-lg" data-aos="flip-right"> | |
| <div class="bg-black h-48 flex items-center justify-center relative"> | |
| <i data-feather="flag" class="w-16 h-16 text-white"></i> | |
| <div class="absolute bottom-4 right-4"> | |
| <i data-feather="users" class="w-8 h-8 text-white"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Wednesday (Sept. 24)</h3> | |
| <p class="text-lg font-semibold text-red-600 mb-2">March Against Corruption 🚩</p> | |
| <p class="text-gray-700">Rally and prayer gathering attended by the School Principal, teachers, and students. United we stand against corruption!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call to Action --> | |
| <div class="py-16 px-4 sm:px-6 lg:px-8 bg-red-600 text-white"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-6" data-aos="fade-up">JOIN THE MOVEMENT</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Corruption thrives in silence. Break the cycle by speaking up and standing firm for integrity. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200"> | |
| <button class="bg-black text-white px-8 py-3 rounded-lg font-bold hover:bg-gray-900 transition duration-300"> | |
| <i data-feather="user-plus" class="inline mr-2"></i> Join VARH Club | |
| </button> | |
| <button class="bg-white text-red-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition duration-300"> | |
| <i data-feather="share-2" class="inline mr-2"></i> Share This Campaign | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-black text-white py-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center"> | |
| <p class="text-lg">Published by:</p> | |
| <h3 class="text-2xl font-bold text-red-500 mt-2">Vicentinian Adolescent Reproductive Health (VARH) Club</h3> | |
| <div class="flex justify-center space-x-4 mt-6"> | |
| <a href="#" class="hover:text-red-500 transition duration-300"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="hover:text-red-500 transition duration-300"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="hover:text-red-500 transition duration-300"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| </div> | |
| <p class="mt-6 text-gray-400">© 2023 DVGMNHS. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |