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

 img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
 }

 p {
  font-size: 16px;
  max-width: 600px;
  margin: 20px auto;
  line-height: 1.6;
 }
</style>



<h1>صورة قطة متجاوبة</h1>

<img
 src="https://openarabtech.github.io/CSSVerse/src/assets/cats.jpg" 
 alt="قطتان نائمتان معاً بسلام"
/>

<p>
    تتغير أبعاد هذه الصورة تلقائياً لتلائم حجم الشاشة؛ 
    فسواء كنت تشاهدها عبر جهاز كمبيوتر مكتبي أو هاتف محمول، 
    فإنها تعدّل حجمها مع الحفاظ على نسب أبعادها، 
    مما يضمن تصميماً مرتباً وسهل الاستخدام على جميع الأجهزة.
</p>
    

<style>
 body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 40px 20px;
  background-color: #f9f9f9;
  color: #333;
 }

 .container {
  display: flex;
  display-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
 }

 .text {
  flex: 1 1 400px;
 }

 .text h2 {
  font-size: 28px;
  margin-bottom: 10px;
 }

 .text p {
  font-size: 16px;
  line-height: 1.6;
 }

 .image {
  flex: 1 1 400px;
 }

 .image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
 }
</style>



<div class="container">
 <div class="text">
  <h2>تخطيط متوازن</h2>
   <p>
    يُعد التوازن عنصراً جوهرياً في تصميم الويب؛ 
    فمن خلال التوزيع المتكافئ للثقل البصري — 
    كأن تقرن كتلة نصية بصورة مكمّلة لها — 
    يمكنك إعداد تخطيط يبعث على الهدوء، 
    ويتسم بالتنظيم وسهولة التصفح.
   </p>
 </div>
 
 <div class="image">
  <img
   src="https://openarabtech.github.io/CSSVerse/src/assets/cats.jpg" 
   alt="قطتان نائمتان معاً بسلام"
  />
 </div>
</div>
    

<style>
 body {
  font-family: Arial, sans-serif;
  padding: 30px 20px;
  background-color: #fff;
  color: #222;
  max-width: 800px;
  margin: 0 auto;
 }

 .section {
  margin-bottom: 40px;
 }

 .section img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
 }

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

 .section p {
  font-size: 16px;
  line-height: 1.6;
 }
</style>



<div class="section">
 <img
   src="https://openarabtech.github.io/CSSVerse/src/assets/cats.jpg" 
   alt="قطتان نائمتان معاً بسلام"
 />
 <h2>مهمتنا لإنقاذ القطط</h2>
 <p>
    تدعم هذه الصورة إحدى أهم قصصنا: 
    إنقاذ 12 قطةً ضالةً من مصرف لمياه الأمطار. 
    ويضمن وضعها في صدارة الصفحة تفاعل الزوار عاطفياً مع رسالتنا على الفور.
 </p>
</div>

<div class="section">
 <h2>حفل جمع تبرعات مرتقب</h2>
 <p>
    انضموا إلينا في فعالية صغيرة لجمع التبرعات دعماً لملجئنا. 
    ستكون أمسيةً ممتعةً وأجواؤها عفوية، 
    تتضمن وجبات خفيفة وألعاباً، 
    وبالطبع... الكثير من القطط!
 </p>
 <img
   src="https://openarabtech.github.io/CSSVerse/src/assets/cats.jpg" 
   alt="قطتان نائمتان معاً بسلام"
 />
</div>
    

<style>
 body {
  font-family: Arial, sans-serif;
  padding: 40px 20px;
  background-color: #ffffff;
  color: #222;
  max-width: 900px;
  margin: 0 auto;
 }

 .aligned-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
 }

 .aligned-content img {
  width: 300px;
  height: auto;
  border-radius: 8px;
  flex-shrink: 0;
 }

 .aligned-text {
  flex: 1;
  min-width: 250px;
 }

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

 .aligned-text p {
  font-size: 16px;
  line-height: 1.6;
 }
</style>



<div class="aligned-content">
 <img
   src="https://openarabtech.github.io/CSSVerse/src/assets/cats.jpg" 
   alt="قطتان نائمتان معاً بسلام"
 />

 <div class="aligned-text">
  <h2>العناصر المتراصفة</h2>
  <p>
    في هذا المثال، تتم محاذاة الصورة أفقياً بجوار كتلة النص. 
    ويخلق هذا تنسيقاً متناغماً بصرياً، 
    حيث يبدو العنصران وكأنهما يشكلان وحدة واحدة مترابطة؛ 
    إذ تعمل المحاذاة السليمة - بهذا الشكل - على تحسين القابلية للقراءة وتعزيز البنية العامة للتصميم.
  </p>
 </div>
</div>