Donation box css

Donation box css

Author: mohamed111112

website/src/css/DonationBox.css

@@ -0,0 +1,79 @@
+.modern-donation-box {
+    background-color: #f4f7f6;
+    border-left: 6px solid #01A299;
+    padding: 1em 25px;
+    margin: 2em 0;
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    transition: all 0.3s ease;
+}
+
+.donation-icon {
+    color: #01A299;
+    font-size: 1.75em;
+    margin-right: 1em;
+    animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+}
+
+.donation-content {
+    flex-grow: 1;
+    font-size: 1em;
+    color: #333;
+}
+
+.donation-link {
+    background-color: #28303A;
+    color: white;
+    padding: 0.75em 1.5em;
+    border-radius: 30px;
+    text-decoration: none;
+    font-weight: bold;
+    margin-left: 0.5em;
+    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    display: inline-block;
+    position: relative;
+}
+
+.donation-link:hover, .donation-link:focus {
+    background-color: #01A299; 
+    transform: translateY(-3px); 
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); 
+}
+
+@media (max-width: 768px) {
+    .modern-donation-box {
+        flex-direction: column;
+        text-align: center;
+        padding: 1.5em;
+        border-left: none;
+        border-top: 4px solid #01A299;
+    }
+
+    .donation-icon {
+        margin-bottom: 1em;
+        font-size: 2em;
+    }
+
+    .donation-content {
+        font-size: 0.9em;
+        margin-bottom: 1em;
+    }
+
+    .donation-link {
+        padding: 0.75em 1em;
+        border-radius: 20px;
+    }
+    
+    .modern-donation-box * {
+        font-weight: bold;
+    }
+}