Our Mission University
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 - University</title> </head> <body class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 min-h-screen"> <!-- Scholarly Pattern Overlay --> <div class="fixed inset-0 scholarly-pattern 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 Academic Elements --> <div class="absolute top-16 left-8 w-16 h-16 text-blue-200 academic-float opacity-30"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"/> </svg> </div> <div class="absolute top-32 right-12 w-14 h-14 text-purple-200 book-flip opacity-25"> <svg fill="currentColor" viewBox="0 0 24 24"> <path d="M19,2L14,6.5V17.5L19,13V2M6.5,5C4.55,5 2.45,5.4 1,6.5V21.16C1,21.41 1.25,21.66 1.5,21.66C1.6,21.66 1.65,21.59 1.75,21.59C3.1,20.94 5.05,20.5 6.5,20.5C8.45,20.5 10.55,20.9 12,22C13.35,21.15 15.8,20.5 17.5,20.5C19.15,20.5 20.85,20.81 22.25,21.56C22.35,21.61 22.4,21.66 22.5,21.66C22.75,21.66 23,21.41 23,21.16V6.5C22.4,6.05 21.75,5.75 21,5.5V19C19.9,18.65 18.7,18.5 17.5,18.5C15.8,18.5 13.35,19.15 12,20V6.5C10.55,5.4 8.45,5 6.5,5Z"/> </svg> </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 wisdom-glow"> <svg class="w-full h-full text-blue-600" fill="currentColor" viewBox="0 0 24 24"> <path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"/> </svg> </div> </div> <h2 class="text-6xl md:text-7xl font-bold gradient-text mb-8 serif-font tracking-tight">Our Mission</h2> <div class="w-32 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-600 mx-auto mb-10 rounded-full"></div> <p class="text-2xl text-gray-700 max-w-4xl mx-auto leading-relaxed serif-font italic"> "Empowering minds, fostering innovation, and cultivating leaders who will shape the future through excellence in education, research, and service to humanity." </p> </div> <!-- Main Mission Statement --> <div class="bg-white rounded-3xl shadow-2xl p-10 md:p-16 mb-20 fade-in-up knowledge-pulse parchment-texture"> <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 serif-font leading-tight">Illuminating Paths to Knowledge</h3> <p class="text-xl text-gray-600 mb-8 leading-relaxed"> Since our founding, we have been dedicated to the pursuit of knowledge, the advancement of learning, and the development of critical thinking. Our mission encompasses not just education, but the transformation of lives and the betterment of society through scholarly 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"> <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">Accredited Excellence</span> </div> <div class="flex items-center space-x-4"> <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center"> <svg class="w-7 h-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9m0 9c-5 0-9-4-9-9s4-9 9-9"></path> </svg> </div> <span class="text-gray-700 font-semibold text-lg">Global Research Impact</span> </div> </div> </div> <div class="fade-in-right"> <div class="relative"> <div class="academic-float"> <svg class="w-full h-80 text-blue-500" fill="currentColor" viewBox="0 0 24 24"> <path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z" opacity="0.8"/> <path d="M12,7L7,10L12,13L17,10L12,7Z" opacity="0.6"/> <circle cx="12" cy="12" r="2" opacity="0.9"/> </svg> </div> <div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-purple-400 to-indigo-400 rounded-full blur-3xl opacity-20"></div> </div> </div> </div> </div> <!-- Academic Pillars Grid --> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-20"> <!-- Excellence in Education --> <div class="bg-white rounded-2xl p-8 shadow-xl card-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-academic"> <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 serif-font">Excellence in Education</h4> <p class="text-gray-600 leading-relaxed"> Delivering world-class education through innovative curricula, distinguished faculty, and cutting-edge learning methodologies. </p> </div> <!-- Research Innovation --> <div class="bg-white rounded-2xl p-8 shadow-xl card-hover fade-in-up" style="animation-delay: 0.4s;"> <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center mb-8 icon-academic"> <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 serif-font">Research Innovation</h4> <p class="text-gray-600 leading-relaxed"> Pioneering groundbreaking research that addresses global challenges and advances human knowledge across all disciplines. </p> </div> <!-- Student Success --> <div class="bg-white rounded-2xl p-8 shadow-xl card-hover fade-in-up" style="animation-delay: 0.6s;"> <div class="w-20 h-20 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-8 icon-academic"> <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path> </svg> </div> <h4 class="text-2xl font-bold text-gray-800 mb-4 serif-font">Student Success</h4> <p class="text-gray-600 leading-relaxed"> Nurturing each student's potential through personalized support, mentorship, and comprehensive development programs. </p> </div> <!-- Community Impact --> <div class="bg-white rounded-2xl p-8 shadow-xl card-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-academic"> <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 serif-font">Community Impact</h4> <p class="text-gray-600 leading-relaxed"> Engaging with local and global communities to create positive change through service, outreach, and partnerships. </p> </div> </div> <!-- Statistics Section --> <div class="bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-700 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 serif-font">Academic Excellence by Numbers</h3> <p class="text-xl text-blue-100">Measuring our commitment to educational distinction</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-yellow-300" data-count="45000">0</div> <div class="text-blue-200 text-lg">Students Enrolled</div> </div> <div class="fade-in-up" style="animation-delay: 0.4s;"> <div class="text-5xl md:text-6xl font-bold mb-3 text-green-300" data-count="150">0</div> <div class="text-blue-200 text-lg">Years of Excellence</div> </div> <div class="fade-in-up" style="animation-delay: 0.6s;"> <div class="text-5xl md:text-6xl font-bold mb-3 text-pink-300" data-count="95">0</div> <div class="text-blue-200 text-lg">Graduate Success Rate %</div> </div> <div class="fade-in-up" style="animation-delay: 0.8s;"> <div class="text-5xl md:text-6xl font-bold mb-3 text-orange-300" data-count="200">0</div> <div class="text-blue-200 text-lg">Research Publications</div> </div> </div> </div> <!-- Call to Action --> <div class="text-center fade-in-up"> <div class="bg-gradient-to-r from-slate-800 via-gray-800 to-slate-900 rounded-3xl p-12 shadow-2xl"> <h3 class="text-4xl font-bold text-white mb-6 serif-font">Join Our Academic Community</h3> <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto leading-relaxed"> Discover your potential, pursue your passions, and become part of a legacy of learning that spans generations. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-full text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"> Apply Now </button> <button class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-gray-800 font-bold py-4 px-8 rounded-full text-lg transition-all duration-300"> Schedule a Visit </button> </div> </div> </div> </section> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; } .serif-font { font-family: 'Crimson Text', serif; } .fade-in-up { opacity: 0; transform: translateY(40px); transition: all 1.2s 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.2s 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.2s 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.8); transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scale-in.animate { opacity: 1; transform: scale(1); } .academic-float { animation: academicFloat 6s ease-in-out infinite; } @keyframes academicFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-12px) rotate(1deg); } 66% { transform: translateY(-8px) rotate(-1deg); } } .book-flip { animation: bookFlip 8s ease-in-out infinite; transform-origin: left center; } @keyframes bookFlip { 0%, 90%, 100% { transform: rotateY(0deg); } 45% { transform: rotateY(-15deg); } } .knowledge-pulse { animation: knowledgePulse 4s ease-in-out infinite; } @keyframes knowledgePulse { 0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.2), 0 0 40px rgba(139, 92, 246, 0.1); } 50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.4), 0 0 80px rgba(139, 92, 246, 0.2); } } .gradient-text { background: linear-gradient(135deg, #1e40af, #3730a3, #581c87); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .card-hover { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .icon-academic { transition: all 0.4s ease; } .icon-academic:hover { transform: scale(1.15) rotate(5deg); } .scholarly-pattern { background-image: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.05) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.05) 0%, transparent 50%); } .parchment-texture { background-image: linear-gradient(45deg, rgba(251, 191, 36, 0.03) 25%, transparent 25%), linear-gradient(-45deg, rgba(251, 191, 36, 0.03) 25%, transparent 25%); background-size: 60px 60px; } .wisdom-glow { animation: wisdomGlow 5s ease-in-out infinite; } @keyframes wisdomGlow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.3)); } 50% { filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.5)); } } .typing-animation { overflow: hidden; border-right: 3px solid #3730a3; white-space: nowrap; animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: #3730a3; } }
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'); } }); }, 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 * 400); }); statsObserver.unobserve(entry.target); } }); }, observerOptions); const statsSection = document.querySelector('.bg-gradient-to-r.from-blue-600'); if (statsSection) { statsObserver.observe(statsSection); } // Add subtle parallax effect to floating elements window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const parallaxElements = document.querySelectorAll('.academic-float'); parallaxElements.forEach((element, index) => { const speed = 0.5 + (index * 0.1); element.style.transform = `translateY(${scrolled * speed}px)`; }); }); // Enhanced hover effects for cards document.querySelectorAll('.card-hover').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-8px)'; this.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.15)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = ''; }); });
Output Preview
Desktop
Mobile
Fullscreen