root
683 lines
29 KiB
PHP
683 lines
29 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Al Rahma Sunday School</title>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<meta content="" name="keywords">
|
|
<meta content="" name="description">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Google Web Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600&family=Inter:wght@600&family=Lobster+Two:wght@700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Icon Font Stylesheet -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--primary-color: #3a8fd1;
|
|
--secondary-color: #2c5e8a;
|
|
--light-green: #e8f5e9;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Heebo', sans-serif;
|
|
color: #333;
|
|
overflow-x: hidden;
|
|
padding-bottom: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.bg-light-green {
|
|
background-color: var(--light-green);
|
|
}
|
|
|
|
.green-title {
|
|
color: var(--secondary-color);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background-color: var(--secondary-color);
|
|
border-color: var(--secondary-color);
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: #28a745;
|
|
border-color: #28a745;
|
|
}
|
|
|
|
/* Navbar styling */
|
|
.navbar {
|
|
box-shadow: 0 2px 10px rgba(53, 52, 52, 0.33);
|
|
}
|
|
|
|
/* Carousel fixes */
|
|
.carousel-item {
|
|
height: 600px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.carousel-item img {
|
|
object-fit: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Improved carousel caption */
|
|
.carousel-caption {
|
|
bottom: 20%;
|
|
text-align: left;
|
|
padding: 20px;
|
|
background: rgba(56, 55, 55, 0.1);
|
|
border-radius: 8px;
|
|
max-width: 600px;
|
|
left: 10%;
|
|
right: auto;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.carousel-caption h1 {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: white !important;
|
|
/*text-shadow: 1px 1px 3px rgba(253, 253, 253, 1);*/
|
|
}
|
|
|
|
.carousel-caption p {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 1rem;
|
|
color: white !important;
|
|
/*text-shadow: 1px 1px 2px rgba(255, 254, 254, 1);*/
|
|
}
|
|
|
|
/* Mobile carousel adjustments */
|
|
@media (max-width: 992px) {
|
|
.carousel-item {
|
|
height: 500px;
|
|
}
|
|
|
|
.carousel-caption {
|
|
bottom: 15%;
|
|
padding: 15px;
|
|
width: 80%;
|
|
left: 10%;
|
|
}
|
|
|
|
.carousel-caption h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.carousel-caption p {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.carousel-item {
|
|
height: 400px;
|
|
}
|
|
|
|
.carousel-caption {
|
|
bottom: 10%;
|
|
width: 85%;
|
|
left: 7.5%;
|
|
padding: 12px;
|
|
}
|
|
|
|
.carousel-caption h1 {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.carousel-caption p {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.carousel-item {
|
|
height: 350px;
|
|
}
|
|
|
|
.carousel-caption {
|
|
bottom: 5%;
|
|
width: 90%;
|
|
left: 5%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.carousel-caption h1 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.carousel-caption p {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
/* Section spacing */
|
|
.container-xxl.py-3 {
|
|
padding-top: 3rem !important;
|
|
padding-bottom: 3rem !important;
|
|
|
|
width: 1200px;
|
|
/* fixed width */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* About section */
|
|
.about-img {
|
|
position: relative;
|
|
}
|
|
|
|
.about-img img {
|
|
border: 5px solid #fff;
|
|
box-shadow: 0 0 15px rgba(72, 236, 7, 0.1);
|
|
}
|
|
|
|
/* Call to action section */
|
|
.bg-light.rounded {
|
|
box-shadow: 0 0 15px rgba(76, 179, 35, 0.97);
|
|
}
|
|
|
|
/* Classes section */
|
|
.row.bg-light.squared {
|
|
margin-bottom: 0 !important;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.row.bg-light.squared .col-lg-6.text-center {
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Added space to the right of the image */
|
|
.image-container {
|
|
margin-right: 30px;
|
|
/* Space added to the right */
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-radius: 0 15px 15px 0;
|
|
}
|
|
|
|
.image-container img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.image-container:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.row.bg-light.squared .image-container {
|
|
position: relative !important;
|
|
margin: 0 auto !important;
|
|
width: 100%;
|
|
max-width: 520px;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Mobile: stack images naturally */
|
|
@media (max-width: 767.98px) {
|
|
.row.bg-light.squared .image-container {
|
|
max-width: 360px;
|
|
min-height: 0 !important;
|
|
position: relative;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.row.bg-light.squared .overlapping-image {
|
|
position: relative !important;
|
|
display: block;
|
|
width: 100% !important;
|
|
height: auto;
|
|
margin: 15px 0;
|
|
transform: none !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
|
border: 5px solid white;
|
|
}
|
|
|
|
.row.bg-light.squared.position-relative.align-items-center {
|
|
margin-bottom: 3rem !important;
|
|
}
|
|
}
|
|
|
|
/* Footer - FIXED */
|
|
.site-footer {
|
|
background-color: #2c3e50;
|
|
color: white;
|
|
padding: 3rem 0;
|
|
margin-top: 3rem;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Ensure all text is visible */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p {
|
|
opacity: 1 !important;
|
|
color: #333 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
/* Mission and CTA sections */
|
|
.mission-section,
|
|
.cta-section {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Back to top button */
|
|
.back-to-top {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
right: 30px;
|
|
z-index: 99;
|
|
display: none;
|
|
}
|
|
|
|
/* Utility classes */
|
|
.rounded-circle {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
/* Content sections */
|
|
.content-section {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
/* Image container styling */
|
|
.image-column {
|
|
min-height: 400px;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.image-column {
|
|
min-height: 300px;
|
|
border-radius: 0 0 10px 10px !important;
|
|
}
|
|
|
|
.rounded-end {
|
|
border-radius: 0 0 10px 10px !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Navbar Start -->
|
|
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5 py-lg-0">
|
|
<a href="<?= base_url('/') ?>" class="navbar-brand d-flex align-items-center">
|
|
<img src="<?= base_url('images/logo.png') ?>" alt="Al Rahma Sunday School" style="height: 60px; width: 80px;">
|
|
<h1 class="m-0 ms-2 green-title"></h1>
|
|
</a>
|
|
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
<div class="navbar-nav mx-auto"></div>
|
|
<div class="d-flex">
|
|
<?php if (session()->get('is_logged_in')): ?>
|
|
<!-- Show user info -->
|
|
<span class="navbar-text me-3">
|
|
Welcome, <?= esc(session()->get('user_name')) ?>
|
|
</span>
|
|
<!-- User is logged in - show Dashboard and Logout -->
|
|
<a href="<?= base_url('/dashboard') ?>" class="btn btn-success rounded-pill px-2 me-2">
|
|
Dashboard<i class="fa fa-tachometer-alt ms-3"></i>
|
|
</a>
|
|
<a href="<?= base_url('/logout') ?>" class="btn btn-outline-danger rounded-pill px-2">
|
|
Logout<i class="fa fa-sign-out-alt ms-3"></i>
|
|
</a>
|
|
<?php else: ?>
|
|
<!-- User is not logged in - show Login and Register -->
|
|
<a href="<?= base_url('/login') ?>" class="btn btn-success rounded-pill px-3 me-2">
|
|
Login<i class="fa fa-arrow-right ms-3"></i>
|
|
</a>
|
|
<a href="<?= base_url('/register') ?>" class="btn btn-success rounded-pill px-3">
|
|
Register<i class="fa fa-arrow-right ms-3"></i>
|
|
</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Navbar End -->
|
|
|
|
<!-- Carousel Start -->
|
|
<div id="mainCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
|
<div class="carousel-indicators">
|
|
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
|
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
|
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
|
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
|
|
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="4" aria-label="Slide 5"></button>
|
|
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="5" aria-label="Slide 6"></button>
|
|
</div>
|
|
|
|
<div class="carousel-inner">
|
|
<!-- Slide 1 -->
|
|
<div class="carousel-item active">
|
|
<img src="images/carousel-1.png" class="d-block w-100" alt="Not only a book to be read but a guide illuminating our lives.">
|
|
<div class="carousel-caption">
|
|
<h1>Not only a book to be read but a guide illuminating our lives.</h1>
|
|
<p>At Al Rahma Sunday School, we teach the Quran as a living guide, nurturing love and respect for the words of Allah (SWT). Our program supports each child's journey through recitation, memorization, and age-appropriate translation and understanding.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2 -->
|
|
<div class="carousel-item">
|
|
<img src="images/carousel-0.png" class="d-block w-100" alt="Faith and Knowledge Hand in Hand">
|
|
<div class="carousel-caption">
|
|
<h1>Faith and Knowledge Hand in Hand</h1>
|
|
<p>Our Sunday School program (Grades 1-9, Youth) is evenly divided between Islamic Studies in English—exploring topics about Allah, Islamic values, Muslim life and lessons from the Prophets—and Quran/Arabic studies focused on recitation, memorization and language. This balanced approach nurtures both understanding and practice of Islam.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3 -->
|
|
<div class="carousel-item">
|
|
<img src="images/carousel-3.png" class="d-block w-100" alt="Nurturing Hearts and Minds">
|
|
<div class="carousel-caption">
|
|
<h1>Nurturing Hearts and Minds</h1>
|
|
<p>At our school, we inspire a lifelong love for Islamic values, for our worship rituals and our prophets through engaging lessons, interactive activities, and a supportive environment. Every student grows in knowledge, faith and character, learning to live the teachings of Islam in everyday life.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4 -->
|
|
<div class="carousel-item">
|
|
<img src="images/carousel-4.png" class="d-block w-100" alt="Exciting Fun, Inside and Out!">
|
|
<div class="carousel-caption">
|
|
<h1>Exciting Fun, Inside and Out!</h1>
|
|
<p>From festive Eid celebrations to adventurous outdoor outings, our school events bring learning, laughter, and unforgettable memories together.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5 -->
|
|
<div class="carousel-item">
|
|
<img src="images/carousel-5.png" class="d-block w-100" alt="Strengthening Faith, Character, and Community Bonds">
|
|
<div class="carousel-caption">
|
|
<h1>Strengthening Faith, Character, and Community Bonds</h1>
|
|
<p>A warm, faith-centered community helps children thrive, build confidence, compassion, and friendships.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
<br>
|
|
<!-- Carousel End -->
|
|
<section class="text-center my-3">
|
|
<a href="<?= base_url('account_creation_guide.pdf') ?>" target="_blank" style="font-weight: 900; color: black; text-decoration: none;">
|
|
<h4 class="fw-bold my-0"><u>Join Al Rahma family today! Click here for a quick guide on how to create an account.</u></h4>
|
|
</a>
|
|
</section>
|
|
|
|
|
|
<div class="container-xxl py-2 content-section">
|
|
<div class="container">
|
|
<div class="row bg-light squared align-items-center">
|
|
<!-- Text Column -->
|
|
<div class="col-lg-6">
|
|
<div class="d-flex flex-column justify-content-center p-4 p-md-5">
|
|
<h1 class="mb-4">Faith, Education and Community for Over 30 Years</h1>
|
|
<p class="mb-4">The Islamic Society of Greater Lowell (ISGL), established in 1993 in Chelmsford, Massachusetts, serves as both a mosque and a vibrant community center. It provides a place of worship for Allah (SWT), offers Islamic education and facilitates religious and social activities for Muslims in the Merrimack Valley. As a non-profit, charitable, and tax-exempt organization, ISGL also provides essential services such as marriage ceremonies, burial arrangements and community support while promoting a greater understanding of Islam in America.</p>
|
|
<p class="mb-4">Under the umbrella of ISGL, Al Rahma Sunday School has been serving the community for over thirty years. Throughout the decades, it has provided students with a strong foundation in Islamic Studies and Quran, fostering both knowledge and character. With its dedicated teachers and well-rounded academic program, the school continues to guide generations of Muslim youth in their faith, values and practice of Islam.</p>
|
|
<p>For more information, click below to visit ISGL official website.</p>
|
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
|
|
<tr>
|
|
<td align="center" bgcolor="#28a745" style="border-radius:6px;">
|
|
<a href="https://isgl.org"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style="display:inline-block;padding:12px 18px;color:#ffffff;text-decoration:none;font-weight:600;">
|
|
ISGL Official Website
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Column - Fixed with correct path -->
|
|
<div class="col-lg-6 image-column pe-3">
|
|
<div class="position-relative h-100 w-100">
|
|
<img class="w-100 h-100 rounded-end" src="images/isgl_home.png" style="object-fit: cover;" alt="..." onerror="this.onerror=null; this.src='public/images/call-to-action.jpg';">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- About Start - Our Mission Section -->
|
|
<div class="container-xxl py-2 content-section">
|
|
<div class="container">
|
|
<div class="row bg-light squared align-items-center">
|
|
<!-- Text Column -->
|
|
<div class="col-lg-6">
|
|
<div class="d-flex flex-column justify-content-center p-4 p-md-5">
|
|
<h1 class="mb-4">Our Mission</h1>
|
|
<p>Al Rahma Sunday School's mission is to make the Masjid a central part of our Muslim children's lives from a very young age. We are dedicated to offering a strong, well-rounded curriculum in Quran, Arabic and Islamic Studies. Our goal is to deliver the highest quality education to help instill Islamic values, beliefs and practices in each student. Additionally, we regularly organize engaging and fun events throughout the year to make the learning experience more enjoyable and spiritually enriching.</p>
|
|
<p>We deeply appreciate your continued support and cooperation in helping us fulfill this mission. Together, we can provide a strong Islamic foundation for our children and shape a future generation that is confident in their faith and rooted in Islamic values.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Images Column -->
|
|
<div class="col-lg-6 about-img">
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<img class="img-fluid w-75 rounded-circle bg-light p-3" src="images/about-1.jpg" alt="">
|
|
</div>
|
|
<div class="col-6 text-start" style="margin-top: -150px;">
|
|
<img class="img-fluid w-100 rounded-circle bg-light p-3" src="images/about-2.jpg" alt="">
|
|
</div>
|
|
<div class="col-6 text-end" style="margin-top: -150px;">
|
|
<img class="img-fluid w-100 rounded-circle bg-light p-3" src="images/about-3.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- About End -->
|
|
|
|
<!-- Call To Action Start - Become A Teacher or Admin Section -->
|
|
<div class="container-xxl py-2 content-section">
|
|
<div class="container">
|
|
<div class="row bg-light squared align-items-center">
|
|
<!-- Text Column -->
|
|
<div class="col-lg-6">
|
|
<div class="d-flex flex-column justify-content-center p-4 p-md-5">
|
|
<h1 class="mb-4">Become A Teacher or Admin</h1>
|
|
<p class="mb-4">Volunteering at Al Rahma Sunday School is a deeply fulfilling way to give back to the community and help shape the next generation. Whether you're passionate about teaching or prefer working behind the scenes, your time and dedication can make a lasting difference. Join a team committed to nurturing young minds and strengthening their connection to faith.</p>
|
|
<p class="mb-4">As a volunteer teacher or teacher assistant, you'll have the opportunity to inspire, educate, and guide children on their spiritual journey. Teachers play a vital role in helping students understand the Quran, Islamic values, and the Arabic language in a warm and engaging classroom environment. Teacher assistants support instruction, help manage classroom activities, and provide one-on-one assistance to students when needed. Whether leading the class or lending a helping hand, your commitment can spark a lifelong love for learning and faith in the hearts of our students.</p>
|
|
<p class="mb-4">Administrative volunteers are essential to the success of our school. From organizing materials and managing communications to helping coordinate school events and logistics, your work ensures a smooth and efficient learning experience for students and teachers alike. If you enjoy structured tasks, planning, or simply being helpful in a quiet but powerful way, this role is perfect for you.</p>
|
|
<a class="btn btn-success py-3 px-5 mt-3" href="/register">Get Started Now<i class="fa fa-arrow-right ms-2"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Column - Fixed with correct path -->
|
|
<div class="col-lg-6 image-column pe-3">
|
|
<div class="position-relative h-100 w-100">
|
|
<img class="w-100 h-100 rounded-end" src="images/call-to-action.jpg" style="object-fit: cover;" alt="..." onerror="this.onerror=null; this.src='public/images/call-to-action.jpg';">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Call To Action End -->
|
|
|
|
<!-- Classes Start -->
|
|
<div class="container-xxl py-2 content-section">
|
|
<div class="container">
|
|
<div class="row bg-light squared position-relative align-items-center">
|
|
<!-- Text Column -->
|
|
<div class="col-lg-6">
|
|
<div class="h-100 d-flex flex-column justify-content-center p-5">
|
|
<h1 class="mb-4">Our Curriculum and Grade Structure</h1>
|
|
<p>Our program spans nine structured grade levels, each building upon the previous year's knowledge to ensure a solid foundation in faith, character, and Islamic learning.</p>
|
|
<p>Upon completing the 9th grade, students transition into our three-year Youth Program, which emphasizes deeper community engagement, personal development and practical application of Islamic principles. Participation in the Youth Program requires students to be at least 15 years old, ensuring they are mature enough to benefit from its advanced content.</p>
|
|
<p>Starting this academic year, children must be at least 6 years old by 12-31-2025 to enroll in Grade 1. For younger learners, we are pleased to offer our newly established Kindergarten class, welcoming children who are at least 5 years old by 12-31-2025. This early education program is designed to introduce young minds to the basics of Islamic teachings in a warm, age-appropriate environment.</p>
|
|
<a class="btn btn-success py-3 px-5 mt-3" href="/register">Get Started Now<i class="fa fa-arrow-right ms-2"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Images Column -->
|
|
<div class="col-lg-6 text-start">
|
|
<div class="image-container">
|
|
<img src="images/12.jpeg" class="overlapping-image image1" alt="Image 1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<!-- Classes End -->
|
|
|
|
<!-- Footer Start -->
|
|
<?php include(__DIR__ . '/partials/footer.php'); ?>
|
|
<!-- Footer End -->
|
|
|
|
<!-- Back to Top -->
|
|
<a href="#" class="btn btn-lg btn-success btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
|
|
|
|
<!-- JavaScript Libraries -->
|
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
// Back to top button
|
|
$(document).ready(function() {
|
|
$(window).scroll(function() {
|
|
if ($(this).scrollTop() > 100) {
|
|
$('.back-to-top').fadeIn();
|
|
} else {
|
|
$('.back-to-top').fadeOut();
|
|
}
|
|
});
|
|
|
|
$('.back-to-top').click(function() {
|
|
$("html, body").animate({
|
|
scrollTop: 0
|
|
}, 600);
|
|
return false;
|
|
});
|
|
|
|
// Hide spinner when page is loaded
|
|
$(window).on('load', function() {
|
|
$('#spinner').fadeOut();
|
|
});
|
|
|
|
// Force display all text content
|
|
setTimeout(function() {
|
|
$('h1, h2, h3, h4, h5, h6, p').css({
|
|
'opacity': '1',
|
|
'visibility': 'visible',
|
|
'display': 'block'
|
|
});
|
|
|
|
// Ensure footer is visible
|
|
$('.site-footer').css({
|
|
'display': 'block',
|
|
'visibility': 'visible',
|
|
'opacity': '1'
|
|
});
|
|
}, 100);
|
|
});
|
|
</script>
|
|
<script>
|
|
window.addEventListener('load', function() {
|
|
// Hide the spinner
|
|
const spinner = document.getElementById('spinner');
|
|
spinner.style.opacity = '0';
|
|
|
|
// Remove spinner from DOM after fade out
|
|
setTimeout(function() {
|
|
spinner.style.display = 'none';
|
|
|
|
// Force show all content
|
|
document.querySelectorAll('.content-section, h1, h2, h3, h4, h5, h6, p').forEach(function(el) {
|
|
el.style.opacity = '1';
|
|
el.style.visibility = 'visible';
|
|
el.style.display = 'block';
|
|
});
|
|
}, 500);
|
|
});
|
|
|
|
// Fallback in case load event doesn't fire
|
|
setTimeout(function() {
|
|
const spinner = document.getElementById('spinner');
|
|
if (spinner && spinner.style.display !== 'none') {
|
|
spinner.style.display = 'none';
|
|
|
|
document.querySelectorAll('.content-section, h1, h2, h3, h4, h5, h6, p').forEach(function(el) {
|
|
el.style.opacity = '1';
|
|
el.style.visibility = 'visible';
|
|
el.style.display = 'block';
|
|
});
|
|
}
|
|
}, 3000);
|
|
</script>
|
|
<script>
|
|
// Check if image loaded successfully
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const img = document.querySelector('.image-column img');
|
|
if (img) {
|
|
img.onload = function() {
|
|
console.log('Image loaded successfully');
|
|
};
|
|
|
|
img.onerror = function() {
|
|
console.error('Image failed to load:', img.src);
|
|
// Create a fallback div with background color
|
|
const fallback = document.createElement('div');
|
|
fallback.className = 'w-100 h-100 d-flex align-items-center justify-content-center';
|
|
fallback.style.backgroundColor = '#e9ecef';
|
|
fallback.innerHTML = '<div class="text-center p-3"><i class="fas fa-image fa-3x mb-3 text-secondary"></i><p class="text-muted">Image not found: call-to-action.jpg</p></div>';
|
|
|
|
img.parentNode.appendChild(fallback);
|
|
img.style.display = 'none';
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|