982140ee3664255f324eb74dd6317109

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

صفحة تفاعلية لعرض القرآن الكريم على موقع بلوجر مع صورة جذابة، إطار قرآن كامل، زخارف وإضاءة جميلة لتجربة قراءة مريحة للمستخدم.
author image



صورة القرآن الكريم مع تصميم إسلامي جذاب، تعكس جمال وروحانية صفحة التلاوة على بلوجر.




 القرآن الكريم على بلوجر، مع زخارف متحركة خفيفة وإضاءة حول 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. زخارف وإطارات مستديرة لإطلالة هادئة وأنيقة.



    الموافقة على ملفات تعريف الارتباط

    يستخدم هذا الموقع ملفات تعريف الارتباط ليقدم لك تجربة تصفح أفضل. باستخدام موقعنا ، فإنك توافق على استخدام ملفات تعريف الارتباط

    قراءة المزيد