CSS بالتطبيق العملي

مشروع: بطاقة تعريف

• اكتب HTML: حاوية فيها صورة واسم ونبذة قصيرة.
• اربط ورقة أنماط خارجية وأضِف class على البطاقة.
• نسّق الصندوق: حشو، border-radius، وظل خفيف.
• استخدم Flexbox لتوسيط البطاقة في الصفحة.

شيفرة CSS

.card {
  max-width: 320px;
  margin: 40px auto;
  padding: 24px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  text-align: center;
}
.card img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

عادات جيدة مقابل أخطاء شائعة

التفاصيل ليست مجرّد تفاصيل؛ إنها ما يصنع التصميم.تشارلز إيمز