Our Mission Institute
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Our Mission - Institute</title> </head> <body class="bg-gradient-to-br from-slate-50 via-gray-50 to-blue-50 min-h-screen"> <!-- Geometric Pattern Overlay --> <div class="fixed inset-0 geometric-pattern opacity-40 pointer-events-none"></div> <!-- Our Mission Section --> <section class="relative py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> <!-- Floating Professional Elements --> <div class="absolute top-20 left-12 w-16 h-16 text-blue-200 institutional-float opacity-30"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z"/> </svg> </div> <div class="absolute top-40 right-16 w-14 h-14 text-teal-200 data-flow opacity-25"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"/> </svg> </div> <!-- Orbiting Knowledge Elements --> <div class="absolute top-32 left-1/2 transform -translate-x-1/2"> <div class="relative w-24 h-24"> <div class="knowledge-orbit absolute top-0 left-0 w-4 h-4 bg-blue-400 rounded-full opacity-60"></div> <div class="knowledge-orbit absolute top-0 left-0 w-3 h-3 bg-teal-400 rounded-full opacity-70" style="animation-delay: -3s;"></div> <div class="knowledge-orbit absolute top-0 left-0 w-2 h-2 bg-sky-400 rounded-full opacity-80" style="animation-delay: -6s;"></div> </div> </div> <!-- Header --> <div class="text-center mb-20 fade-in-up"> <div class="inline-block mb-8"> <div class="w-28 h-28 mx-auto mb-6 scholarly-glow"> <svg class="w-full h-full text-blue-600" fill="currentColor" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M11,6V12.5L15.75,15.25L16.5,14L12.5,11.75V6H11Z"/> </svg> </div> </div> <h2 class="text-6xl md:text-7xl font-bold gradient-text mb-8 playfair-font tracking-tight">Our Mission</h2> <div class="w-32 h-1 bg-gradient-to-r from-blue-600 via-teal-500 to-sky-600 mx-auto mb-10 rounded-full"></div> <p class="text-2xl text-gray-700 max-w-4xl mx-auto leading-relaxed font-medium"> Advancing knowledge through rigorous research, innovative education, and transformative solutions that address the complex challenges of our time. </p> </div> <!-- Main Mission Statement --> <div class="bg-white rounded-3xl shadow-2xl p-10 md:p-16 mb-20 fade-in-up research-pulse institutional-grid"> <div class="grid lg:grid-cols-2 gap-16 items-center"> <div class="fade-in-left"> <h3 class="text-4xl font-bold text-gray-800 mb-8 playfair-font leading-tight">Pioneering Excellence in Research & Education</h3> <p class="text-xl text-gray-600 mb-8 leading-relaxed"> Our institute stands at the forefront of innovation, bridging the gap between theoretical knowledge and practical application. We are committed to fostering an environment where breakthrough discoveries emerge from collaborative research and interdisciplinary excellence. </p> <div class="space-y-6"> <div class="flex items-center space-x-4"> <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center expertise-badge"> <svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path> </svg> </div> <span class="text-gray-700 font-semibold text-lg">Internationally Recognized Standards</span> </div> <div class="flex items-center space-x-4"> <div class="w-14 h-14 bg-teal-100 rounded-full flex items-center justify-center expertise-badge" style="animation-delay: 1s;"> <svg class="w-7 h-7 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> </div> <span class="text-gray-700 font-semibold text-lg">Cutting-Edge Research Facilities</span> </div> </div> </div> <div class="fade-in-right"> <div class="relative"> <div class="institutional-float"> <svg class="w-full h-80 text-blue-500" fill="currentColor" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z" opacity="0.8"/> <circle cx="12" cy="12" r="3" opacity="0.9"/> <path d="M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" opacity="0.7"/> </svg> </div> <div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-teal-400 to-sky-400 rounded-full blur-3xl opacity-20"></div> </div> </div> </div> </div> <!-- Core Focus Areas Grid --> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-20"> <!-- Research Excellence --> <div class="bg-white rounded-2xl p-8 shadow-xl professional-hover fade-in-up" style="animation-delay: 0.2s;"> <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-8 icon-professional"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path> </svg> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 playfair-font">Research Excellence</h4> <p class="text-gray-600 leading-relaxed"> Conducting groundbreaking research that pushes the boundaries of knowledge and creates innovative solutions for global challenges. </p> </div> <!-- Professional Development --> <div class="bg-white rounded-2xl p-8 shadow-xl professional-hover fade-in-up" style="animation-delay: 0.4s;"> <div class="w-20 h-20 bg-gradient-to-br from-teal-500 to-teal-600 rounded-2xl flex items-center justify-center mb-8 icon-professional"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path> </svg> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 playfair-font">Professional Development</h4> <p class="text-gray-600 leading-relaxed"> Providing comprehensive training and certification programs that advance careers and build expertise across industries. </p> </div> <!-- Innovation Hub --> <div class="bg-white rounded-2xl p-8 shadow-xl professional-hover fade-in-up" style="animation-delay: 0.6s;"> <div class="w-20 h-20 bg-gradient-to-br from-sky-500 to-sky-600 rounded-2xl flex items-center justify-center mb-8 icon-professional"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 playfair-font">Innovation Hub</h4> <p class="text-gray-600 leading-relaxed"> Fostering creativity and entrepreneurship through state-of-the-art facilities and collaborative innovation programs. </p> </div> <!-- Global Impact --> <div class="bg-white rounded-2xl p-8 shadow-xl professional-hover fade-in-up" style="animation-delay: 0.8s;"> <div class="w-20 h-20 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-8 icon-professional"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 playfair-font">Global Impact</h4> <p class="text-gray-600 leading-relaxed"> Creating meaningful change through international partnerships and collaborative projects that address worldwide challenges. </p> </div> </div> <!-- Statistics Section --> <div class="bg-gradient-to-r from-slate-800 via-gray-800 to-slate-900 rounded-3xl p-10 md:p-16 text-white scale-in mb-20"> <div class="text-center mb-12"> <h3 class="text-4xl font-bold mb-4 playfair-font">Excellence in Numbers</h3> <p class="text-xl text-gray-300">Measuring our impact and commitment to advancement</p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 text-center"> <div class="fade-in-up" style="animation-delay: 0.2s;"> <div class="text-5xl md:text-6xl font-bold mb-3 text-blue-400" data-count="15000">0</div> <div class="text-gray-300 text-lg">Professionals Trained</div> <div class="w-full bg-gray-600 rounded-full h-1 mt-4"> <div class="progress-line bg-blue-400 h-1 rounded-full"></div> </div> </div> <div class="fade-in-up" style="animation-delay: 0.4s;"> <div class="text-5xl md:text-6xl font-bold mb-3 text-teal-400" data-count="75">0</div> <div class="text-gray-300 text-lg">Years of Excellence</div> <div class="w-full bg-gray-600 rounded-full h-1 mt-4"> <div class="progress-line bg-teal-400 h-1 rounded-full"></div> </div> </div> <div class="fade-in-up" style="animation-delay: 0.6s;"> <div class="text-5xl md:text-6xl font-bold mb-3 text-sky-400" data-count="500">0</div> <div class="text-gray-300 text-lg">Research Publications</div> <div class="w-full bg-gray-600 rounded-full h-1 mt-4"> <div class="progress-line bg-sky-400 h-1 rounded-full"></div> </div> </div> <div class="fade-in-up" style="animation-delay: 0.8s;"> <div class="text-5xl md:text-6xl font-bold mb-3 text-indigo-400" data-count="50">0</div> <div class="text-gray-300 text-lg">Global Partnerships</div> <div class="w-full bg-gray-600 rounded-full h-1 mt-4"> <div class="progress-line bg-indigo-400 h-1 rounded-full"></div> </div> </div> </div> </div> <!-- Call to Action --> <div class="text-center fade-in-up"> <div class="bg-gradient-to-r from-blue-600 via-teal-600 to-sky-700 rounded-3xl p-12 shadow-2xl"> <h3 class="text-4xl font-bold text-white mb-6 playfair-font">Advance Your Expertise</h3> <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto leading-relaxed"> Join our community of researchers, professionals, and innovators who are shaping the future through knowledge and collaboration. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button class="bg-white text-blue-600 font-bold py-4 px-8 rounded-full text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"> Explore Programs </button> <button class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-blue-600 font-bold py-4 px-8 rounded-full text-lg transition-all duration-300"> Research Opportunities </button> </div> </div> </div> </section> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; } .playfair-font { font-family: 'Playfair Display', serif; } .fade-in-up { opacity: 0; transform: translateY(40px); transition: all 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-up.animate { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-40px); transition: all 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-left.animate { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(40px); transition: all 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-right.animate { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.85); transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scale-in.animate { opacity: 1; transform: scale(1); } .institutional-float { animation: institutionalFloat 8s ease-in-out infinite; } @keyframes institutionalFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-10px) rotate(1deg); } 50% { transform: translateY(-5px) rotate(0deg); } 75% { transform: translateY(-15px) rotate(-1deg); } } .research-pulse { animation: researchPulse 6s ease-in-out infinite; } @keyframes researchPulse { 0%, 100% { box-shadow: 0 0 30px rgba(14, 165, 233, 0.2), 0 0 60px rgba(59, 130, 246, 0.1); transform: scale(1); } 50% { box-shadow: 0 0 50px rgba(14, 165, 233, 0.4), 0 0 100px rgba(59, 130, 246, 0.2); transform: scale(1.02); } } .knowledge-orbit { animation: knowledgeOrbit 12s linear infinite; transform-origin: center; } @keyframes knowledgeOrbit { 0% { transform: rotate(0deg) translateX(50px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); } } .gradient-text { background: linear-gradient(135deg, #0f172a, #1e293b, #334155, #0ea5e9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .professional-hover { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .professional-hover:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12); } .icon-professional { transition: all 0.4s ease; } .icon-professional:hover { transform: scale(1.1) rotate(5deg); } .geometric-pattern { background-image: linear-gradient(30deg, rgba(14, 165, 233, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(14, 165, 233, 0.05) 87.5%, rgba(14, 165, 233, 0.05)), linear-gradient(150deg, rgba(14, 165, 233, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(14, 165, 233, 0.05) 87.5%, rgba(14, 165, 233, 0.05)), linear-gradient(30deg, rgba(14, 165, 233, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(14, 165, 233, 0.05) 87.5%, rgba(14, 165, 233, 0.05)), linear-gradient(150deg, rgba(14, 165, 233, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(14, 165, 233, 0.05) 87.5%, rgba(14, 165, 233, 0.05)); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px; } .scholarly-glow { animation: scholarlyGlow 5s ease-in-out infinite; } @keyframes scholarlyGlow { 0%, 100% { filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.3)); } 50% { filter: drop-shadow(0 0 25px rgba(59, 130, 246, 0.5)); } } .data-flow { animation: dataFlow 4s ease-in-out infinite; } @keyframes dataFlow { 0%, 100% { opacity: 0.6; transform: translateX(0px); } 50% { opacity: 1; transform: translateX(10px); } } .progress-line { width: 0%; transition: width 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .progress-line.animate { width: 100%; } .institutional-grid { background-image: radial-gradient(circle at 1px 1px, rgba(14, 165, 233, 0.15) 1px, transparent 0); background-size: 40px 40px; } .expertise-badge { animation: expertiseBadge 3s ease-in-out infinite; } @keyframes expertiseBadge { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(2deg); } }
JavaScript
// Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -80px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate'); // Animate progress lines const progressLines = entry.target.querySelectorAll('.progress-line'); progressLines.forEach((line, index) => { setTimeout(() => { line.classList.add('animate'); }, index * 200 + 500); }); } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in-up, .fade-in-left, .fade-in-right, .scale-in').forEach(el => { observer.observe(el); }); // Counter animation for statistics function animateCounter(element, target, duration = 3000) { let start = 0; const increment = target / (duration / 16); const timer = setInterval(() => { start += increment; if (start >= target) { element.textContent = target.toLocaleString(); clearInterval(timer); } else { element.textContent = Math.floor(start).toLocaleString(); } }, 16); } // Animate statistics when they come into view const statsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const statElements = entry.target.querySelectorAll('[data-count]'); statElements.forEach((el, index) => { setTimeout(() => { const target = parseInt(el.getAttribute('data-count')); animateCounter(el, target); }, index * 300); }); statsObserver.unobserve(entry.target); } }); }, observerOptions); const statsSection = document.querySelector('.bg-gradient-to-r.from-slate-800'); if (statsSection) { statsObserver.observe(statsSection); } // Enhanced parallax effect for floating elements window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const parallaxElements = document.querySelectorAll('.institutional-float'); parallaxElements.forEach((element, index) => { const speed = 0.3 + (index * 0.1); element.style.transform = `translateY(${scrolled * speed}px)`; }); }); // Professional hover effects document.querySelectorAll('.professional-hover').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-8px)'; this.style.boxShadow = '0 25px 50px rgba(0, 0, 0, 0.15)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = ''; }); }); // Subtle pulse effect on scroll for research elements window.addEventListener('scroll', () => { const researchElements = document.querySelectorAll('.research-pulse'); const scrollPosition = window.pageYOffset; researchElements.forEach(element => { const elementTop = element.offsetTop; const elementHeight = element.offsetHeight; const windowHeight = window.innerHeight; if (scrollPosition > elementTop - windowHeight && scrollPosition < elementTop + elementHeight) { element.style.transform = `scale(${1 + Math.sin(scrollPosition * 0.01) * 0.02})`; } }); });
Output Preview
Desktop
Mobile
Fullscreen