x

الأساسيات

تصميم بطاقة عمل (Business Card)

مختبر

الهدف: تنفيذ قصص المستخدم الموضحة أدناه واجتياز جميع الاختبارات لإتمام المختبر.


نموذج "اتش.تي.إم.إل" 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 يحمل سمة class بقيمة business-card ، بحيث يحتوي على جميع العناصر الأخرى.

  2. داخل العنصر .business-card ، يجب أن يوجد عنصر img يحتوي على سمة class بقيمة profile-image. يمكنك تعيين مصدر الصورة (src) ليكون

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

    إذا أردت، كما يجب توفير سمة alt تتضمن وصفاً ذا دلالة واضحة.

  3. داخل العنصر .business-card ، وبعد عنصر img ، يجب أن تضع ثلاثة عناصر p تحتوي على سمة class بقيم full-name و designation و company على التوالي.

  4. يجب أن يحتوي عنصر p الأول على اسمك.

  5. يجب أن يحتوي عنصر p الثاني على المسمى الوظيفي الخاص بك.

  6. يجب أن يحتوي عنصر الفقرة p الثالث على اسم شركتك.

  7. يجب أن يكون هناك عنصر hr أسفل عنصر p الثالث.

  8. بعد عنصر hr ، يجب أن يكون هناك عنصران من نوع p. في العنصر الأول، يجب أن يكون النص عبارة عن عنوان بريد إلكتروني (email address)، وفي العنصر الثاني، يجب أن يكون النص عبارة عن رقم هاتف (phone number).

  9. بعد عنصري الفقرة p ، يجب أن يكون هناك عنصر رابط a يحمل الفئة portfolio-link والنص ملف أعمال ، على أن يشير إلى رابط (URL) صالح.

  10. يجب أن يكون هناك عنصر hr بعد عنصر a الذي يحتوي على رابط ملف أعمال.

  11. يجب أن يكون لديك عنصر div آخر يحمل سمة class بقيمة social-media. وداخل هذا العنصر، يجب أن يوجد عنصر h2 يحتوي على النص تواصل معي.

  12. يجب أن تحتوي عناصر .social-media على ثلاثة عناصر a. وينبغي أن تحمل عناصر a هذه النصوص Facebook و LinkedIn و GitHub على التوالي، مع روابط تؤدي إلى مواقع ويب صالحة.

  13. يجب عليك ربط ملف الأنماط styles.css باستخدام الوسم link في قسم head من ملف HTML.

  14. يجب أن تكون خلفية الصفحة باللون rosybrown . ويجب أن يكون الخط العام هو Arial، مع استخدام sans-serif كخيار بديل (fallback).

  15. يجب أن يتضمن المُحدِّد .business-card خصائص لضبط عرض (wide) العنصر عند 300px وتحديد لون خلفية (background color) من اختيارك. كما ينبغي تعيين هامش داخلي padding بمقدار 20px من جميع الجهات، وهامش علوي (margin top) بمقدار 100px. يجب محاذاة النص في المنتصف (be center aligned) وضبط حجم الخط (font size) عند 16px، مع تعيين الهوامش اليمنى واليسرى (left and right margins) على القيمة auto.

  16. يجب أن يحتوي المُحدِّد .profile-image على خاصية max-width بقيمة 100%.

  17. يجب أن تحتوي جميع عناصر p على هامش علوي وسفلي (top and bottom margin) بمقدار 5px.

  18. يجب ألا تكون جميع الروابط (links) الموجودة في الصفحة مسطرة (not be underlined).


حل التطبيق :


index.html


<!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="business-card">
   <img class="profile-image" src="https://openarabtech.github.io/CSSVerse/src/assets/flower.jpg" alt="أيقونة زهرة">
   <p class="full-name">اسمك</p>
   <p class="designation">مطور برمجيات</p>
   <p class="company">التقنية العربية المفتوحة</p>
   <hr>
   <p>البريد الإلكتروني: <span dir="ltr">email@example.com</span></p>
   <p>الهاتف: <span dir="ltr">(123) 456-7890</span></p>
   <a class="portfolio-link" href="https://openarabtech.github.io/">ملف أعمال</a>
   <hr>
   <div class="social-media">
    <h2>تواصل معي</h2>
    <a href="https://facebook.com/openarabtech">Facebook</a>
    <a href="https://www.linkedin.com/company/openarabtech/">LinkedIn</a>
    <a href="https://github.com/openarabtech">GitHub</a>
   </div>
  </div>
 </body>

</html>

styles.css


body {
 background-color: rosybrown;
 font-family: Arial, sans-serif;
}

.business-card {
 width: 300px;
 background-color: brown;
 padding: 20px;
 margin-top: 100px;
 text-align: center;
 font-size: 16px;
 margin-left: auto;
 margin-right: auto;
}

.profile-image {
 width: 100%;
}

p {
 margin-top: 5px;
 margin-bottom: 5px;
}

a {
 text-decoration: none;
}

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