مولد رسائل التنبيه المطور

الأكواد الأساسية لموقعك (تُهَيأ مرة واحدة فقط)

1. تأكد من استدعاء مكتبة الأيقونات Font Awesome ومجموعة خط Changa بداخل وسم <head>:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Changa:wght@400;600;700&display=swap"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

2. أضف تنسيقات CSS التالية إلى ملف التصميم الرئيسي الخاص بموقعك:

.gmi-alert-message-pro { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 20px; background-color: #ffffff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); border: 1px solid #e2e8f0; transition: all 0.3s ease; } .gmi-alert-message-pro:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); } .gmi-alert-message-pro .gmi-icon-box { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #ffffff; font-size: 1.3rem; } .gmi-alert-message-pro p { margin: 0; font-weight: 500; font-size: 0.95rem; line-height: 1.6; color: #334155; } .gmi-alert-message-pro p strong { font-weight: 700; font-size: 1rem; } .gmi-alert-info { border-inline-start: 5px solid #0ea5e9; } .gmi-alert-info .gmi-icon-box { background-color: #0ea5e9; } .gmi-alert-info p strong { color: #0369a1; } .gmi-alert-success { border-inline-start: 5px solid #10b981; } .gmi-alert-success .gmi-icon-box { background-color: #10b981; } .gmi-alert-success p strong { color: #047857; } .gmi-alert-warning { border-inline-start: 5px solid #f59e0b; } .gmi-alert-warning .gmi-icon-box { background-color: #f59e0b; } .gmi-alert-warning p strong { color: #b45309; } .gmi-alert-danger { border-inline-start: 5px solid #ef4444; } .gmi-alert-danger .gmi-icon-box { background-color: #ef4444; } .gmi-alert-danger p strong { color: #b91c1c; }

المعاينة المباشرة المقيدة بالتحديث الفوري:



كود HTML التنبيه المولد للنسخ الفوري:

إرسال تعليق

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