<style>
 body {
  font-family: sans-serif;
  color: #333;
  background-color: #fff;
 }

 header, nav, main, section, footer {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
 }

 h1, h2, h3 {
  font-weight: normal;
  font-size: 16px;
 }

 nav a {
  text-decoration: none;
  color: #333;
  margin-left: 10px;
  font-size: 14px;
 }

 p {
  font-size: 14px;
  margin: 5px 0;
 }
</style>

<header>
 <h1>موقعي الإلكتروني</h1>
</header>

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

<main>
 <section>
  <h2>مرحباً</h2>
  <p>هذا هو قسم الترحيب في الصفحة الرئيسية.</p>
 </section>

 <section>
  <h2>خدماتنا</h2>
  <p>نستعرض هنا ما نقدمه.</p>
 </section>

 <section>
  <h2>تواصل معنا</h2>
  <p>تواصل معنا لمزيد من المعلومات.</p>
 </section>
</main>

<footer>
 <p>
 ©
 موقعي الإلكتروني 2025
 </p>
</footer>
    

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

 h1 {
  font-size: 32px;
  margin-bottom: 10px;
 }

 h2 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 8px;
 }

 h3 {
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 6px;
 }

 p {
  font-size: 16px;
  margin-bottom: 12px;
 }

 .callout {
  background-color: #fff3cd;
  border-right: 5px solid #ffc107;
  padding: 15px;
  margin: 20px 0;
 }
</style>


<h1>فهم التسلسل الهرمي البصري</h1>
<p>يساعد التسلسل الهرمي البصري المستخدمين على تصفح المحتوى وفهمه من خلال توجيه انتباههم.</p>

<h2>مستويات العناوين</h2>
<p>يؤدي استخدام أحجام خطوط مختلفة للعناوين إلى خلق هيكلية للمحتوى وتسهيل مسحه بصرياً.</p>

<h3>عنوان من المستوى الثالث</h3>
<p>يعمل هذا العنوان الفرعي الأصغر على تقسيم القسم بشكلٍ إضافي دون أن يطغى عليه.</p>

<div class="callout">
 <strong>نصيحة: </strong>
 استخدم مربعاً بارزاً كهذا لتسليط الضوء على الملاحظات المهمة أو النقاط الجوهرية.
</div>
    

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

 h2 {
  font-size: 24px;
  margin-bottom: 10px;
 }

 p {
  font-size: 16px;
  margin-bottom: 12px;
 }

 .callout {
  background-color: #e0f7fa;
  border-right: 5px solid #00acc1;
  padding: 20px;
  margin-top: 20px;
  text-align: center;
 }

 .cta-button {
  display: inline-block;
  background-color: #00acc1;
  color: white;
  padding: 12px 20px;
  font-size: 16px;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 10px;
 }

 .cta-button:hover {
  background-color: #008b9a;
 }
</style>

<h2>هل أنت مستعد لتعزيز إنتاجيتك؟</h2>
<p>انضم إلى آلاف المستخدمين الذين ينجزون المزيد من المهام باستخدام أدواتنا البسيطة والفعالة.</p>

<div class="callout">
 <strong>لا تنتظر!</strong>
 ابدأ تجربتك المجانية اليوم واكتشف الفرق.
 <br>
 <a href="#" class="cta-button">ابدأ فترة تجريبية مجانية</a>
</div>