إضافة لمجموعة بلوكات أو صناديق تعرض معلومات مبسطة عن مدونتك أو تضع فيها معلومات عن خدمات تقدمها او أى شئ تحتاج عمل معلومات ملفته له في مدونتك
يمكنك إستخدام الإضافة في صفحة او إضافة HTML/JavaScript
<style>
#cnmu-blocks-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
.cnmu-blocks{display:grid;grid-template-columns:50px 1fr;grid-template-rows:50px 1fr 26px;background-color:#f8f8f8;padding:10px;border-radius:4px;border:1px solid #eee;box-sizing:border-box;gap:20px 10px;transition:box-shadow .4s;}
.cnmu-blocks:hover{box-shadow:0 0 6px #bbb;}
.cnmu-blocks i{grid-area:1/1/1/1;font-size:50px;text-align:center;color:#446FAA;}
.cnmu-blocks h5{grid-area:1/2/1/2;line-height:50px;font-size:25px;color:#446FAA;}
.cnmu-blocks p{grid-area:2/1/2/3;margin:0;padding:0;}
.cnmu-blocks a{grid-area:3/1/3/3;padding:0 12px!important;margin:0!important;text-decoration:none!important;background-color:#446faa;height:26px;font-size:90%;width:fit-content;color:#fff;border-radius:2px;transition:background-color .4s;}
.cnmu-blocks a:hover{background-color:#000;}
</style>
<div id="cnmu-blocks-container">
<!--Block-->
<div class="cnmu-blocks">
<i class="fa fa-info-circle"></i>
<h5>من نحن</h5>
<p>أكتب ما تريد</p>
<a href="#">المزيد</a>
</div>
<!--Block-->
</div>
شرح الكود
الرقم 300 يغير حجم وعدد البلوكات في السطر الواحد
كرر الكود من بداية الى نهاية الكودين بالأزرق للحصول على صندوق جديد
استبدل الكود الأحمر بالأيقونة المناسبة من مكتبة الأيقونات
طبعا استبدل الكلمات العربية بما تريد ورمز # في زر المزيد بالرابط المراد فتحه عند الضغط على الزر
هناك كود مكرر باللون الوردي هذا هو اللون المستخدم في الإضافة استبدله بلون مناسب لقالبك
معاينة حية
السلام عليكم أستاذ
ردحذفأنت رائع كعادتــك
ما شاء الله عليك
وفقك الرحمن 🤲
الله يرفع قدرك أخي منير , شكراً لك يا غالي على الدعم واللهم آمين واياكم
حذفشكرا جدا لحضرتك مبدع كالعادة ♥
ردحذفحبيبي أخي احمد تسلم يا غالي , سررت كثيراً بمرورك
حذفجزاك الله الحسنى وزيادة حبيب قلبِ
ردحذفوجزاك الله بالمثل أخي الغالي 🌹❤️
حذف