<button class="mobile-menu-btn" id="mobileMenuBtn">
<i class="fas fa-bars"></i>
</button>
<nav id="mainNav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#early-life">Early Life</a></li>
<li><a href="#karbala">Karbala & Ashura</a></li>
<li><a href="#principles">Principles</a></li>
<li><a href="#history">History</a></li>
<li><a href="#aftermath">Aftermath</a></li>
<li><a href="#lessons">Lessons</a></li>
<li><a href="#commemoration">Commemoration</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<h1>Imam Hussain (AS) Knowledge Website</h1>
<p>Presented by <strong>IMM HUSSAIN TROOP</strong> - Exploring the life, sacrifice, and eternal message of Imam Hussain (AS) and the event of Karbala</p>
<a href="#early-life" class="cta-button">Explore History</a>
</div>
</section>
<!-- Main Content -->
<main>
<!-- Early Life Section -->
<section id="early-life">
<div class="container">
<div class="section-title">
<h2>Early Life of Imam Hussain</h2>
</div>
<div class="content-grid">
<div class="content-card">
<div class="card-header">
<h3>Birth & Family</h3>
</div>
<div class="card-body">
<p>Imam Hussain (AS) was born on the 3rd of Sha'ban, 4 AH (626 CE) in Medina. He was the son of Imam Ali (AS) and Fatimah (SA), the daughter of Prophet Muhammad (PBUH).</p>
<p>He grew up in the household of prophethood, surrounded by divine knowledge and moral excellence.</p>
</div>
</div>
<div class="content-card">
<div class="card-header">
<h3>Upbringing & Teachings</h3>
</div>
<div class="card-body">
<p>Imam Hussain (AS) was raised under the direct guidance of his grandfather, Prophet Muhammad (PBUH), who had immense love for him.</p>
<p>He learned the values of justice, compassion, and truth from an early age, which shaped his character and future stance against tyranny.</p>
</div>
</div>
<div class="content-card">
<div class="card-header">
<h3>Historical Context</h3>
</div>
<div class="card-body">
<p>The political and social situation after the Prophet's passing was complex, with challenges to the rightful leadership of the Ahlul Bayt (AS).</p>
<p>Imam Hussain (AS) lived through the caliphates of Abu Bakr, Umar, Uthman, and witnessed the events that led to the Battle of Siffin and the martyrdom of his father, Imam Ali (AS).</p>
</div>
</div>
</div>
</div>
</section>
<!-- Karbala & Ashura Section -->
<section id="karbala">
<div class="container">
<div class="section-title">
<h2>Karbala & Ashura</h2>
</div>
<div class="content-grid">
<div class="content-card">
<div class="card-header">
<h3>Journey to Karbala</h3>
</div>
<div class="card-body">
<p>Imam Hussain (AS) left Medina for Mecca and then embarked on his journey to Kufa, ultimately arriving in Karbala on the 2nd of Muharram, 61 AH (680 CE).</p>
<p>He was accompanied by his family members and loyal companions, totaling approximately 72 individuals.</p>
</div>
</div>
<div class="content-card">
<div class="card-header">
<h3>Key Figures</h3>
</div>
<div class="card-body">
<ul>
<li>Imam Hussain (AS) - The leader of the uprising</li>
<li>Abbas ibn Ali (AS) - Standard bearer and brother</li>
<li>Ali Akbar ibn Hussain (AS) - Son of Imam Hussain</li>
<li>Zainab bint Ali (AS) - Sister of Imam Hussain</li>
<li>Habib ibn Muzahir - Loyal companion</li>
</ul>
</div>
</div>
<div class="content-card">
<div class="card-header">
<h3>Event of Ashura</h3>
</div>
<div class="card-body">
<p>On the 10th of Muharram, 61 AH, Imam Hussain (AS) and his companions were martyred after a day of battle and thirst.</p>
<p>The martyrdom of Imam Hussain (AS) became a symbol of resistance against oppression and a catalyst for change throughout history.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Principles & Values Section -->
<section id="principles">
<div class="container">
<div class="section-title">
<h2>Principles & Values</h2>
</div>
<div class="principles-grid">
<div class="principle-item">
<div class="principle-icon">
<i class="fas fa-balance-scale"></i>
</div>
<h4>Justice</h4>
<p>Standing against tyranny and oppression</p>
</div>
<div class="principle-item">
<div class="principle-icon">
<i class="fas fa-heart"></i>
</div>
<h4>Sacrifice</h4>
<p>Giving everything for truth and righteousness</p>
</div>
<div class="principle-item">
<div class="principle-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h4>Truth</h4>
<p>Upholding honesty and integrity at all costs</p>
</div>
<div class="principle-item">
<div class="principle-icon">
<i class="fas fa-hourglass-half"></i>
</div>
<h4>Patience</h4>
<p>Perseverance in the face of adversity</p>
</div>
<div class="principle-item">
<div class="principle-icon">
<i class="fas fa-dove"></i>
</div>
<h4>Freedom</h4>
<p>Liberation from all forms of subjugation</p>
</div>
<div class="principle-item">
<div class="principle-icon">
<i class="fas fa-pray"></i>
</div>
<h4>Faith</h4>
<p>Unwavering belief in divine purpose</p>
</div>
</div>
</div>
</section>
<!-- History Section -->
<section id="history">
<div class="container">
<div class="section-title">
<h2>History of Ashura Martyrs</h2>
</div>
<div class="history-list">
<div class="history-item">
<h4>Ali Akbar ibn Hussain</h4>
<p>The son of Imam Hussain who resembled the Prophet Muhammad (PBUH) in appearance and character. He was among the first to be martyred on Ashura.</p>
</div>
<div class="history-item">
<h4>Abbas ibn Ali (Aba Abdullah)</h4>
<p>The standard bearer and half-brother of Imam Hussain. Known for his bravery and loyalty, he was martyred while attempting to fetch water for the children.</p>
</div>
<div class="history-item">
<h4>Muslim ibn Awsaja</h4>
<p>A loyal companion from the Ansar of Medina who pledged allegiance to Imam Hussain and was martyred defending him on Ashura.</p>
</div>
<div class="history-item">
<h4>Habib ibn Muzahir</h4>
<p>A close companion of Imam Hussain who was known for his poetry and loyalty. He was martyred while fighting bravely on Ashura.</p>
</div>
<div class="history-item">
<h4>Maitham al-Tammar</h4>
<p>A companion of Imam Ali (AS) who predicted the events of Karbala. He was martyred before Ashura for supporting the Ahlul Bayt.</p>
</div>
<div class="history-item">
<h4>Abdullah ibn Hussain</h4>
<p>The infant son of Imam Hussain who was martyred when an arrow struck him while in his father's arms on Ashura.</p>
</div>
<div class="history-item">
<h4>Muslim ibn Aqeel</h4>
<p>The cousin of Imam Hussain who was sent to Kufa to assess the situation. He was betrayed and martyred before the events of Karbala.</p>
</div>
<div class="history-item">
<h4>Qais ibn Musahar</h4>
<p>The messenger sent by Muslim ibn Aqeel to Imam Hussain with news from Kufa. He was captured and martyred by Yazid's forces.</p>
</div>
</div>
</div>
</section>
<!-- Aftermath Section -->
<section id="aftermath">
<div class="container">
<div class="section-title">
<h2>Aftermath of Karbala</h2>
</div>
<div class="aftermath-content">
<div class="aftermath-item">
<h3>Captivity</h3>
<p>After the martyrdom of Imam Hussain (AS), the surviving family members including women and children were taken as captives to Kufa and then to Damascus.</p>
<p>They were paraded through the streets, yet they maintained their dignity and continued to spread the message of Karbala.</p>
</div>
<div class="aftermath-item">
<h3>Sermons</h3>
<p>Lady Zainab (AS) and Imam Zain al-Abidin (AS) delivered powerful sermons in the courts of Ibn Ziyad and Yazid that exposed the truth of Karbala.</p>
<p>These sermons shook the foundations of the Umayyad rule and awakened the conscience of the people.</p>
</div>
<div class="aftermath-item">
<h3>Survival of the Message</h3>
<p>Despite attempts to suppress the message of Karbala, it spread rapidly across the Muslim world.</p>
<p>The sacrifice of Imam Hussain (AS) became a beacon of hope and resistance for all oppressed people throughout history.</p>
</div>
</div>
</div>
</section>
<!-- Lessons Section -->
<section id="lessons">
<div class="container">
<div class="section-title">
<h2>Lessons from Karbala</h2>
</div>
<div class="lessons-container">
<div class="lesson-category">
<h3>Moral Lessons</h3>
<ul>
<li>Standing for truth even when alone</li>
<li>Sacrificing personal comfort for principles</li>
<li>Maintaining dignity in the face of adversity</li>
<li>Protecting the weak and vulnerable</li>
</ul>
</div>
<div class="lesson-category">
<h3>Spiritual Lessons</h3>
<ul>
<li>Complete trust in Allah (Tawakkul)</li>
<li>Prayer as a source of strength</li>
<li>Patience (Sabr) in difficult times</li>
<li>Spiritual resilience against materialism</li>
</ul>
</div>
<div class="lesson-category">
<h3>Social & Political Lessons</h3>
<ul>
<li>Resisting unjust rulers</li>
<li>Unity in the face of oppression</li>
<li>The power of peaceful resistance</li>
<li>Speaking truth to power</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Commemoration Section -->
<section id="commemoration">
<div class="container">
<div class="section-title">
<h2>Commemoration & Arba'een</h2>
</div>
<div class="content-grid">
<div class="content-card">
<div class="card-header">
<h3>Majalis & Mourning</h3>
</div>
<div class="card-body">
<p>Commemoration gatherings (Majalis) are held worldwide to remember the martyrdom of Imam Hussain (AS) and his companions.</p>
<p>These gatherings include recitations of elegies (Nohas), lectures about the event of Karbala, and expressions of grief.</p>
</div>
</div>
<div class="content-card">
<div class="card-header">
<h3>Ashura Rituals</h3>
</div>
<div class="card-body">
<ul>
<li>Processions and mourning rallies</li>
<li>Reenactments of the events of Karbala</li>
<li>Charity and feeding of others (Nazr)</li>
<li>Recitation of Ziyarat Ashura</li>
<li>Blood donation drives</li>
</ul>
</div>
</div>
<div class="content-card">
<div class="card-header">
<h3>Arba'een Pilgrimage</h3>
</div>
<div class="card-body">
<p>Arba'een marks 40 days after Ashura and commemorates the martyrdom of Imam Hussain (AS).</p>
<p>Millions of pilgrims walk to Karbala annually for the world's largest peaceful gathering, demonstrating unity and sacrifice.</p>
<p>The Arba'een walk has become a global movement spreading the message of Imam Hussain (AS).</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<div class="footer-logo">
<div class="footer-logo-circle">
<div class="footer-logo-text">
<span class="line1">IMAM HUSSAIN</span>
<span class="line2">TROOP</span>
</div>
</div>
<div>
<h3>IMAM HUSSAIN TROOP</h3>
<p>Dedicated to spreading the message of Imam Hussain (AS)</p>
</div>
</div>
<p class="arabic-text">السلام عليك يا أبا عبد الله الحسين</p>
<p>A comprehensive resource about the life, principles, and legacy of Imam Hussain ibn Ali (AS) and the eternal message of Karbala.</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="#home">Home Page</a></li>
<li><a href="#early-life">Early Life</a></li>
<li><a href="#karbala">Karbala & Ashura</a></li>
<li><a href="#principles">Principles & Values</a></li>
<li><a href="#history">History of Martyrs</a></li>
<li><a href="#aftermath">Aftermath</a></li>
<li><a href="#lessons">Lessons from Karbala</a></li>
<li><a href="#commemoration">Commemoration</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Additional Resources</h3>
<ul>
<li><a href="#captivity">Period of Captivity</a></li>
<li><a href="#sermons">Sermons of Imam Hussain</a></li>
<li><a href="#arbaeen">Arba'een Pilgrimage</a></li>
<li><a href="#poetry">Ashura Poetry</a></li>
<li><a href="#global-message">Global Movement</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2026 IMM HUSSAIN TROOP. All rights reserved.</p>
<p>This website is dedicated to spreading the eternal message of Imam Hussain (AS).</p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<a href="#home" class="back-to-top" id="backToTop">
<i class="fas fa-arrow-up"></i>
</a>
<script>
// Mobile Menu Toggle
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mainNav = document.getElementById('mainNav');
mobileMenuBtn.addEventListener('click', () => {
mainNav.classList.toggle('active');
mobileMenuBtn.innerHTML = mainNav.classList.contains('active')
? '<i class="fas fa-times"></i>'
: '<i class="fas fa-bars"></i>';
});
// Close mobile menu when clicking on a link
const navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link => {
link.addEventListener('click', () => {
mainNav.classList.remove('active');
mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
});
});
// Back to Top Button
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTop.classList.add('active');
} else {
backToTop.classList.remove('active');
}
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.You're absolutely right! I apologize for misunderstanding. You gave me the actual logo text "IMM HUSSAIN TROOP" and I should have used exactly that text, not creating my own version. Let me fix this immediately.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imam Hussain (AS) Knowledge Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;600;700&family=Amiri:wght@400;700&family=Poppins:wght@700;800&display=swap" rel="stylesheet">
<style>
/* CSS Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #8B0000;
--secondary-color: #2C3E50;
--accent-color: #D4AF37;
--light-color: #F8F8F8;
--dark-color: #1A1A1A;
--text-color: #333;
--text-light: #666;
--font-main: 'Noto Sans', sans-serif;
--font-arabic: 'Amiri', serif;
--font-logo: 'Poppins', sans-serif;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--border-radius: 8px;
--transition: all 0.3s ease;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-main);
color: var(--text-color);
line-height: 1.6;
background-color: var(--light-color);
}
h1, h2, h3, h4 {
font-weight: 700;
line-height: 1.3;
margin-bottom: 1rem;
color: var(--secondary-color);
}
h1 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
h2 {
font-size: 2rem;
position: relative;
padding-bottom: 0.5rem;
}
h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 4px;
background-color: var(--accent-color);
}
h3 {
font-size: 1.5rem;
}
p {
margin-bottom: 1.2rem;
}
a {
text-decoration: none;
color: var(--primary-color);
transition: var(--transition);
}
a:hover {
color: var(--accent-color);
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.arabic-text {
font-family: var(--font-arabic);
font-size: 1.2rem;
direction: rtl;
}
/* Header Styles */
header {
background-color: var(--dark-color);
color: white;
padding: 1.5rem 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--shadow);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Your Exact Logo Styling - IMM HUSSAIN TROOP */
.logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo-icon {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo-circle {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), #5a0000);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 3px solid var(--accent-color);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
overflow: hidden;
}
.logo-circle::before {
content: '';
position: absolute;
width: 90px;
height: 90px;
border: 2px solid rgba(212, 175, 55, 0.6);
border-radius: 50%;
animation: pulse 3s infinite;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.15); opacity: 0.3; }
100% { transform: scale(1); opacity: 0.8; }
}
.logo-text-main {
font-family: var(--font-logo);
font-size: 1.1rem;
font-weight: 800;
color: white;
text-align: center;
line-height: 1.1;
padding: 5px;
text-transform: uppercase;
}
.logo-text-main .line1 {
font-size: 1.3rem;
letter-spacing: 1px;
display: block;
margin-bottom: 2px;
}
.logo-text-main .line2 {
font-size: 0.9rem;
color: var(--accent-color);
display: block;
font-weight: 700;
letter-spacing: 2px;
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-title {
font-family: var(--font-logo);
font-size: 1.8rem;
font-weight: 800;
color: white;
line-height: 1;
margin-bottom: 3px;
}
.logo-subtitle {
font-size: 0.9rem;
color: #ccc;
font-weight: 400;
}
.logo-title span {
color: var(--accent-color);
}
nav ul {
display: flex;
list-style: none;
gap: 1.5rem;
}
nav a {
color: white;
font-weight: 600;
padding: 0.5rem 0;
position: relative;
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent-color);
transition: var(--transition);
}
nav a:hover::after {
width: 100%;
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1614548536382-4d5b8c8d0b2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
color: white;
text-align: center;
padding: 6rem 0;
margin-bottom: 3rem;
}
.hero h1 {
color: white;
font-size: 3.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto 2rem;
color: #eee;
}
.hero h1::after {
display: none;
}
.cta-button {
display: inline-block;
background-color: var(--primary-color);
color: white;
padding: 0.8rem 2rem;
border-radius: var(--border-radius);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition);
border: 2px solid var(--primary-color);
}
.cta-button:hover {
background-color: transparent;
color: white;
border-color: white;
}
/* Main Content Sections */
section {
padding: 4rem 0;
}
section:nth-child(even) {
background-color: #f9f9f9;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title h2 {
display: inline-block;
}
.section-title h2::after {
left: 50%;
transform: translateX(-50%);
}
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.content-card {
background-color: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
height: 100%;
}
.content-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.card-header {
background-color: var(--primary-color);
color: white;
padding: 1.5rem;
text-align: center;
}
.card-body {
padding: 1.5rem;
}
.card-body ul {
list-style-position: inside;
margin-bottom: 1rem;
}
.card-body li {
margin-bottom: 0.5rem;
}
/* History Section Specific */
.history-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.history-item {
background-color: white;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
border-left: 4px solid var(--accent-color);
transition: var(--transition);
}
.history-item:hover {
transform: translateY(-5px);
}
.history-item h4 {
color: var(--primary-color);
margin-bottom: 0.5rem;
}
/* Principles Section */
.principles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.principle-item {
background-color: white;
padding: 1.5rem;
border-radius: var(--border-radius);
text-align: center;
box-shadow: var(--shadow);
border-top: 4px solid var(--accent-color);
}
.principle-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
/* Lessons Section */
.lessons-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.lesson-category {
background-color: white;
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.lesson-category h3 {
color: var(--primary-color);
border-bottom: 2px solid var(--accent-color);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
/* Aftermath Section */
.aftermath-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.aftermath-item {
background-color: white;
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.aftermath-item h3 {
color: var(--primary-color);
border-bottom: 2px solid var(--accent-color);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
/* Footer */
footer {
background-color: var(--dark-color);
color: white;
padding: 3rem 0 1.5rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
color: white;
margin-bottom: 1.5rem;
}
.footer-section h3::after {
background-color: var(--accent-color);
}
.footer-section ul {
list-style: none;
}
.footer-section li {
margin-bottom: 0.8rem;
}
.footer-section a {
color: #ccc;
}
.footer-section a:hover {
color: var(--accent-color);
padding-left: 5px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 1.5rem;
}
.footer-logo-circle {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), #5a0000);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--accent-color);
}
.footer-logo-text {
font-family: var(--font-logo);
font-size: 0.9rem;
font-weight: 800;
color: white;
text-align: center;
line-height: 1.1;
text-transform: uppercase;
}
.footer-logo-text .line1 {
font-size: 1rem;
display: block;
}
.footer-logo-text .line2 {
font-size: 0.7rem;
color: var(--accent-color);
display: block;
}
.copyright {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid #444;
color: #aaa;
font-size: 0.9rem;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background-color: var(--primary-color);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 999;
}
.back-to-top.active {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background-color: var(--accent-color);
transform: translateY(-5px);
}
/* Responsive Design */
@media (max-width: 992px) {
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 1.8rem;
}
.hero h1 {
font-size: 2.8rem;
}
.hero {
padding: 4rem 0;
}
.logo-title {
font-size: 1.5rem;
}
.logo-circle {
width: 70px;
height: 70px;
}
.logo-text-main {
font-size: 1rem;
}
.logo-text-main .line1 {
font-size: 1.1rem;
}
.logo-text-main .line2 {
font-size: 0.8rem;
}
}
@media (max-width: 768px) {
nav {
position: fixed;
top: 80px;
left: 0;
width: 100%;
background-color: var(--dark-color);
padding: 1rem 0;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: var(--transition);
box-shadow: var(--shadow);
}
nav.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
nav ul {
flex-direction: column;
align-items: center;
gap: 0;
}
nav li {
width: 100%;
text-align: center;
}
nav a {
display: block;
padding: 1rem;
border-bottom: 1px solid #444;
}
.mobile-menu-btn {
display: block;
}
.hero h1 {
font-size: 2.2rem;
}
.hero p {
font-size: 1rem;
}
section {
padding: 3rem 0;
}
.logo {
gap: 10px;
}
.logo-title {
font-size: 1.3rem;
}
.logo-subtitle {
font-size: 0.8rem;
}
}
@media (max-width: 576px) {
.container {
width: 95%;
padding: 0 15px;
}
.hero {
padding: 3rem 0;
}
.hero h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.6rem;
}
.content-grid {
grid-template-columns: 1fr;
}
.logo {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.logo-text {
margin-left: 0;
}
.logo-circle {
width: 60px;
height: 60px;
}
.logo-text-main {
font-size: 0.9rem;
}
.logo-text-main .line1 {
font-size: 1rem;
}
.logo-text-main .line2 {
font-size: 0.7rem;
}
}
</style>
</head>
<body>
<!-- Header and Navigation -->
<header>
<div class="container header-container">
<div class="logo">
<div class="logo-icon">
<div class="logo-circle">
<div class="logo-text-main">
<span class="line1">IMM HUSSAIN</span>
<span class="line2">TROOP</span>
</div>
</div>
</div>
<div class="logo-text">
<div class="logo-title">Imam <span>Hussain</span> (AS)</div>
<div class="logo-subtitle">Knowledge Portal</div>
</div>
</div>
<button class="mobile-menu-btn" id="mobileMenuBtn">
<i class="fas fa-bars"></i>
</button>
<nav id="mainNav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#early-life">Early Life</a></li>
<li><a href="#karbala">Karbala & Ashura</a></li>
<li><a href="#principles">Principles</a></li>
<li><a href="#history">History</a></li>
<li><a href="#aftermath">Aftermath</a></li>
<li><a href="#lessons">Lessons</a></li>
<li><a href="#commemoration">Commemoration</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<h1>Imam Hussain (AS) Knowledge Website</h1>
<p>Presented by <strong>IMM HUSSAIN TROOP</strong> - Exploring the life, sacrifice, and eternal message of Imam Hussain (AS) and the event of Karbala</p>
<a href="#early-life" class="cta-button">Explore History</a>
</div>
</section>
<!-- Main Content -->
<main>
<!-- Early Life Section -->
<section id="early-life">
<div class="container">
<div class="section-title">
<h2>Early Life of Imam Hussain</h2>
</div>
<div class="content-grid">
<div class="content-card">
<div class="card-header">
<h3>Birth & Family</h3>
</div>
<div class="card-body">
<p>Imam Hussain (AS) was born on the 3rd of Sha'ban, 4 AH (626 CE) in Medina. He was the son of Imam Ali (AS) and Fatimah (SA), the daughter of Prophet Muhammad (PBUH).</p>
<p>He grew up in the household of prophethood, surrounded by divine knowledge and moral excellence.</p>
</div>
</div>
<div class="content-card">
<div class="card-header">
<h3>Upbringing & Teachings</h3>
</div>
<div class="card-body">
<p>Imam Hussain (AS) was raised under the direct guidance of his grandfather, Prophet Muhammad (PBUH), who had immense love for him.</
Here's the corrected code with your exact logo text "IMM HUSSAIN TROOP":