إنشاء مكتبة للكتب HTML-CSS

 احيانا يكون لدينا مجموعة كتب مفضلة نريد مشاركتها مع زوار مدوناتنا أو تكون المدونة نفسها قائمة على تقديم العديد من الكتب.

أو حتى هناك من لديهم كتب يبيعونها بالتسويق بالعمولة لكن لا يوجد طريقة عرض مناسبة 

والطريقة المتعارف عليها هي عبر قالب مكتبة وطبعا هذه القوالب تخص فقط مدونات الكتب التي لا يوجد فيها تدوين غير الكتب

لكن لو مدونتك هي مدونة للتدوين وتريد اضافة بعض الكتب فالحل في هذا الموضوع

الصق هذا الكود في صفحة أو موضوع

<style>

#cnmu-books{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:50px 30px;padding:0 0 0 10px;box-sizing:border-box;}

#cnmu-books a.books{text-decoration:none;color:#fff;position:relative;background-color:#fff;padding:0!important;margin:0!important;border:1px solid #eee;box-shadow:-2px 2px #ddd,-4px 4px #bbb,-6px 6px #ccc,-8px 8px 1px #999;height:320px;overflow:hidden;}

#cnmu-books .books > *{position:absolute;top:0;width:100%;height:100%;box-sizing:border-box;}

#cnmu-books .books img{object-fit:cover;right:0;}

#cnmu-books .book-info{background-color:#333;right:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px 10px;transition:all .4s;gap:10px;transform:rotateY(90deg);text-align:center;}

.book-info strong{font-size:120%;}

.book-info p{font-size:90%;opacity:.8;}

#cnmu-books .books:hover .book-info{transform:rotateY(0);}

@media screen and (max-width : 500px) {#cnmu-books {max-width: 250px;margin: 0 auto;} }

</style>

<div id="cnmu-books">

  

<!--Book-->

<a class="books" href="#" target="_blank">

 <img src="*" />

 <div class="book-info">

   <strong>اسم الكتاب</strong>

   <p>نص او وصف</p>

   <b>كلمة بخط سميك</b>

   </div>

</a>

<!--Book-->

</div>

صحيح البخاري

الجامع المسند الصحيح المختصر من أُمور رسول الله صلى الله عليه وسلّم وسننه وأيامه

تحميل

صحيح مسلم

صحيح الإمام مسلم بن الحجاج

شراء

منهاج المسلم

كتاب في المعلومات الأساسية التي يجب على المسلم معرفتها

تصفح مباشر

صحيح البخاري

الجامع المسند الصحيح المختصر من أُمور رسول الله صلى الله عليه وسلّم وسننه وأيامه

تحميل

صحيح مسلم

صحيح الإمام مسلم بن الحجاج

تحميل

منهاج المسلم

كتاب في المعلومات الأساسية التي يجب على المسلم معرفتها

تحميل