أساسيات تصميم واجهة المستخدم User Interface

<style>
 body {
  font-family: sans-serif;
  padding: 20px;
  background-color: #fdfdfd;
  color: #333;
 }

 .section {
  margin-bottom: 40px;
 }

 .big-heading {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 12px;
 }

 .paragraph {
  font-size: 16px;
  max-width: 600px;
  line-height: 1.6;
 }
</style>

<div class="section">
 <div class="big-heading">اكتشف قوة التصميم الذكي</div>
 <p class="paragraph">
 
    لا يقتصر التصميم المتميز على الألوان أو الخطوط فحسب، بل يتعلق أيضاً بمقياس الحجم (التدرج في الأحجام). 
فالعنوان الكبير -مثل هذا العنوان- يجذب انتباهك على الفور، بينما توفر الفقرة التي تليه السياق والتفاصيل. 
ويُسهم التدرج الصحيح في الأحجام في رسم مسارٍ واضح تتبعه عين القارئ.
 
 </p>
</div>
    

<style>
 body {
  font-family: sans-serif;
  padding: 20px;
  background-color: #fefefe;
  color: #333;
 }

 .banner {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
  border-radius: 8px;
 }

 .content {
  max-width: 600px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
 }

 @media (max-width: 600px ){
  .banner {
    max-width: 90% ;
  }
  
  .content {
    font-size: 15px ;
  }
 }
</style>

<img 
 src="https://placehold.co/1200x400/png?text=Large+Banner+Image"
 alt="لافتة"
 class="banner"
>

<div class="content">
 <p>
 
    تبدو صورة اللافتة هذه رائعة على الشاشات الكبيرة، لكنها تصغر تلقائياً عند عرضها على الأجهزة الأصغر حجماً.
وبهذه الطريقة، تظل الصورة تترك انطباعاً بصرياً قوياً دون أن تدفع المحتوى الأساسي خارج نطاق الشاشة.
يساعد ضبط حجم الصور بشكل صحيح في الحفاظ على التوازن وسهولة الوصول عبر مختلف تخطيطات العرض.
 
 </p>
</div>
    

<style>
 body {
  font-family: sans-serif;
  padding: 20px;
  margin: 0;
  background-color: #fafafa;
 }

 .navbar {
  background-color: #004080;
  padding: 15px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
 }

 .nav-link {
  color: white;
  text-decoration: none;
  font-size: 10px 15px;
  display: inline-block;
  border-radius: 4px;
 }

  .nav-link:hover {
  background-color: #0059b3;
 }

 @media (max-width: 600px ){
  .nav-link {
    font-size: 20px ;
    padding: 14px 18px ;
  }
 }
</style>

<nav class="navbar">
 <a href="#" class="nav-link">الرئيسية</a>
 <a href="#" class="nav-link">نبذة عنا</a>
 <a href="#" class="nav-link">الخدمات</a>
 <a href="#" class="nav-link">الاتصال</a>
</nav>