File size: 9,698 Bytes
95927c5 | 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 | <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>بورتسودان تقرأ - الرئيسية</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="hero-section bg-primary text-white py-5">
<div class="container">
<div class="row align-items-center min-vh-50">
<div class="col-lg-6">
<h1 class="display-4 fw-bold mb-4">بورتسودان تقرأ: حيث يبدأ نور المعرفة</h1>
<p class="lead mb-4">مبادرة مجتمعية تهدف لنشر ثقافة القراءة وإنشاء المكتبات في جميع أنحاء بورتسودان</p>
<a href="libraries.html" class="btn btn-light btn-lg px-4">اكتشف المكتبات</a>
</div>
<div class="col-lg-6">
<img src="http://static.photos/education/640x360/1" alt="مكتبة" class="img-fluid rounded shadow">
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<h2 class="display-5 fw-bold mb-4">عن المبادرة</h2>
<p class="lead text-muted mb-5">
مبادرة "بورتسودان تقرأ" تهدف إلى تعزيز ثقافة القراءة والمعرفة بين جميع فئات المجتمع في بورتسودان،
من خلال إنشاء مكتبات مجهزة بالكتب المتنوعة والمناسبة لجميع الأعمار.
</p>
<div class="row text-start">
<div class="col-md-6">
<ul class="list-unstyled">
<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>إنشاء 10 مكتبات في مختلف أحياء المدينة</li>
<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>توفير أكثر من 50,000 كتاب متنوع</li>
<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>تنظيم ورش قراءة وجلسات حوارية أسبوعية</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-unstyled">
<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>تدريب 100 متطوع على إدارة المكتبات</li>
<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>توفير كتب بلغة برايل للمكفوفين</li>
<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>إنشاء مكتبات رقمية مجانية</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Support Section -->
<section id="support" class="py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<h2 class="display-5 fw-bold mb-4">كيف تدعم المبادرة؟</h2>
<p class="lead text-muted mb-5">يمكنك دعم المبادرة بعدة طرق تساعدنا في تحقيق أهدافنا</p>
<div class="row mb-5">
<div class="col-md-4 mb-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center p-4">
<i class="fas fa-money-bill-wave fa-3x text-primary mb-3"></i>
<h5 class="card-title">دعم مالي</h5>
<p class="card-text">تبرع مالي يساعد في شراء الكتب وتجهيز المكتبات</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center p-4">
<i class="fas fa-book fa-3x text-primary mb-3"></i>
<h5 class="card-title">تبرع بالكتب</h5>
<p class="card-text">تبرع بكتبك المستعملة أو الجديدة لتوسعة رصيد المكتبات</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card border-0 shadow-sm h-100">
<div class="card-body text-center p-4">
<i class="fas fa-hands-helping fa-3x text-primary mb-3"></i>
<h5 class="card-title">التطوع</h5>
<p class="card-text">انضم إلينا كمتطوع في إدارة المكتبات أو تنظيم الفعاليات</p>
</div>
</div>
</div>
</div>
<!-- Donation Form -->
<div id="donate" class="bg-white p-5 rounded shadow-sm">
<h3 class="mb-4">نموذج التبرع</h3>
<form>
<div class="row">
<div class="col-md-6 mb-3">
<input type="text" class="form-control" placeholder="الاسم الكامل" required>
</div>
<div class="col-md-6 mb-3">
<input type="email" class="form-control" placeholder="البريد الإلكتروني" required>
</div>
<div class="col-md-6 mb-3">
<select class="form-select" required>
<option value="">نوع التبرع</option>
<option value="financial">دعم مالي</option>
<option value="books">تبرع بالكتب</option>
<option value="volunteer">التطوع</option>
</select>
</div>
<div class="col-md-6 mb-3">
<input type="number" class="form-control" placeholder="المبلغ (إذا كان تبرعاً مالياً)">
</div>
<div class="col-12 mb-3">
<textarea class="form-control" rows="4" placeholder="ملاحظات إضافية"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary btn-lg w-100">إرسال التبرع</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<h2 class="display-5 fw-bold mb-4">اتصل بنا</h2>
<p class="lead text-muted mb-5">نحن هنا للإجابة على استفساراتك واستقبال مقترحاتك</p>
<div class="row">
<div class="col-md-4 mb-3">
<i class="fas fa-phone fa-2x text-primary mb-2"></i>
<h5>الهاتف</h5>
<p>+249 123 456 789</p>
</div>
<div class="col-md-4 mb-3">
<i class="fas fa-envelope fa-2x text-primary mb-2"></i>
<h5>البريد الإلكتروني</h5>
<p>info@portsudanreads.sd</p>
</div>
<div class="col-md-4 mb-3">
<i class="fas fa-map-marker-alt fa-2x text-primary mb-2"></i>
<h5>العنوان</h5>
<p>بورتسودان، السودان</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html> |