File size: 4,552 Bytes
0ee7c7c |
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 |
<!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>
<style>
body {
font-family: sans-serif; /* Use a suitable Arabic font if needed */
background-color: #e0e0f0; /* Light blue background */
margin: 0;
padding: 0;
}
.container {
max-width: 400px; /* Adjust as needed for mobile responsiveness */
margin: 20px auto;
padding: 10px;
background-color: #d0d0e8; /* Slightly darker blue */
border-radius: 10px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.header button {
background-color: transparent;
border: none;
font-size: 24px;
cursor: pointer;
}
.header h1 {
text-align: center;
flex-grow: 1;
font-size: 1.2em; /* Adjust font size */
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns */
grid-gap: 10px; /* Spacing between items */
}
.grid-item {
text-align: center;
}
.grid-item img {
width: 80px; /* Adjust image size */
height: 80px;
border-radius: 50%; /* Make images circular */
object-fit: cover; /* Important: Keeps aspect ratio and covers the area */
border: 2px solid #fff; /* Optional: Add a white border */
}
.grid-item p {
margin-top: 5px;
font-size: 0.8em; /* Smaller font size for names */
white-space: nowrap; /* Prevents names from wrapping */
overflow: hidden; /* Hides overflowing text */
text-overflow: ellipsis; /* Adds "..." for long names */
width: 80px; /* Matches the image width */
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<button>←</button> <!-- Back arrow -->
<h1>طريقك نحو المعرفة والتفوق</h1>
<button>⌂</button> <!-- Home icon -->
</div>
<div class="grid-container">
<div class="grid-item">
<a href="index.html">
<img src="self_learning.jpg" alt="القديس أوغسطينوس">
</a>
<p>القديس أوغسطينوس</p>
</div>
<div class="grid-item">
<a href="https://aistudio.google.com/prompts/new_chat">
<img src="massinissa.jpg" alt="ماسينسا">
<p>ماسينسا</p>
</a>
</div>
<div class="grid-item">
<img src="dihya.jpg" alt="الملكة ديهيا">
<p>الملكة (Dihya)</p>
</div>
<div class="grid-item">
<img src="jugurtha.jpg" alt="يوغرتن">
<p>يوغرتن</p>
</div>
<div class="grid-item">
<img src="apuleius.jpg" alt="بوبا الثاني">
<p>بوبا الثاني</p>
</div>
<div class="grid-item">
<img src="tariq.jpg" alt="طارق بن زياد">
<p>طارق بن زياد</p>
</div>
<div class="grid-item">
<img src="lucius_apuleius.jpg" alt="لوشيوس أبوليوس">
<p>لوشيوس أبوليوس</p>
</div>
<div class="grid-item">
<img src="yusuf_ibn_tashfin.jpg" alt="يوسف بن تاشفين">
<p>يوسف بن تاشفين</p>
</div>
<div class="grid-item">
<img src="mokhtar_soussi.jpg" alt="المختار السوسي">
<p>المختار السوسي</p>
</div>
<div class="grid-item">
<img src="al_zahrawi.jpg" alt="أبو القاسم الزهراوي">
<p>أبو القاسم الزهراوي</p>
</div>
<div class="grid-item">
<img src="ibn_battuta.jpg" alt="ابن بطوطة">
<p>ابن بطوطة</p>
</div>
</div>
</div>
</body>
</html> |