Civil Services Coaching Template
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>Elite BPSC Academy - Premier Civil Services Coaching</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body class="bg-gray-50"> <!-- Navigation --> <nav class="bg-white shadow-lg fixed w-full z-50 fade-in"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-20"> <div class="flex items-center"> <div class="flex items-center space-x-3"> <div class="w-12 h-12 bg-blue-900 rounded-lg flex items-center justify-center"> <span class="text-white font-bold text-xl">E</span> </div> <div> <div class="text-2xl font-bold text-blue-900">Elite BPSC Academy</div> <div class="text-xs text-gray-600">Excellence in Civil Services</div> </div> </div> </div> <div class="hidden lg:block"> <div class="ml-10 flex items-center space-x-8"> <a href="#home" class="text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium transition-colors">Home</a> <a href="#courses" class="text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium transition-colors">Courses</a> <a href="#faculty" class="text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium transition-colors">Faculty</a> <a href="#results" class="text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium transition-colors">Results</a> <a href="#about" class="text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium transition-colors">About</a> <a href="#contact" class="text-gray-700 hover:text-blue-900 px-3 py-2 text-sm font-medium transition-colors">Contact</a> <button class="bg-blue-900 text-white px-6 py-3 rounded-lg hover:bg-blue-800 btn-professional font-medium"> Enroll Now </button> </div> </div> <div class="lg:hidden"> <button class="text-gray-700 hover:text-blue-900"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> </div> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="relative min-h-screen flex items-center pt-20"> <div class="absolute inset-0"> <img src="https://images.unsplash.com/photo-1607013407627-6ee814329547?q=80&w=1564&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Students studying" class="w-full h-full object-cover"> <div class="overlay-dark absolute inset-0"></div> </div> <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-white"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <h1 class="text-4xl md:text-6xl font-bold mb-6 text-shadow"> Master Your BPSC Dreams With Excellence </h1> <p class="text-xl mb-8 text-gray-200 leading-relaxed"> Join Bihar's most trusted BPSC coaching institute with proven track record of success. Expert faculty, comprehensive study material, and personalized guidance for your civil services journey. </p> <div class="flex flex-col sm:flex-row gap-4"> <button class="bg-yellow-500 text-gray-900 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-yellow-400 btn-professional"> Start Your Journey </button> <button class="border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-white hover:text-gray-900 btn-professional"> Download Brochure </button> </div> <div class="mt-12 grid grid-cols-3 gap-6 text-center"> <div> <div class="text-3xl font-bold text-yellow-400">15+</div> <div class="text-sm text-gray-300">Years Experience</div> </div> <div> <div class="text-3xl font-bold text-yellow-400">2500+</div> <div class="text-sm text-gray-300">Success Stories</div> </div> <div> <div class="text-3xl font-bold text-yellow-400">98%</div> <div class="text-sm text-gray-300">Success Rate</div> </div> </div> </div> <div class="slide-in-right"> <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20"> <h3 class="text-2xl font-semibold mb-6">Quick Admission Form</h3> <form class="space-y-4"> <input type="text" placeholder="Full Name" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"> <input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"> <input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"> <select class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-yellow-400"> <option value="">Select Course</option> <option value="prelims">BPSC Prelims</option> <option value="mains">BPSC Mains</option> <option value="complete">Complete Course</option> </select> <button type="button" class="w-full bg-yellow-500 text-gray-900 py-3 rounded-lg font-semibold hover:bg-yellow-400 btn-professional"> Get Free Counseling </button> </form> </div> </div> </div> </div> </section> <!-- Courses Section --> <section id="courses" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 slide-up"> <h2 class="text-4xl font-bold text-gray-900 mb-4">Our Comprehensive Courses</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Structured programs designed by experts to ensure your success in BPSC examinations </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100 card-hover scale-in"> <div class="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-6"> <svg class="w-8 h-8 text-blue-900" fill="currentColor" viewBox="0 0 20 20"> <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> </div> <h3 class="text-2xl font-semibold mb-4 text-center">BPSC Prelims</h3> <p class="text-gray-600 mb-6 text-center">Complete preparation for BPSC Preliminary examination with current affairs and mock tests.</p> <ul class="space-y-3 mb-8"> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Comprehensive Study Material </li> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Daily Current Affairs </li> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Weekly Mock Tests </li> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Personal Mentorship </li> </ul> <div class="text-center"> <div class="text-3xl font-bold text-blue-900 mb-2">₹25,000</div> <div class="text-gray-500 mb-4">6 Months Program</div> <button class="w-full bg-blue-900 text-white py-3 rounded-lg hover:bg-blue-800 btn-professional"> Enroll Now </button> </div> </div> <div class="bg-white rounded-2xl shadow-xl p-8 border-2 border-yellow-400 card-hover scale-in relative" style="animation-delay: 0.2s;"> <div class="absolute -top-4 left-1/2 transform -translate-x-1/2"> <span class="bg-yellow-400 text-gray-900 px-4 py-1 rounded-full text-sm font-semibold">Most Popular</span> </div> <div class="w-16 h-16 bg-yellow-100 rounded-xl flex items-center justify-center mx-auto mb-6"> <svg class="w-8 h-8 text-yellow-600" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/> </svg> </div> <h3 class="text-2xl font-semibold mb-4 text-center">Complete BPSC</h3> <p class="text-gray-600 mb-6 text-center">End-to-end preparation covering Prelims, Mains, and Interview with guaranteed support.</p> <ul class="space-y-3 mb-8"> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Prelims + Mains + Interview </li> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Answer Writing Practice </li> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Mock Interviews </li> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> 24/7 Doubt Clearing </li> </ul> <div class="text-center"> <div class="text-3xl font-bold text-yellow-600 mb-2">₹45,000</div> <div class="text-gray-500 mb-4">12 Months Program</div> <button class="w-full bg-yellow-500 text-gray-900 py-3 rounded-lg hover:bg-yellow-400 btn-professional font-semibold"> Enroll Now </button> </div> </div> <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100 card-hover scale-in" style="animation-delay: 0.4s;"> <div class="w-16 h-16 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-6"> <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/> </svg> </div> <h3 class="text-2xl font-semibold mb-4 text-center">BPSC Mains</h3> <p class="text-gray-600 mb-6 text-center">Specialized coaching for BPSC Mains examination with answer writing techniques.</p> <ul class="space-y-3 mb-8"> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Subject-wise Coverage </li> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Answer Writing Practice </li> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Individual Feedback </li> <li class="flex items-center text-sm"> <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Test Series </li> </ul> <div class="text-center"> <div class="text-3xl font-bold text-green-600 mb-2">₹30,000</div> <div class="text-gray-500 mb-4">8 Months Program</div> <button class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 btn-professional"> Enroll Now </button> </div> </div> </div> </div> </section> <!-- Faculty Section --> <section id="faculty" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 slide-up"> <h2 class="text-4xl font-bold text-gray-900 mb-4">Expert Faculty Team</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Learn from experienced educators and former civil servants who understand the examination pattern </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white rounded-2xl shadow-lg p-8 text-center card-hover scale-in"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Dr. Rajesh Kumar" class="w-32 h-32 rounded-full mx-auto mb-6 object-cover"> <h3 class="text-2xl font-semibold mb-2">Dr. Rajesh Kumar</h3> <p class="text-blue-600 font-medium mb-4">Director & Founder</p> <p class="text-gray-600 mb-4">Former IAS Officer with 20+ years of experience in civil services and education.</p> <div class="flex justify-center space-x-2"> <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Public Administration</span> <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">General Studies</span> </div> </div> <div class="bg-white rounded-2xl shadow-lg p-8 text-center card-hover scale-in" style="animation-delay: 0.2s;"> <img src="https://images.unsplash.com/photo-1580894732444-8ecded7900cd?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Prof. Priya Sharma" class="w-32 h-32 rounded-full mx-auto mb-6 object-cover"> <h3 class="text-2xl font-semibold mb-2">Prof. Priya Sharma</h3> <p class="text-blue-600 font-medium mb-4">Senior Faculty</p> <p class="text-gray-600 mb-4">PhD in History, specializing in Ancient and Medieval Indian History with 15+ years teaching experience.</p> <div class="flex justify-center space-x-2"> <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">History</span> <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Culture</span> </div> </div> <div class="bg-white rounded-2xl shadow-lg p-8 text-center card-hover scale-in" style="animation-delay: 0.4s;"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Mr. Amit Singh" class="w-32 h-32 rounded-full mx-auto mb-6 object-cover"> <h3 class="text-2xl font-semibold mb-2">Mr. Amit Singh</h3> <p class="text-blue-600 font-medium mb-4">Economics Faculty</p> <p class="text-gray-600 mb-4">MA Economics from JNU, expert in Indian Economy and Economic Survey analysis.</p> <div class="flex justify-center space-x-2"> <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Economics</span> <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Current Affairs</span> </div> </div> </div> </div> </section> <!-- Results Section --> <section id="results" class="py-20 professional-gradient text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 slide-up"> <h2 class="text-4xl font-bold mb-4">Our Success Stories</h2> <p class="text-xl text-gray-200 max-w-3xl mx-auto"> Proud achievements of our students in BPSC examinations </p> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center mb-16"> <div class="scale-in"> <div class="text-4xl md:text-5xl font-bold mb-2 text-yellow-400">2500+</div> <div class="text-lg text-gray-200">Selections</div> </div> <div class="scale-in" style="animation-delay: 0.1s;"> <div class="text-4xl md:text-5xl font-bold mb-2 text-yellow-400">98%</div> <div class="text-lg text-gray-200">Success Rate</div> </div> <div class="scale-in" style="animation-delay: 0.2s;"> <div class="text-4xl md:text-5xl font-bold mb-2 text-yellow-400">150+</div> <div class="text-lg text-gray-200">Top 100 Ranks</div> </div> <div class="scale-in" style="animation-delay: 0.3s;"> <div class="text-4xl md:text-5xl font-bold mb-2 text-yellow-400">15+</div> <div class="text-lg text-gray-200">Years Experience</div> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Rahul Verma" class="w-16 h-16 rounded-full mr-4 object-cover"> <div> <h4 class="text-xl font-semibold">Rahul Verma</h4> <p class="text-yellow-400">BPSC Rank 3, 2023</p> </div> </div> <p class="text-gray-200">"Elite BPSC Academy's comprehensive approach and expert guidance helped me achieve my dream rank. The faculty's dedication is unmatched."</p> </div> <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1494790108755-2616c9c0e8e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Priya Singh" class="w-16 h-16 rounded-full mr-4 object-cover"> <div> <h4 class="text-xl font-semibold">Priya Singh</h4> <p class="text-yellow-400">BPSC Rank 7, 2023</p> </div> </div> <p class="text-gray-200">"The answer writing practice and mock interviews were game-changers. I'm grateful for the personalized attention I received."</p> </div> <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Amit Kumar" class="w-16 h-16 rounded-full mr-4 object-cover"> <div> <h4 class="text-xl font-semibold">Amit Kumar</h4> <p class="text-yellow-400">BPSC Rank 12, 2023</p> </div> </div> <p class="text-gray-200">"The study material and current affairs coverage were excellent. The faculty made complex topics easy to understand."</p> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <h2 class="text-4xl font-bold text-gray-900 mb-6">About Elite BPSC Academy</h2> <p class="text-lg text-gray-600 mb-6"> Established in 2008, Elite BPSC Academy has been Bihar's premier destination for civil services preparation. With over 15 years of excellence, we have guided thousands of aspirants to achieve their dreams of serving the nation. </p> <p class="text-lg text-gray-600 mb-8"> Our methodology combines traditional teaching with modern technology, ensuring comprehensive preparation that covers all aspects of the BPSC examination - from conceptual clarity to answer writing skills. </p> <div class="grid grid-cols-2 gap-6 mb-8"> <div class="text-center p-4 bg-blue-50 rounded-lg"> <div class="text-3xl font-bold text-blue-900 mb-2">15+</div> <div class="text-sm text-gray-600">Years of Excellence</div> </div> <div class="text-center p-4 bg-green-50 rounded-lg"> <div class="text-3xl font-bold text-green-600 mb-2">50+</div> <div class="text-sm text-gray-600">Expert Faculty</div> </div> <div class="text-center p-4 bg-yellow-50 rounded-lg"> <div class="text-3xl font-bold text-yellow-600 mb-2">10,000+</div> <div class="text-sm text-gray-600">Alumni Network</div> </div> <div class="text-center p-4 bg-purple-50 rounded-lg"> <div class="text-3xl font-bold text-purple-600 mb-2">5</div> <div class="text-sm text-gray-600">Study Centers</div> </div> </div> <button class="bg-blue-900 text-white px-8 py-4 rounded-lg hover:bg-blue-800 btn-professional"> Learn More About Us </button> </div> <div class="slide-in-right"> <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Students in classroom" class="rounded-2xl shadow-xl"> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 slide-up"> <h2 class="text-4xl font-bold text-gray-900 mb-4">Contact Us</h2> <p class="text-xl text-gray-600">Get in touch for admissions and course information</p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div class="slide-in-left"> <div class="bg-white rounded-2xl shadow-lg p-8"> <h3 class="text-2xl font-semibold mb-6">Get In Touch</h3> <div class="space-y-6"> <div class="flex items-start"> <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"> <svg class="w-6 h-6 text-blue-900" fill="currentColor" viewBox="0 0 20 20"> <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/> </svg> </div> <div> <div class="font-semibold text-gray-900">Phone</div> <div class="text-gray-600">+91 9876543210</div> <div class="text-gray-600">+91 9876543211</div> </div> </div> <div class="flex items-start"> <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"> <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20"> <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/> <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/> </svg> </div> <div> <div class="font-semibold text-gray-900">Email</div> <div class="text-gray-600">info@elitebpsc.com</div> <div class="text-gray-600">admissions@elitebpsc.com</div> </div> </div> <div class="flex items-start"> <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"> <svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/> </svg> </div> <div> <div class="font-semibold text-gray-900">Address</div> <div class="text-gray-600">123 Gandhi Maidan Road,<br>Patna, Bihar 800001</div> </div> </div> <div class="flex items-start"> <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"> <svg class="w-6 h-6 text-yellow-600" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/> </svg> </div> <div> <div class="font-semibold text-gray-900">Office Hours</div> <div class="text-gray-600">Mon - Sat: 9:00 AM - 7:00 PM</div> <div class="text-gray-600">Sunday: 10:00 AM - 5:00 PM</div> </div> </div> </div> </div> </div> <div class="slide-in-right"> <div class="bg-white rounded-2xl shadow-lg p-8"> <h3 class="text-2xl font-semibold mb-6">Send us a Message</h3> <p class="text-sm text-gray-500 mb-6">Demo form - messages won't be sent</p> <form class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">First Name</label> <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Last Name</label> <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Email</label> <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label> <input type="tel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Course Interest</label> <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <option value="">Select Course</option> <option value="prelims">BPSC Prelims</option> <option value="mains">BPSC Mains</option> <option value="complete">Complete BPSC</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Message</label> <textarea rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea> </div> <button type="button" class="w-full bg-blue-900 text-white py-3 rounded-lg hover:bg-blue-800 btn-professional"> Send Message </button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <div class="flex items-center space-x-3 mb-4"> <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center"> <span class="text-white font-bold">E</span> </div> <div> <div class="text-xl font-bold">Elite BPSC Academy</div> <div class="text-xs text-gray-400">Excellence in Civil Services</div> </div> </div> <p class="text-gray-400 text-sm">Empowering aspirants to achieve their civil services dreams with expert guidance and comprehensive preparation.</p> </div> <div> <h3 class="text-lg font-semibold mb-4">Courses</h3> <ul class="space-y-2 text-gray-400 text-sm"> <li><a href="#" class="hover:text-white transition-colors">BPSC Prelims</a></li> <li><a href="#" class="hover:text-white transition-colors">BPSC Mains</a></li> <li><a href="#" class="hover:text-white transition-colors">Complete BPSC</a></li> <li><a href="#" class="hover:text-white transition-colors">Test Series</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4">Quick Links</h3> <ul class="space-y-2 text-gray-400 text-sm"> <li><a href="#" class="hover:text-white transition-colors">About Us</a></li> <li><a href="#" class="hover:text-white transition-colors">Faculty</a></li> <li><a href="#" class="hover:text-white transition-colors">Results</a></li> <li><a href="#" class="hover:text-white transition-colors">Blog</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4">Contact Info</h3> <ul class="space-y-2 text-gray-400 text-sm"> <li>? +91 9876543210</li> <li>✉️ info@elitebpsc.com</li> <li>? Gandhi Maidan Road, Patna</li> <li>? Mon-Sat: 9AM-7PM</li> </ul> </div> </div> <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm"> <p>© 2024 Elite BPSC Academy. All rights reserved. | Privacy Policy | Terms of Service</p> </div> </div> </footer> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96e82bd1f5d285a5',t:'MTc1NTA4NzY3NS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
* { font-family: 'Poppins', sans-serif; } .fade-in { animation: fadeIn 1.2s ease-in-out; } .slide-up { animation: slideUp 1s ease-out; } .slide-in-left { animation: slideInLeft 1s ease-out; } .slide-in-right { animation: slideInRight 1s ease-out; } .scale-in { animation: scaleIn 0.8s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideInLeft { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .professional-gradient { background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #1e40af 100%); } .card-hover { transition: all 0.4s ease; } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0,0,0,0.15); } .btn-professional { transition: all 0.3s ease; position: relative; overflow: hidden; } .btn-professional:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); } .text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .overlay-dark { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4)); }
JavaScript
// Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Add scroll effect to navigation window.addEventListener('scroll', function() { const nav = document.querySelector('nav'); if (window.scrollY > 100) { nav.classList.add('shadow-xl'); } else { nav.classList.remove('shadow-xl'); } }); // Animate elements on scroll const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0) translateX(0) scale(1)'; } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.slide-up, .slide-in-left, .slide-in-right, .scale-in').forEach(el => { el.style.opacity = '0'; if (el.classList.contains('slide-up')) { el.style.transform = 'translateY(40px)'; } else if (el.classList.contains('slide-in-left')) { el.style.transform = 'translateX(-40px)'; } else if (el.classList.contains('slide-in-right')) { el.style.transform = 'translateX(40px)'; } else if (el.classList.contains('scale-in')) { el.style.transform = 'scale(0.9)'; } observer.observe(el); }); // Add click functionality to buttons document.querySelectorAll('button').forEach(button => { button.addEventListener('click', function() { if (this.textContent.includes('Enroll') || this.textContent.includes('Start Your Journey')) { alert('Thank you for your interest! Our admissions team will contact you shortly.'); } else if (this.textContent.includes('Download Brochure')) { alert('Brochure download would start in a real application!'); } else if (this.textContent.includes('Send Message') || this.textContent.includes('Get Free Counseling')) { alert('Thank you for your inquiry! This is a demo form. Our team would contact you in a real application.'); } }); }); // Add typing effect to hero title const heroTitle = document.querySelector('h1'); if (heroTitle) { const text = heroTitle.innerHTML; heroTitle.innerHTML = ''; let i = 0; const typeWriter = () => { if (i < text.length) { heroTitle.innerHTML += text.charAt(i); i++; setTimeout(typeWriter, 50); } }; setTimeout(typeWriter, 1000); }
Output Preview
Desktop
Mobile
Fullscreen