Spaces:

Quioyy
/

undefined

Running

undefined / libraries.html

Generate the complete, modular front-end code for the "Port Sudan Reads Initiative" website and its associated **Admin Dashboard Interface**.

95927c5 verified 7 months ago

raw

history blame contribute delete

6.96 kB

	<!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="bg-primary text-white py-5">
	<div class="container">
	<h1 class="display-4 fw-bold text-center">مكتباتنا</h1>
	<p class="lead text-center mb-0">اكتشف المكتبات التي أنشأتها المبادرة في مختلف أنحاء بورتسودان</p>
	</div>
	</header>

	<!-- Libraries Section -->
	<section class="py-5">
	<div class="container">
	<div class="row">
	<!-- Library 1 -->
	<div class="col-lg-4 col-md-6 mb-4">
	<div class="card h-100 shadow-sm">
	<img src="http://static.photos/education/400x300/1" class="card-img-top" alt="مكتبة الحي الأول">
	<div class="card-body">
	<h5 class="card-title">مكتبة الحي الأول</h5>
	<p class="card-text">مكتبة مجتمعية في قلب الحي الأول، تحتوي على أكثر من 5000 كتاب متنوع لجميع الأعمار.</p>
	<div class="d-flex justify-content-between align-items-center">
	<span class="badge bg-success">نشط</span>
	<small class="text-muted">أنشئت: 2023</small>
	</div>
	</div>
	</div>
	</div>
	<!-- Library 2 -->
	<div class="col-lg-4 col-md-6 mb-4">
	<div class="card h-100 shadow-sm">
	<img src="http://static.photos/education/400x300/2" class="card-img-top" alt="مكتبة الميناء">
	<div class="card-body">
	<h5 class="card-title">مكتبة الميناء</h5>
	<p class="card-text">مكتبة حديثة بالقرب من منطقة الميناء، تركز على الكتب التقنية والبحوث البحرية.</p>
	<div class="d-flex justify-content-between align-items-center">
	<span class="badge bg-success">نشط</span>
	<small class="text-muted">أنشئت: 2023</small>
	</div>
	</div>
	</div>
	</div>
	<!-- Library 3 -->
	<div class="col-lg-4 col-md-6 mb-4">
	<div class="card h-100 shadow-sm">
	<img src="http://static.photos/education/400x300/3" class="card-img-top" alt="مكتبة الضاحية">
	<div class="card-body">
	<h5 class="card-title">مكتبة الضاحية</h5>
	<p class="card-text">مكتبة متخصصة في الأدب والعلوم الإنسانية، تقع في منطقة الضاحية السكنية.</p>
	<div class="d-flex justify-content-between align-items-center">
	<span class="badge bg-warning">قيد الإنشاء</span>
	<small class="text-muted">متوقع: 2024</small>
	</div>
	</div>
	</div>
	</div>
	<!-- Library 4 -->
	<div class="col-lg-4 col-md-6 mb-4">
	<div class="card h-100 shadow-sm">
	<img src="http://static.photos/education/400x300/4" class="card-img-top" alt="مكتبة الطلاب">
	<div class="card-body">
	<h5 class="card-title">مكتبة الطلاب</h5>
	<p class="card-text">مكتبة مجهزة خصيصاً لطلاب المدارس والجامعات، تحتوي على مراجع دراسية متخصصة.</p>
	<div class="d-flex justify-content-between align-items-center">
	<span class="badge bg-success">نشط</span>
	<small class="text-muted">أنشئت: 2022</small>
	</div>
	</div>
	</div>
	</div>
	<!-- Library 5 -->
	<div class="col-lg-4 col-md-6 mb-4">
	<div class="card h-100 shadow-sm">
	<img src="http://static.photos/education/400x300/5" class="card-img-top" alt="مكتبة الأطفال">
	<div class="card-body">
	<h5 class="card-title">مكتبة الأطفال</h5>
	<p class="card-text">مكتبة ملونة ومجهزة خصيصاً للأطفال، تحتوي على كتب تعليمية وقصص مصورة.</p>
	<div class="d-flex justify-content-between align-items-center">
	<span class="badge bg-success">نشط</span>
	<small class="text-muted">أنشئت: 2023</small>
	</div>
	</div>
	</div>
	</div>
	<!-- Library 6 -->
	<div class="col-lg-4 col-md-6 mb-4">
	<div class="card h-100 shadow-sm">
	<img src="http://static.photos/education/400x300/6" class="card-img-top" alt="مكتبة الرقمية">
	<div class="card-body">
	<h5 class="card-title">مكتبة الرقمية</h5>
	<p class="card-text">منصة رقمية تحتوي على آلاف الكتب الإلكترونية المتاحة للجميع مجاناً.</p>
	<div class="d-flex justify-content-between align-items-center">
	<span class="badge bg-info">رقمية</span>
	<small class="text-muted">أنشئت: 2023</small>
	</div>
	</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>