قراءة القرآن الكريم أونلاين على بلوجر

القرآن الكريم تلاوة القرآن صفحة القرآن على بلوجر تصميم إسلامي زخارف متحركة iframe القرآن عرض القرآن الكريم بلوجر إسلامي

 القرآن الكريم على بلوجر، مع زخارف متحركة خفيفة وإضاءة حول iframe:

<!-- بداية الصفحة التفاعلية -->
<div style="background: #eaf5f7; padding: 30px; border-radius: 20px; max-width: 1200px; margin: auto; box-shadow: 0 6px 20px rgba(0,0,0,0.15);">

  <!-- العنوان -->
  <h2 style="text-align: center; font-family: 'Tahoma', sans-serif; color: #065f73; margin-bottom: 30px;">
    القرآن الكريم
  </h2>

  <div style="display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;">

    <!-- الصورة -->
    <div style="flex: 0 0 220px; text-align: center;">
      <a href="#" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEg2kjPPuxHgrOkxwOnLG3IR69WO1_52eQR4r_tzs4FBVIPr2m26X32hoJdap-ekTTPG7UUuGqmuCUW-fl5v_mIIspMY4InA60MmplYALp_irsM__ChgbCJ8LDn7RILpqayP_DwLDKA-vGBqQ-LBKHgUyevY5_gN8n5e46rfoZJsuehPgsf-oYk3XQE0GS4=w200-h200" 
             alt="صورة القرآن" 
             style="border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); width: 100%; height: auto; transition: transform 0.3s;">
      </a>
    </div>

    <!-- إطار القرآن مع تأثيرات -->
    <div style="flex: 1 1 auto; position: relative; padding: 10px; background: #ffffff; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden;">
      
      <!-- تأثير إضاءة حول iframe -->
      <div style="position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(6,95,115,0.1) 0%, transparent 70%); animation: glow 4s infinite alternate;"></div>

      <iframe src="https://quran.com" 
              style="position: relative; border:none; width:100%; height:700px; border-radius: 15px; z-index: 1;" 
              scrolling="yes">
      </iframe>

    </div>

  </div>
</div>

<!-- تأثير الحركة للإضاءة -->
<style>
  @keyframes glow {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(10px, 10px) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
  }
  /* تأثير تكبير الصورة عند المرور عليها */
  div img:hover {
    transform: scale(1.05);
  }
</style>
<!-- نهاية الصفحة التفاعلية -->

مميزات النسخة التفاعلية:

1. إضاءة خفيفة حول iframe تتحرك بشكل مستمر لإضفاء تأثير حي وجذاب.

2. تأثير تكبير خفيف على الصورة عند المرور عليها بالفأرة لزيادة التفاعل البصري.

3. تصميم مرن مع flex-wrap يتوافق مع جميع الشاشات.

4. زخارف وإطارات مستديرة لإطلالة هادئة وأنيقة.

---