File size: 7,705 Bytes
9447a32 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Us | Alif Moral School</title>
<link rel="stylesheet" href="style.css" />
<style>
body {
background: linear-gradient(135deg, #fdf6e3 0%, #f8f5ee 100%);
font-family: "Roboto", Arial, sans-serif;
color: #5a4321;
margin: 0;
padding: 0;
}
.dashboard-header {
background: #fffbe6;
padding: 0.7rem 0 0.7rem 2.2rem;
border-bottom: 1.5px solid #e6e6e6;
box-shadow: 0 2px 8px rgba(191, 161, 74, 0.07);
position: static;
z-index: 100;
}
.dashboard-brand {
display: flex;
align-items: center;
font-family: "Cairo", serif;
color: #bfa14a;
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 1px;
}
.dashboard-logo {
width: 38px;
height: 38px;
margin-right: 0.5rem;
vertical-align: middle;
}
.about-container {
max-width: 700px;
margin: 60px auto 40px auto;
background: #fffbe6;
border-radius: 18px;
box-shadow: 0 2px 16px rgba(191, 161, 74, 0.08);
padding: 36px 28px 28px 28px;
text-align: center;
}
.about-title {
font-family: "Cairo", serif;
color: #bfa14a;
font-size: 2.1rem;
margin-bottom: 1.2rem;
}
.about-card {
background: linear-gradient(135deg, #fffbe6 60%, #f8e9b7 100%);
border-radius: 18px;
padding: 32px 28px 22px 28px;
box-shadow: 0 4px 18px rgba(191, 161, 74, 0.13);
border: 2px solid #e6d89c;
margin: 0 auto;
max-width: 520px;
text-align: left;
font-size: 1.13rem;
color: #5a4321;
transition: transform 0.18s cubic-bezier(0.4, 1.3, 0.6, 1),
box-shadow 0.18s cubic-bezier(0.4, 1.3, 0.6, 1), border-color 0.18s;
position: relative;
overflow: hidden;
}
.about-card:hover {
transform: scale(1.025);
box-shadow: 0 8px 32px 0 rgba(191, 161, 74, 0.18);
border-color: #bfa14a;
}
.about-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
pointer-events: none;
box-shadow: 0 0 0 0 #bfa14a;
transition: box-shadow 0.3s cubic-bezier(0.4, 1.3, 0.6, 1);
}
.about-card:hover::after {
box-shadow: 0 0 16px 2px #bfa14a44;
}
.about-card h3 {
color: #7a5c2e;
font-family: "Cairo", serif;
margin-top: 0;
}
.about-card ul {
margin: 0 0 0 1.2em;
padding: 0;
color: #7a5c2e;
}
.about-card li {
margin-bottom: 0.5em;
}
@media (max-width: 700px) {
.about-container {
max-width: 98vw;
margin: 18vw 1vw 8vw 1vw;
padding: 12px 4vw 10px 4vw;
}
.about-title {
font-size: 1.25rem;
margin-bottom: 0.7rem;
}
.about-card {
max-width: 99vw;
padding: 14px 4vw 10px 4vw;
font-size: 0.98rem;
}
.about-card h3 {
font-size: 1.08rem;
}
.about-card ul {
margin-left: 0.8em;
}
.about-card table td {
font-size: 0.98rem;
padding: 2px 4px;
}
}
</style>
</head>
<body>
<header class="dashboard-header">
<nav
class="dashboard-nav"
style="justify-content: flex-start; align-items: center"
>
<div class="dashboard-brand">
<img
src="https://img.icons8.com/color/48/000000/school-building.png"
alt="School Logo"
class="dashboard-logo"
/>
<span>Alif Moral School</span>
</div>
</nav>
</header>
<main>
<div class="about-container">
<div class="about-title">🕌 About Us – Alif Online Madrassa</div>
<div class="about-card">
<p>
Alif Online Madrassa is a faith-based educational platform committed
to nurturing the moral, spiritual, and intellectual development of
students across the globe. Rooted in Islamic values and guided by
prophetic teachings, our school offers a balanced blend of Qur’anic
education, character development, and essential academic learning —
all delivered online with care and excellence.
</p>
<p>
Our mission is to build a generation of confident Muslims who embody
Islamic principles in every aspect of life — from daily conduct to
critical thinking, from prayer to problem-solving.
</p>
<h3 style="color: #bfa14a; margin-top: 1.5em">🌟 Our Vision</h3>
<p style="font-style: italic; color: #7a5c2e">
"To nurture hearts with Imaan, minds with knowledge, and lives with
purpose — in service to Allah and society."
</p>
<h3 style="color: #bfa14a; margin-top: 1.5em">🎯 What We Offer</h3>
<ul style="margin-bottom: 1.2em">
<li>📘 Qur’anic Studies with tajweed and tafsir</li>
<li>🕋 Islamic Etiquette & Values for character-building</li>
<li>🧮 Academic Support in English, Math, and Science</li>
<li>🗣️ Arabic Language for understanding the Qur’an</li>
<li>
🧑🏫 Flexible Batches for children, youth, professionals, and elders
</li>
</ul>
<p>
We offer customized learning tracks including Hifdh programs,
Tajweed batches, weekend-only classes, and special schemes for Gulf,
European, and preschool time zones.
</p>
<h3 style="color: #bfa14a; margin-top: 1.5em">💎 Why Alif?</h3>
<ul style="margin-bottom: 1.2em">
<li>🎓 Trained Ustadhas and Ustadhs</li>
<li>🌍 Access from anywhere in the world</li>
<li>🧠 Spiritual + academic excellence</li>
<li>💻 Live classes with recorded backups</li>
<li>🕊️ Environment focused on Adab, Imaan, and Ilm</li>
</ul>
<h3 style="color: #bfa14a; margin-top: 1.5em">🌱 Our Core Values</h3>
<table
style="width: 100%; margin-bottom: 1.2em; border-collapse: collapse"
>
<tr>
<td>🌙 <b>Imaan</b></td>
<td>Centering Allah in learning and life</td>
</tr>
<tr>
<td>🫶 <b>Akhlaaq</b></td>
<td>Living with humility, respect, and kindness</td>
</tr>
<tr>
<td>📖 <b>Ilm</b></td>
<td>Seeking knowledge as a sacred journey</td>
</tr>
<tr>
<td>🌏 <b>Global Unity</b></td>
<td>Welcoming students from all walks of life</td>
</tr>
</table>
<p style="margin-top: 1.2em">
At Alif Online Madrassa, we don't just teach subjects — we shape
souls, guide hearts, and prepare students to succeed in this world
and the Hereafter.
</p>
</div>
</div>
</main>
</body>
</html>
|