الوحدات المطلقة والنسبية

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

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

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

1. يجب أن يتضمن عنصر body عنصر header.

2. يجب أن يحتوي عنصر الترويسة header الخاص بك على صورة للفعالية، متبوعةً بعنوان الفعالية (event title) داخل وسم h1 ، وذلك بهذا الترتيب. يمكنك استخدام هذه الصورة إذا أردت:

   https://openarabtech.github.io/CSSVerse/src/assets/event.jpg

3. ينبغي أن يحتوي جسم الصفحة body على عنصر رئيسي main.

4. يجب أن يحتوي العنصر الرئيسي main على عنصرين من نوع section على الأقل، يعرضان ميزات الحدث.

5. يجب أن تحتوي كلٌّ من عناصر القسم section الخاصة بك على وسم h2 بداخلها.

6. يجب أن يحتوي جسم الصفحة (body) على حشوة علوية وسفلية (top and bottom padding) بمقدار 50px.

7. ينبغي أن يكون لجسم الصفحة (body) هامش علوي وسفلي (top and bottom margin) مقداره 0 ، وهامشان أيمن وأيسر (left and right margin) يعملان على توسيطه.

8. ينبغي ضبط عرض جسم الصفحة (body width) بحيث يكون نسبياً (relative) بالنسبة لعرض إطار العرض (viewport).

9. ينبغي أن يستخدم العنصر (body) الدالة calc لضبط خاصية min-height لديه بحيث تساوي 100% من ارتفاع إطار العرض (viewport) مطروحاً منها إجمالي الهوامش الداخلية (padding) المطبقة على الجزء العلوي والسفلي من العنصر (body).

10. يجب أن يتضمن منشورك عنصراً واحداً على الأقل من نوع hr.

11. ينبغي عليك ضبط عرض width جميع عناصر hr و section بقيمة نسبية مئوية (percent value relative) تعتمد على العنصر الأب (its parent).

ملاحظة: تأكد من ربط ملف الأنماط (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>

  <header>
   <img src="https://openarabtech.github.io/CSSVerse/src/assets/event.jpg" alt="صورة الفعالية">
   <h1>مهرجان التقنية العربية المفتوحة</h1>
   <p>انضموا إلينا في النسخة السنوية الأولى من مهرجان التقنية العربية المفتوحة!</p>
   <p>
    <strong>التاريخ</strong>
    : 3 أكتوبر 
    <strong>المكان</strong>
    : حديقة بُولدر
   </p>
  </header>

  <hr>

  <main>
   <section class="section1">
    <h2>أبرز فعاليات المهرجان</h2>
    <ul>
     <li>عروض ومشاريع تقنية مبتكرة</li>
     <li>مسابقة أفضل مشروع تقني مفتوح المصدر</li>
     <li>تحديات البرمجة والابتكار التقني</li>
    </ul>
   </section>

   <section class="section2">
    <h2>الضيوف المميزون</h2>
    <ul>
     <li>خبراء التقنية والبرمجيات الحرة</li>
     <li>مطورون ورواد في مجال المصادر المفتوحة</li>
    </ul>
   </section>

   <section class="section3">
    <h2>المأكولات والمشروبات</h2>
    <ul>
     <li>مأكولات متنوعة من عربات الطعام</li>
     <li>مشاوي وأطباق شهية</li>
     <li>عصائر ومشروبات منعشة</li>
    </ul>
   </section>
  </main>

  <hr>

  <footer>
   <p>
    © 2025 مهرجان التقنية العربية المفتوحة
   </p>
  </footer>
  
 </body>

</html>
                

body{
padding-top: 50px;
padding-bottom: 50px;
margin: 0 auto;
width: 100vw;
min-height: calc(100vh - 100px);
font-family: Arial, sans-serif;
}

header {
text-align: center;
margin-bottom: 20px;
}

header img {
max-width: 90%;
height: auto;
}

main {
display: flex;
gap: 0.5rem;
padding: 1rem;
margin: 20px auto;
justify-content: center;
}

section {
flex: 1;
width: 100%;
max-width: 300px;
min-height: 180px;
background-color: #f0f0f0;
color: 111;
border-radius: 16px;
margin: auto;
padding: 2px;
}

ul li {
padding: 4px 0;
}

hr {
width: 80%;
height: 2px;
background-color: #333;
}

footer{
text-align: center;
margin-top: 50px;
}

@media (min-width: 781px) {
.section1 h2 {
text-align: left;
}

.section2 h2 {
text-align: center;
}

.section3 h2 {
text-align: right;
}
}

@media (max-width: 780px) {
main {
flex-direction: column;
}

section {
text-align: center;
}

ul {
list-style-type: none;
padding: 0;
}
}
            

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