Fundraiser: Difference between revisions
From WikiOasis Meta
More actions
No edit summary |
update |
||
| (7 intermediate revisions by 2 users not shown) | |||
| Line 34: | Line 34: | ||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: min(0.75rem, 2vw); flex-wrap: wrap; gap: min(0.5rem, 2vw);"> | <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: min(0.75rem, 2vw); flex-wrap: wrap; gap: min(0.5rem, 2vw);"> | ||
<span style="font-weight: 600; color: #2d3748; font-size: clamp(1rem, 3.8vw, 1.1rem);">💰 Raised:</span> | <span style="font-weight: 600; color: #2d3748; font-size: clamp(1rem, 3.8vw, 1.1rem);">💰 Raised:</span> | ||
<span style="font-size: clamp(1.1rem, 4vw, 1.3rem); font-weight: 700; color: #3675b8;">$ | <span style="font-size: clamp(1.1rem, 4vw, 1.3rem); font-weight: 700; color: #3675b8;">$255 of $500</span> | ||
</div> | </div> | ||
<div style="background: #e2e8f0; border-radius: 50px; height: min(20px, 5vw); overflow: hidden; margin-bottom: min(0.75rem, 2vw);"> | <div style="background: #e2e8f0; border-radius: 50px; height: min(20px, 5vw); overflow: hidden; margin-bottom: min(0.75rem, 2vw);"> | ||
<div style="background: linear-gradient(90deg, #48bb78, #38a169); height: 100%; width: | <div style="background: linear-gradient(90deg, #48bb78, #38a169); height: 100%; width: 51%; transition: width 0.5s ease; border-radius: 50px;"></div> | ||
</div> | </div> | ||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: min(0.75rem, 2vw); flex-wrap: wrap; gap: min(0.5rem, 2vw);"> | <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: min(0.75rem, 2vw); flex-wrap: wrap; gap: min(0.5rem, 2vw);"> | ||
<span style="font-weight: 600; color: #2d3748; font-size: clamp(0.95rem, 3.5vw, 1.05rem);">🎯 Progress:</span> | <span style="font-weight: 600; color: #2d3748; font-size: clamp(0.95rem, 3.5vw, 1.05rem);">🎯 Progress:</span> | ||
<span style="font-weight: 600; color: #48bb78; font-size: clamp(0.95rem, 3.5vw, 1.05rem);"> | <span style="font-weight: 600; color: #48bb78; font-size: clamp(0.95rem, 3.5vw, 1.05rem);">51%</span> | ||
</div> | </div> | ||
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: min(0.5rem, 2vw);"> | <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: min(0.5rem, 2vw);"> | ||
<span style="font-weight: 600; color: #2d3748; font-size: clamp(0.95rem, 3.5vw, 1.05rem);">🕛 Deadline:</span> | <span style="font-weight: 600; color: #2d3748; font-size: clamp(0.95rem, 3.5vw, 1.05rem);">🕛 Deadline:</span> | ||
<span style="font-weight: 600; color: #2d3748; font-size: clamp(0.95rem, 3.5vw, 1.05rem);">31st May | <span style="font-weight: 600; color: #2d3748; font-size: clamp(0.95rem, 3.5vw, 1.05rem);">31st May 2026</span> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 77: | Line 77: | ||
<div style="background: #f7fafc; border-radius: min(8px, 2vw); padding: min(1.5rem, 4vw); text-align: center;"> | <div style="background: #f7fafc; border-radius: min(8px, 2vw); padding: min(1.5rem, 4vw); text-align: center;"> | ||
<div style="font-weight: 700; color: #2d3748; font-size: clamp(1rem, 3.8vw, 1.1rem); margin-bottom: min(0.5rem, 2vw);">💰 $20+ Donators</div> | <div style="font-weight: 700; color: #2d3748; font-size: clamp(1rem, 3.8vw, 1.1rem); margin-bottom: min(0.5rem, 2vw);">💰 $20+ Donators</div> | ||
<div style="color: #718096; font-style: italic; font-size: clamp(0.9rem, 3.5vw, 1rem);"> | <div style="color: #718096; font-style: italic; font-size: clamp(0.9rem, 3.5vw, 1rem);">Skyrock</div> | ||
</div> | </div> | ||
</div> | </div> | ||