كود HTML - CSS لوضع جدول خطط تسويقية

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

الإضافة خفيفة وتعتمد فقط على أكواد HTML/CSS 

لو لديك مكان إضافة كبير في قالبك يمكنك أن تضيفها فيه او تضيفها في صفحة.

انسخ الكود التالي وعدل ما تشاء

<style>

#cnmu-plans{--plans-color:#F75694;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;}

.plan{background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;overflow:hidden;position:relative;}

.plan strong{display:block;background-color:var(--plans-color);color:#fff;padding:10px;}

.plan-pricer{display:flex;justify-content:center;background-color:#f1f1f1;padding:5px;gap:5px;}

.plan-pricer b{order:1;color:var(--plans-color);}

.plans-rules{display:flex;flex-direction:column;gap:5px;}

.plans-rules p {padding: 5px;margin: 0;font-size: 90%; border-bottom: 1px solid #eee;}

.plans-rules p:last-child{border:none;}

#cnmu-plans p a{display:block;width:fit-content;margin:0 auto!important;padding:5px 10px!important;background-color:var(--plans-color);color:#fff;text-decoration:none;border-radius:5px;}

</style>

<div id="cnmu-plans">

<!--Plan-->

<div class="plan">

<strong>اسم الخطة</strong>

<div class="plan-pricer"><span>المدة سنة / </span><b>$20</b></div>

<div class="plans-rules">

<p>معلومة قابلة للتكرار</p>

<p><a href="#">رابط</a></p>

</div>

</div>

<!--Plan-->

</div>

طريقة الإستخدام

* اللون الوردي غيره باللون المناسب لك

* كرر كود <!--Plan--> 

من أوله الى الكود المشابه له في النهاية لتحصل على خطة جديدة

*عدل الكلمات والأسعار بما تريد وكرر الجزء الخاص بالمعلومة للحصول على معلومة جديدة

* باللون الاخضر الجزء الخاص بالرابط يمكنك ان تعدلها او تزيله

{ إِنَّ اللَّهَ وَمَلَائِكَتَهُ يُصلُّونَ عَلَى النَّبِيِّ يَا أَيُّهَا الَّذينَ آمَنُوا صَلُّوا عَلَيْهِ وَسَلِّمُوا تسلِيماً } ﷺ

{ إِنَّ اللَّهَ وَمَلَائِكَتَهُ يُصلُّونَ عَلَى النَّبِيِّ يَا أَيُّهَا الَّذينَ آمَنُوا صَلُّوا عَلَيْهِ وَسَلِّمُوا تسلِيماً } ﷺ