Spaces:

Jaouadart
/

test

Running

App Files Files Community

test / code (10).html

Jaouadart

Upload 4 files

0ee7c7c verified 4 months ago

raw

history blame

4.55 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>
	<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>