balia / index.html
jotesoft's picture
Did not fixed the sliders. Slider after 1st slide all elements ere hidden and and the content in the slide not showing - Follow Up Deployment
2de6b73 verified
Raw History Blame Contribute Delete
59.7 kB
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>বালিয়াডাঙ্গ ইসলামিয়া মহিলা উচ্চ বিদ্যালয়</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<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>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');
body {
font-family: 'Hind Siliguri', sans-serif;
}
.gradient-text {
background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1, #FF6B6B);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% {transform: translateY(0px);}
50% {transform: translateY(-15px);}
100% {transform: translateY(0px);}
}
</style>
</head>
<body class="bg-gradient-to-b from-purple-50 to-pink-50">
<!-- Animated SVG Slider Section -->
<div id="hero-slider" class="relative overflow-hidden bg-gradient-to-r from-purple-600 via-pink-500 to-blue-500">
<div class="absolute inset-0 z-0 opacity-20">
<div class="absolute top-0 left-0 w-full h-full animate-pulse">
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5"/>
</pattern>
</defs>
<rect width="100" height="100" fill="url(#grid)" />
</svg>
</div>
</div>
<div class="relative z-10 max-w-7xl mx-auto px-4 py-16 sm:px-6 lg:px-8">
<!-- Slider Container -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="text-center text-white">
<div class="flex justify-center mb-8">
<svg class="w-24 h-24 animate-bounce" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22V18M12 18C14.7614 18 17 15.7614 17 13V10C17 7.23858 14.7614 5 12 5C9.23858 5 7 7.23858 7 10V13C7 15.7614 9.23858 18 12 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M19 10C19 6.13401 15.866 3 12 3C8.13401 3 5 6.13401 5 10V13C5 16.866 8.13401 20 12 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 4"/>
<circle cx="12" cy="10" r="1" fill="currentColor" class="animate-pulse"/>
</svg>
</div>
<h1 class="text-4xl md:text-6xl font-bold mb-6">
বালিয়াডাঙ্গ ইসলামিয়া মহিলা উচ্চ বিদ্যালয়
</h1>
<p class="text-xl md:text-2xl mb-8 opacity-90">
জ্ঞানের আলোয় আলোকিত নারীদের প্রজন্ম গড়ে তুলছি
</p>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="text-center text-white">
<div class="flex justify-center mb-8">
<svg class="w-24 h-24 animate-spin" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-dasharray="4 4"/>
<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<circle cx="12" cy="12" r="2" fill="currentColor" class="animate-ping"/>
</svg>
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-6">
আধুনিক শিক্ষা পদ্ধতি
</h2>
<p class="text-xl md:text-2xl mb-8 opacity-90">
প্রযুক্তি ও ইসলামী মূল্যবোধের সমন্বয়
</p>
</div>
</div>
<!-- Slide 3 -->
<div class="swiper-slide">
<div class="text-center text-white">
<div class="flex justify-center mb-8">
<svg class="w-24 h-24 animate-pulse" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z" stroke="currentColor" stroke-width="2"/>
<path d="M7 16C9.20914 16 11 14.2091 11 12C11 9.79086 9.20914 8 7 8C4.79086 8 3 9.79086 3 12C3 14.2091 4.79086 16 7 16Z" stroke="currentColor" stroke-width="2"/>
<path d="M17 24C19.2091 24 21 22.2091 21 20C21 17.7909 19.2091 16 17 16C14.7909 16 13 17.7909 13 20C13 22.2091 14.7909 24 17 24Z" stroke="currentColor" stroke-width="2"/>
<path d="M7 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M17 16V8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<h2 class="text-3xl md:text-5xl font-bold mb-6">
দক্ষ শিক্ষকমণ্ডলী
</h2>
<p class="text-xl md:text-2xl mb-8 opacity-90">
অভিজ্ঞ ও প্রশিক্ষিত শিক্ষকদের তত্ত্বাবধানে
</p>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Navigation Buttons -->
<div class="swiper-button-next text-white"></div>
<div class="swiper-button-prev text-white"></div>
</div>
<!-- CTA Buttons -->
<div class="text-center mt-12">
<div class="flex justify-center space-x-4">
<a href="#about" class="px-8 py-3 bg-white text-purple-600 rounded-full hover:bg-gray-100 transition duration-300 shadow-lg hover:shadow-xl font-medium">
আমাদের সম্পর্কে
</a>
<a href="#contact" class="px-8 py-3 bg-transparent border-2 border-white text-white rounded-full hover:bg-white hover:text-purple-600 transition duration-300 shadow-lg hover:shadow-xl font-medium">
যোগাযোগ করুন
</a>
</div>
</div>
</div>
<!-- Animated Background Elements -->
<div class="absolute top-0 left-0 w-full h-full z-0 pointer-events-none">
<div class="absolute top-10 left-10 animate-bounce">
<svg class="w-12 h-12 text-white opacity-20" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M12 8V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<div class="absolute top-20 right-20 animate-pulse">
<svg class="w-8 h-8 text-white opacity-20" viewBox="0 0 24 24" fill="none">
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2"/>
</svg>
</div>
<div class="absolute bottom-20 left-20 animate-spin">
<svg class="w-10 h-10 text-white opacity-20" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-dasharray="4 4"/>
</svg>
</div>
<div class="absolute bottom-10 right-10 animate-bounce">
<svg class="w-6 h-6 text-white opacity-20" viewBox="0 0 24 24" fill="none">
<path d="M12 22V18M12 18C14.7614 18 17 15.7614 17 13V10C17 7.23858 14.7614 5 12 5C9.23858 5 7 7.23858 7 10V13C7 15.7614 9.23858 18 12 18Z" stroke="currentColor" stroke-width="2"/>
</svg>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-2">
<i data-feather="book-open" class="text-pink-500"></i>
<span class="text-xl font-bold text-gray-800">বালিয়াডাঙ্গ ইসলামিয়া</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="text-pink-600 font-medium">হোম</a>
<a href="#about" class="text-gray-600 hover:text-pink-600 transition">আমাদের সম্পর্কে</a>
<a href="#academics" class="text-gray-600 hover:text-pink-600 transition">শিক্ষা কার্যক্রম</a>
<a href="#facilities" class="text-gray-600 hover:text-pink-600 transition">সুবিধাসমূহ</a>
<a href="#gallery" class="text-gray-600 hover:text-pink-600 transition">গ্যালারি</a>
<a href="#contact" class="text-gray-600 hover:text-pink-600 transition">যোগাযোগ</a>
</div>
<button id="mobile-menu-button" class="md:hidden focus:outline-none">
<i data-feather="menu" class="text-gray-600"></i>
</button>
</div>
</div>
</nav>
<!-- 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="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
আমাদের <span class="text-pink-500">ইতিহাস</span> ও <span class="text-purple-500">মিশন</span>
</h2>
<div class="w-24 h-1 bg-gradient-to-r from-pink-400 to-purple-500 mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="relative" data-aos="fade-right">
<div class="w-full h-80 md:h-96 bg-gradient-to-br from-pink-100 to-purple-100 rounded-2xl overflow-hidden">
<img src="http://static.photos/education/1024x576/1" alt="School Building" class="w-full h-full object-cover">
</div>
<div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-xl">
<div class="flex items-center">
<div class="bg-pink-500 p-3 rounded-full">
<i data-feather="award" class="text-white"></i>
</div>
<div class="ml-3">
<h4 class="font-bold text-gray-800">২০+ বছর</h4>
<p class="text-sm text-gray-600">অভিজ্ঞতা</p>
</div>
</div>
</div>
</div>
<div data-aos="fade-left">
<h3 class="text-2xl font-bold text-gray-800 mb-4">আমাদের প্রতিষ্ঠান সম্পর্কে</h3>
<p class="text-gray-600 mb-6">
বালিয়াডাঙ্গ ইসলামিয়া মহিলা উচ্চ বিদ্যালয় ১৯৯৫ সালে প্রতিষ্ঠিত হয়। আমরা নারী শিক্ষার উন্নয়নে নিরলসভাবে কাজ করে যাচ্ছি। আমাদের লক্ষ্য হল নৈতিকতা ও আধুনিক শিক্ষার সমন্বয়ে আদর্শ নারী গড়ে তোলা।
</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-pink-100 p-2 rounded-full mr-4">
<i data-feather="check-circle" class="text-pink-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">আমাদের ভিশন</h4>
<p class="text-gray-600">জ্ঞানী, দক্ষ ও নৈতিকতাসম্পন্ন নারী গড়ে তোলা</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-purple-100 p-2 rounded-full mr-4">
<i data-feather="check-circle" class="text-purple-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">আমাদের মিশন</h4>
<p class="text-gray-600">শিক্ষার মাধ্যমে নারীদের ক্ষমতায়ন ও সমাজ উন্নয়ন</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-4">
<i data-feather="check-circle" class="text-blue-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">আমাদের মূল্যবোধ</h4>
<p class="text-gray-600">সততা, শৃঙ্খলা, সেবা ও শ্রেষ্ঠত্ব</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Academics Section -->
<section id="academics" class="py-20 bg-gradient-to-b from-purple-50 to-pink-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
আমাদের <span class="text-pink-500">শিক্ষা কার্যক্রম</span>
</h2>
<p class="text-gray-600 max-w-2xl mx-auto">
আমরা আধুনিক ও ইসলামী শিক্ষার সমন্বয়ে একটি ভারসাম্যপূর্ণ পাঠ্যক্রম অনুসরণ করি
</p>
<div class="w-24 h-1 bg-gradient-to-r from-pink-400 to-purple-500 mx-auto mt-4"></div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Class 6-8 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl transition duration-300" data-aos="zoom-in">
<div class="h-48 bg-gradient-to-r from-pink-400 to-purple-500 flex items-center justify-center">
<div class="text-center text-white p-6">
<i data-feather="book" class="w-12 h-12 mx-auto mb-4"></i>
<h3 class="text-2xl font-bold">ষষ্ঠ থেকে অষ্টম শ্রেণি</h3>
</div>
</div>
<div class="p-6">
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="text-pink-500 mr-2 mt-1"></i>
<span>বেসিক বিজ্ঞান ও গণিত</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-pink-500 mr-2 mt-1"></i>
<span>ইংরেজি ভাষা দক্ষতা</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-pink-500 mr-2 mt-1"></i>
<span>কম্পিউটার শিক্ষা</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-pink-500 mr-2 mt-1"></i>
<span>ইসলামিক স্টাডিজ</span>
</li>
</ul>
</div>
</div>
<!-- Class 9-10 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl transition duration-300" data-aos="zoom-in" data-aos-delay="100">
<div class="h-48 bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center">
<div class="text-center text-white p-6">
<i data-feather="layers" class="w-12 h-12 mx-auto mb-4"></i>
<h3 class="text-2xl font-bold">নবম ও দশম শ্রেণি</h3>
</div>
</div>
<div class="p-6">
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="text-purple-500 mr-2 mt-1"></i>
<span>বিজ্ঞান, মানবিক ও বাণিজ্য বিভাগ</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-purple-500 mr-2 mt-1"></i>
<span>এসএসসি পরীক্ষার প্রস্তুতি</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-purple-500 mr-2 mt-1"></i>
<span>কারিগরি শিক্ষা</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-purple-500 mr-2 mt-1"></i>
<span>ক্যারিয়ার গাইডেন্স</span>
</li>
</ul>
</div>
</div>
<!-- Extra Activities -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl transition duration-300" data-aos="zoom-in" data-aos-delay="200">
<div class="h-48 bg-gradient-to-r from-blue-500 to-green-500 flex items-center justify-center">
<div class="text-center text-white p-6">
<i data-feather="activity" class="w-12 h-12 mx-auto mb-4"></i>
<h3 class="text-2xl font-bold">অতিরিক্ত কার্যক্রম</h3>
</div>
</div>
<div class="p-6">
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i data-feather="check" class="text-blue-500 mr-2 mt-1"></i>
<span>ডিবেটিং ক্লাব</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-blue-500 mr-2 mt-1"></i>
<span>সাংস্কৃতিক অনুষ্ঠান</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-blue-500 mr-2 mt-1"></i>
<span>ক্রীড়া প্রতিযোগিতা</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-blue-500 mr-2 mt-1"></i>
<span>স্বেচ্ছাসেবী কার্যক্রম</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Facilities Section -->
<section id="facilities" 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" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
আমাদের <span class="text-pink-500">সুবিধাসমূহ</span>
</h2>
<p class="text-gray-600 max-w-2xl mx-auto">
শিক্ষার্থীদের জন্য আধুনিক সব সুবিধা নিশ্চিত করেছি আমরা
</p>
<div class="w-24 h-1 bg-gradient-to-r from-pink-400 to-purple-500 mx-auto mt-4"></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Library -->
<div class="bg-gradient-to-br from-pink-50 to-purple-50 rounded-2xl p-6 shadow-lg hover:shadow-xl transition duration-300" data-aos="fade-up">
<div class="bg-pink-500 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
<i data-feather="book" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">সমৃদ্ধ লাইব্রেরি</h3>
<p class="text-gray-600">
৫০০০+ বইয়ের সংগ্রহ, আধুনিক রিডিং রুম এবং ডিজিটাল লাইব্রেরি সুবিধা
</p>
</div>
<!-- Science Lab -->
<div class="bg-gradient-to-br from-purple-50 to-blue-50 rounded-2xl p-6 shadow-lg hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="bg-purple-500 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
<i data-feather="flask" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">আধুনিক বিজ্ঞানাগার</h3>
<p class="text-gray-600">
পদার্থ, রসায়ন, জীববিজ্ঞান ও কম্পিউটার ল্যাব সহ সম্পূর্ণ সজ্জিত বিজ্ঞানাগার
</p>
</div>
<!-- Playground -->
<div class="bg-gradient-to-br from-blue-50 to-green-50 rounded-2xl p-6 shadow-lg hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="bg-blue-500 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
<i data-feather="activity" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">বৃহৎ খেলার মাঠ</h3>
<p class="text-gray-600">
ভলিবল, ব্যাডমিন্টন, ক্রিকেট ও ফুটবল খেলার জন্য আলাদা আলাদা ব্যবস্থা
</p>
</div>
<!-- Multimedia -->
<div class="bg-gradient-to-br from-green-50 to-yellow-50 rounded-2xl p-6 shadow-lg hover:shadow-xl transition duration-300" data-aos="fade-up">
<div class="bg-green-500 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
<i data-feather="monitor" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">মাল্টিমিডিয়া ক্লাস</h3>
<p class="text-gray-600">
প্রতিটি ক্লাসরুমে প্রজেক্টর ও সাউন্ড সিস্টেমের মাধ্যমে ইন্টারেক্টিভ ক্লাস
</p>
</div>
<!-- Transportation -->
<div class="bg-gradient-to-br from-yellow-50 to-orange-50 rounded-2xl p-6 shadow-lg hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="bg-yellow-500 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
<i data-feather="truck" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">যানবাহন সুবিধা</h3>
<p class="text-gray-600">
নিরাপদ ও আরামদায়ক স্কুল বাস সার্ভিস পুরো এলাকা জুড়ে
</p>
</div>
<!-- Medical -->
<div class="bg-gradient-to-br from-orange-50 to-red-50 rounded-2xl p-6 shadow-lg hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="bg-orange-500 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
<i data-feather="heart" class="text-white w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">স্বাস্থ্য সেবা</h3>
<p class="text-gray-600">
ফার্স্ট এইড বক্স ও নিয়মিত স্বাস্থ্য পরীক্ষার ব্যবস্থা
</p>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="py-20 bg-gradient-to-b from-purple-50 to-pink-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
আমাদের <span class="text-pink-500">গ্যালারি</span>
</h2>
<p class="text-gray-600 max-w-2xl mx-auto">
স্কুল জীবনের কিছু স্মরণীয় মুহূর্ত
</p>
<div class="w-24 h-1 bg-gradient-to-r from-pink-400 to-purple-500 mx-auto mt-4"></div>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300" data-aos="zoom-in">
<img src="http://static.photos/education/640x360/1" alt="School Event" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
</div>
<div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300" data-aos="zoom-in" data-aos-delay="100">
<img src="http://static.photos/education/640x360/2" alt="Classroom" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
</div>
<div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300" data-aos="zoom-in" data-aos-delay="200">
<img src="http://static.photos/education/640x360/3" alt="Science Lab" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
</div>
<div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300" data-aos="zoom-in" data-aos-delay="300">
<img src="http://static.photos/education/640x360/4" alt="Sports Day" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
</div>
<div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300" data-aos="zoom-in">
<img src="http://static.photos/education/640x360/5" alt="Cultural Program" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
</div>
<div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300" data-aos="zoom-in" data-aos-delay="100">
<img src="http://static.photos/education/640x360/6" alt="Library" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
</div>
<div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300" data-aos="zoom-in" data-aos-delay="200">
<img src="http://static.photos/education/640x360/7" alt="Teachers" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
</div>
<div class="overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300" data-aos="zoom-in" data-aos-delay="300">
<img src="http://static.photos/education/640x360/8" alt="Award Ceremony" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
</div>
</div>
<div class="text-center mt-12">
<button class="px-6 py-3 bg-pink-500 text-white rounded-full hover:bg-pink-600 transition duration-300 shadow-lg hover:shadow-xl flex items-center mx-auto">
<i data-feather="image" class="mr-2"></i>
আরও ছবি দেখুন
</button>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" 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" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
আমাদের <span class="text-pink-500">যোগাযোগ</span> করুন
</h2>
<p class="text-gray-600 max-w-2xl mx-auto">
যেকোনো প্রশ্ন বা পরামর্শের জন্য আমরা আপনার সাথে যোগাযোগের অপেক্ষায় আছি
</p>
<div class="w-24 h-1 bg-gradient-to-r from-pink-400 to-purple-500 mx-auto mt-4"></div>
</div>
<div class="grid md:grid-cols-2 gap-12">
<div data-aos="fade-right">
<h3 class="text-2xl font-bold text-gray-800 mb-6">আমাদের ঠিকানা</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-pink-100 p-3 rounded-full mr-4">
<i data-feather="map-pin" class="text-pink-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">প্রধান ক্যাম্পাস</h4>
<p class="text-gray-600">বালিয়াডাঙ্গ বাজার, ঠাকুরগাঁও সদর, ঠাকুরগাঁও</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i data-feather="phone" class="text-purple-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">ফোন করুন</h4>
<p class="text-gray-600">+৮৮০ ১৭১১-২৩৪৫৬৭</p>
<p class="text-gray-600">+৮৮০ ৫৬১-৫৬৭৮৯</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i data-feather="mail" class="text-blue-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">ইমেইল করুন</h4>
<p class="text-gray-600">info@baliadangislamia.edu.bd</p>
<p class="text-gray-600">principal@baliadangislamia.edu.bd</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-100 p-3 rounded-full mr-4">
<i data-feather="clock" class="text-green-500"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">সময়সূচী</h4>
<p class="text-gray-600">শনি-বৃহস্পতি: সকাল ৯টা - বিকাল ৪টা</p>
<p class="text-gray-600">শুক্রবার: বন্ধ</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-medium text-gray-800 mb-4">সামাজিক যোগাযোগ</h4>
<div class="flex space-x-4">
<a href="#" class="bg-blue-100 p-3 rounded-full text-blue-500 hover:bg-blue-500 hover:text-white transition duration-300">
<i data-feather="facebook"></i>
</a>
<a href="#" class="bg-pink-100 p-3 rounded-full text-pink-500 hover:bg-pink-500 hover:text-white transition duration-300">
<i data-feather="instagram"></i>
</a>
<a href="#" class="bg-blue-400 p-3 rounded-full text-white hover:bg-blue-500 transition duration-300">
<i data-feather="twitter"></i>
</a>
<a href="#" class="bg-red-100 p-3 rounded-full text-red-500 hover:bg-red-500 hover:text-white transition duration-300">
<i data-feather="youtube"></i>
</a>
</div>
</div>
</div>
<div data-aos="fade-left">
<h3 class="text-2xl font-bold text-gray-800 mb-6">বার্তা পাঠান</h3>
<form class="space-y-6">
<div>
<label for="name" class="block text-gray-700 mb-2">আপনার নাম</label>
<input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="আপনার পূর্ণ নাম">
</div>
<div>
<label for="email" class="block text-gray-700 mb-2">ইমেইল ঠিকানা</label>
<input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="আপনার ইমেইল">
</div>
<div>
<label for="phone" class="block text-gray-700 mb-2">ফোন নম্বর</label>
<input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="আপনার মোবাইল নম্বর">
</div>
<div>
<label for="message" class="block text-gray-700 mb-2">আপনার বার্তা</label>
<textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="আপনার প্রশ্ন বা পরামর্শ লিখুন"></textarea>
</div>
<button type="submit" class="w-full bg-gradient-to-r from-pink-500 to-purple-500 text-white py-3 px-6 rounded-lg hover:from-pink-600 hover:to-purple-600 transition duration-300 shadow-lg hover:shadow-xl">
বার্তা পাঠান
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-12 mb-12">
<div>
<div class="flex items-center space-x-2 mb-6">
<i data-feather="book-open" class="text-pink-500"></i>
<span class="text-xl font-bold">বালিয়াডাঙ্গ ইসলামিয়া</span>
</div>
<p class="text-gray-400 mb-6">
নারী শিক্ষার আলো ছড়িয়ে দেয়ার লক্ষ্যে ১৯৯৫ সাল থেকে নিরলসভাবে কাজ করে যাচ্ছি আমরা
</p>
<div class="flex space-x-4">
<a href="#" class="bg-gray-800 p-2 rounded-full text-gray-300 hover:bg-pink-500 hover:text-white transition duration-300">
<i data-feather="facebook"></i>
</a>
<a href="#" class="bg-gray-800 p-2 rounded-full text-gray-300 hover:bg-blue-400 hover:text-white transition duration-300">
<i data-feather="twitter"></i>
</a>
<a href="#" class="bg-gray-800 p-2 rounded-full text-gray-300 hover:bg-pink-500 hover:text-white transition duration-300">
<i data-feather="instagram"></i>
</a>
<a href="#" class="bg-gray-800 p-2 rounded-full text-gray-300 hover:bg-red-500 hover:text-white transition duration-300">
<i data-feather="youtube"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">গুরুত্বপূর্ণ লিংক</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">শিক্ষক ও কর্মচারী</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">ভর্তি তথ্য</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">একাডেমিক ক্যালেন্ডার</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">ফলাফল</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">নোটিশ বোর্ড</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">সাহায্য</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">সচরাচর জিজ্ঞাসা</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">প্রাইভেট পলিসি</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">শর্তাবলী</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">সাপোর্ট</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">নিউজলেটার</h4>
<p class="text-gray-400 mb-4">
আমাদের সর্বশেষ আপডেট ও নোটিশ পেতে সাবস্ক্রাইব করুন
</p>
<form class="flex">
<input type="email" placeholder="আপনার ইমেইল" class="px-4 py-2 bg-gray-800 text-white rounded-l-lg focus:outline-none focus:ring-2 focus:ring-pink-500 w-full">
<button type="submit" class="bg-pink-500 px-4 py-2 rounded-r-lg hover:bg-pink-600 transition duration-300">
<i data-feather="send"></i>
</button>
</form>
</div>
</div>
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">
© ২০২৩ বালিয়াডাঙ্গ ইসলামিয়া মহিলা উচ্চ বিদ্যালয়। সর্বস্বত্ব সংরক্ষিত।
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">প্রাইভেসি পলিসি</a>
<a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">শর্তাবলী</a>
<a href="#" class="text-gray-400 hover:text-pink-500 transition duration-300">সাইটম্যাপ</a>
</div>
</div>
</div>
</footer>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden fixed inset-0 bg-white z-50 p-4" style="will-change: transform, opacity;">
<div class="flex justify-end">
<button id="mobile-menu-close" class="p-2">
<i data-feather="x" class="text-gray-600"></i>
</button>
</div>
<div class="flex flex-col space-y-6 mt-8">
<a href="#home" class="text-pink-600 font-medium text-xl transition-transform duration-150">হোম</a>
<a href="#about" class="text-gray-600 hover:text-pink-600 transition text-xl transition-transform duration-150">আমাদের সম্পর্কে</a>
<a href="#academics" class="text-gray-600 hover:text-pink-600 transition text-xl transition-transform duration-150">শিক্ষা কার্যক্রম</a>
<a href="#facilities" class="text-gray-600 hover:text-pink-600 transition text-xl transition-transform duration-150">সুবিধাসমূহ</a>
<a href="#gallery" class="text-gray-600 hover:text-pink-600 transition text-xl transition-transform duration-150">গ্যালারি</a>
<a href="#contact" class="text-gray-600 hover:text-pink-600 transition text-xl transition-transform duration-150">যোগাযোগ</a>
</div>
</div>
<!-- Back to Top Button -->
<button id="back-to-top" class="fixed bottom-8 right-8 bg-pink-500 text-white p-3 rounded-full shadow-lg hover:bg-pink-600 transition duration-300 hidden">
<i data-feather="arrow-up"></i>
</button>
<!-- Add Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<!-- Add Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
// Initialize AOS
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
// Initialize Swiper slider with proper configuration
document.addEventListener('DOMContentLoaded', function() {
const swiper = new Swiper('.swiper-container', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
speed: 1000,
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + ' bg-white opacity-50 hover:opacity-75 transition-opacity duration-300"></span>';
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function() {
// Initialize all slides to be visible but transparent
this.slides.forEach((slide, index) => {
if (index === this.activeIndex) {
slide.style.opacity = '1';
slide.style.transform = 'scale(1)';
} else {
slide.style.opacity = '0';
slide.style.transform = 'scale(0.95)';
}
});
animateSlideContent(this.slides[this.activeIndex]);
},
slideChangeTransitionStart: function() {
// Fade out current slide
this.slides[this.previousIndex].style.opacity = '0';
this.slides[this.previousIndex].style.transform = 'scale(0.95)';
},
slideChangeTransitionEnd: function() {
// Fade in new active slide
this.slides[this.activeIndex].style.opacity = '1';
this.slides[this.activeIndex].style.transform = 'scale(1)';
animateSlideContent(this.slides[this.activeIndex]);
}
}
});
function animateSlideContent(slide) {
// Reset all animations first
const elements = slide.querySelectorAll('*');
elements.forEach(el => {
el.style.animation = 'none';
el.style.opacity = '1';
el.style.transform = 'none';
});
// Animate SVG icons with staggered delay
const svgs = slide.querySelectorAll('svg');
svgs.forEach((svg, index) => {
svg.style.animation = 'none';
setTimeout(() => {
svg.style.animation = '';
}, 100 + index * 200);
});
// Animate text elements with staggered delay
const texts = slide.querySelectorAll('h1, h2, h3, p');
texts.forEach((text, index) => {
text.style.opacity = '0';
text.style.transform = 'translateY(20px)';
text.style.transition = 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
setTimeout(() => {
text.style.opacity = '1';
text.style.transform = 'translateY(0)';
}, 300 + index * 150);
});
}
// Create floating animated elements
function createFloatingElements() {
const heroSection = document.getElementById('hero-slider');
const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFE66D', '#FF9F1C'];
// Remove existing floating elements
const existingElements = heroSection.querySelectorAll('.floating-element');
existingElements.forEach(el => el.remove());
for (let i = 0; i < 6; i++) {
const shape = document.createElement('div');
shape.className = 'absolute z-0 pointer-events-none floating-element';
shape.style.left = Math.random() * 90 + 5 + '%';
shape.style.top = Math.random() * 80 + 10 + '%';
shape.style.opacity = Math.random() * 0.1 + 0.05;
shape.style.color = colors[Math.floor(Math.random() * colors.length)];
const shapes = [
'<svg class="w-6 h-6" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/></svg>',
'<svg class="w-8 h-8" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"/></svg>',
'<svg class="w-7 h-7" viewBox="0 0 24 24"><polygon points="12,2 22,22 2,22" stroke="currentColor" stroke-width="2" fill="none"/></svg>',
'<svg class="w-6 h-6" viewBox="0 0 24 24"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" fill="none"/></svg>'
];
shape.innerHTML = shapes[Math.floor(Math.random() * shapes.length)];
heroSection.appendChild(shape);
// Add floating animation
animateFloatingElement(shape);
}
}
function animateFloatingElement(element) {
const duration = 4000 + Math.random() * 3000;
const delay = Math.random() * 2000;
setTimeout(() => {
element.style.transition = `all ${duration}ms ease-in-out`;
element.animate(
[
{ transform: 'translate(0, 0) rotate(0deg)' },
{ transform: `translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px) rotate(${Math.random() * 180 - 90}deg)` }
],
{
duration: duration,
iterations: Infinity,
direction: 'alternate',
easing: 'ease-in-out'
}
);
}, delay);
}
createFloatingElements();
// Fix initial slide visibility
setTimeout(() => {
const slides = document.querySelectorAll('.swiper-slide');
slides.forEach((slide, index) => {
if (index === 0) {
slide.style.opacity = '1';
slide.style.transform = 'scale(1)';
} else {
slide.style.opacity = '0';
slide.style.transform = 'scale(0.95)';
}
});
}, 100);
});
// Back to top button
const backToTopButton = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('hidden');
} else {
backToTopButton.classList.add('hidden');
}
});
backToTopButton.addEventListener('click', () => {
window.scrollTo({top: 0, behavior: 'smooth'});
});
// Mobile Menu Toggle with Enhanced Animations
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenuClose = document.getElementById('mobile-menu-close');
const mobileMenu = document.getElementById('mobile-menu');
const mobileLinks = mobileMenu.querySelectorAll('a');
// Enhanced menu animation in
function openMenu() {
mobileMenu.classList.remove('hidden');
mobileMenu.style.opacity = '0';
mobileMenu.style.transform = 'translateX(-100%)';
setTimeout(() => {
mobileMenu.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
mobileMenu.style.opacity = '1';
mobileMenu.style.transform = 'translateX(0)';
// Animate links with staggered delay
mobileLinks.forEach((link, index) => {
link.style.opacity = '0';
link.style.transform = 'translateX(-20px)';
setTimeout(() => {
link.style.transition = 'all 0.3s ease-out';
link.style.opacity = '1';
link.style.transform = 'translateX(0)';
}, 100 + index * 100);
});
}, 10);
document.body.style.overflow = 'hidden';
feather.replace();
}
// Enhanced menu animation out
function closeMenu() {
mobileMenu.style.transition = 'all 0.3s ease-in';
mobileMenu.style.opacity = '0';
mobileMenu.style.transform = 'translateX(-100%)';
// Reset links animation
mobileLinks.forEach(link => {
link.style.opacity = '0';
link.style.transform = 'translateX(-20px)';
});
setTimeout(() => {
mobileMenu.classList.add('hidden');
document.body.style.overflow = 'auto';
}, 300);
feather.replace();
}
// Event listeners
mobileMenuButton.addEventListener('click', openMenu);
mobileMenuClose.addEventListener('click', closeMenu);
// Enhanced link click animation
mobileLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
link.style.transform = 'scale(0.95) translateX(-5px)';
setTimeout(() => {
link.style.transform = 'scale(1) translateX(0)';
const targetId = link.getAttribute('href').substring(1);
const targetSection = document.getElementById(targetId);
if (targetSection) {
targetSection.scrollIntoView({behavior: 'smooth'});
}
closeMenu();
}, 150);
});
});
// Prevent horizontal scroll on mobile
document.addEventListener('touchmove', function(e) {
if (e.touches.length > 1) {
e.preventDefault();
}
}, { passive: false });
// Feather icons
feather.replace();
</script>
</body>
</html>