الأساسيات

نموذج "اتش.تي.إم.إل" The HTML boilerplate.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <title>بطاقة تدوينة</title>
 </head>
 <body>
 <!-- هنا تضع اكواد التطبيق -->
 </body>
</html>
                

قصص المستخدم User stories :

1. يجب أن يكون لديك عنصر div يحمل الفئة (blog-post-card class) لاحتواء جميع عناصر البطاقة الخاصة بك.

2. داخل العنصر .blog-post-card ، يجب أن يتوفر لديك عنصر صورة (image) يحمل السمة alt (مع نص صالح) وفئة (class) باسم post-img. ويمكنك استخدام الرابط

   https://openarabtech.github.io/CSSVerse/src/assets/cover-photo.jpg

   للسمة src الخاصة بالصورة.

3. يجب أن يحتوي العنصر .blog-post-card على عنصر div يحمل الفئة post-content ويتضمن ما يلي:

   • عنصر h2 يحمل الفئة post-title ويحتوي على نص عنوان تدوينتك.

   • عنصر p يحمل الفئة post-excerpt ويحتوي على نص يلخّص تدوينتك.

   • عنصر a يحمل الفئة read-more والنص اقرأ المزيد.

4. يجب عليك تعيين لون خلفية عنصر body إلى قيمة غير اللون الأبيض.

5. يجب عليك تطبيق الأنماط التالية على العنصر .blog-post-card :

   • خلفية بيضاء (A white background).

   • زوايا مستديرة (Rounded corners).

   • عرض من اختيارك (A width of your choice).

   • محاذاة النص من اختيارك (The text alignment of your choice).

6. يجب تنسيق العنصر .post-img بحيث تملأ الصورة العرض الكامل للبطاقة، مع إضافة حد سفلي لها.

7. يجب تنسيق العنصر .post-content بحيث تتوفر مساحة داخلية (padding) داخل البطاقة.

8. يجب أن يكون للعنصرين .post-title و .post-excerpt لون نص يختلف عن اللون الافتراضي، بالإضافة إلى هوامش (margins) من جميع الجهات.

9. يجب تنسيق العنصر .read-more ليبدو كزر (button)، وأن يحتوي على:

   • لون نص (text color) يختلف عن اللون الافتراضي.

   • لون خلفية (background color).

   • هوامش (Margins) من جميع الجهات.

   • مسافات داخلية (Padding) من جميع الجهات.

   • زوايا مستديرة (Rounded corners).

   • خاصية عرض (display) مضبوطة على القيمة inline-block.

   • تأثير عند تمرير المؤشر (hover) يغير لون الخلفية (background color).

ملاحظة: تأكد من ربط ملف الأنماط (stylesheet) في ملف HTML وتطبيق قواعد CSS.

حل التطبيق :

<!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 rel="stylesheet" href="styles.css">
 </head>
 
 <body>
  <div class="blog-post-card">
   <img class="post-img" src="https://openarabtech.github.io/CSSVerse/src/assets/cover-photo.jpg" alt="تدوين اونلاين">
   <div class="post-content">
    <h2 class="post-title">تعلم تطوير الويب في عام 2026</h2>
    <p class="post-excerpt">واكب أحدث الاتجاهات في مجال تطوير الويب وكن في الطليعة؛ اكتشف كل ما هو جديد ومثير لعام 2026.</p>
    <a class="read-more" href="#">اقرأ المزيد</a>
   </div>
  </div>
 </body>

</html>
                

body {
 background-color: #f1f5f9;
 padding: 20px;
}

.blog-post-card {
 background-color: white;
 border-radius: 16px;
 width: 600px;
 text-align: center;
 overflow: hidden;
 margin: auto;
}

.post-img {
 width: 100%;
 border-bottom: 4px solid #2563eb;
}

.post-content {
 padding: 20px;
}

.post-title {
 color: #0f172a;
 margin: 10px;
}

.post-excerpt {
 color: #64748b;
 margin: 10px;
 line-height: 1.6;
}

.read-more {
 color: white;
 background-color: #2563eb;
 margin: 10px;
 padding: 10px;
 border-radius: 10px;
 display: inline-block;
 text-decoration: none;
}

.read-more:hover {
 background-color: #1d4ed8;
}

            

معاينة التطبيق :

تعلم تطوير الويب في عام 2026

واكب أحدث الاتجاهات في مجال تطوير الويب وكن في الطليعة؛ اكتشف كل ما هو جديد ومثير لعام 2026.

اقرأ المزيد