File size: 5,967 Bytes
0ee7c7c 706f9f8 0ee7c7c 706f9f8 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 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 |
<!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: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #3f51b5; /* Main background color (dark blue) */
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
.container {
background-color: #fff; /* White container */
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 90%; /* Responsive width */
max-width: 400px; /* Maximum width */
text-align: center;
position: relative; /* For absolute positioning of back button */
}
.top-section{
background-color: #303f9f; /* Darker blue for the top section */
color: white;
padding: 25px;
border-radius: 15px 15px 0 0; /* Rounded top corners */
margin-bottom:20px;
}
.logo {
/* Replace with your logo image later */
width: 80px;
height: 80px;
background-image: url('logo.png'); /* Placeholder image */
background-size: cover;
margin: 0 auto 15px; /* Center the logo */
border-radius: 0%; /* Make logo circular if it is not*/
}
.title {
font-size: 2.5em;
font-weight: bold;
margin-bottom: 20px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Two columns */
grid-template-rows: repeat(3, auto); /* Three rows, auto height */
gap: 20px;
width: 100%;
}
.grid-item {
background-color: #eee; /* Light gray background, will be overwritten by image */
border-radius: 10px;
padding: 40px 20px; /* Padding inside each box */
display: flex;
justify-content: center;
align-items: center;
font-size: 1em;
cursor: pointer;
transition: transform 0.2s ease;
position: relative;/*for text positioning*/
overflow: hidden; /* Hide overflowing content (the image) */
}
.grid-item:hover {
transform: scale(1.05);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover; /* Cover the entire box */
position: absolute; /*Position over text*/
top: 0;
left: 0;
z-index: 0; /*Behind the text*/
}
.grid-item-text{
position: relative; /* Bring text in front of image */
z-index: 1; /* Bring text to the front */
color: #333; /* Or any color that stands out on the image */
font-weight: bold;
}
.back-button {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black */
color: white;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
font-size: 1.2em;
}
.back-button:hover{
background-color: rgba(0, 0, 0, 0.5);
}
/* Responsive Styles */
@media (max-width: 768px) {
.grid-item {
padding: 30px 15px; /* Adjust padding for smaller screens */
font-size: 0.9em; /* Adjust font size for smaller screens */
}
.title {
font-size: 2em;
}
.logo{
width: 60px;
height: 60px;
}
.container{
padding: 15px;
}
.top-section{
padding:15px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="top-section">
<a href="code.html">
<div class="logo">
</a>
</div>
<div class="title">نجاح</div>
</div>
<div class="grid-container">
<div class="grid-item">
<img src="tifinagh_learning.png" alt="تعلم تيفيناغ">
<div class="grid-item-text">تعلم تيفيناغ</div>
</div>
<div class="grid-item">
<img src="amazigh_levels.png" alt="سنوات الدراسة لمسلك اللغة الأمازيغية">
<div class="grid-item-text">سنوات الدراسة لمسلك اللغة الأمازيغية</div>
</div>
<div class="grid-item">
<img src="amazigh_dictionaries.png" alt="قواميس اللغة الأمازيغية">
<div class="grid-item-text">قواميس اللغة الأمازيغية</div>
</div>
<div class="grid-item">
<img src="amazigh_origins.png" alt="علمك من أصول أمازيغية">
<div class="grid-item-text">علمك من أصول أمازيغية</div>
</div>
<div class="grid-item">
<img src="self_learning.jpg" alt="هل تعلم">
<div class="grid-item-text">هل تعلم</div>
</div>
<div class="grid-item">
<img src="tests_evaluation.png" alt="اختبارات وتقييم">
<div class="grid-item-text">اختبارات وتقييم</div>
</div>
</div>
<button class="back-button">></button>
</div>
</body>
</html> |