Fundraiser: Difference between revisions
From WikiOasis Meta
More actions
No edit summary |
Update Tags: Mobile edit Mobile web edit |
||
| 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;">$0 of $50</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: 0%; 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);">0%</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);"> | <span style="font-weight: 600; color: #2d3748; font-size: clamp(0.95rem, 3.5vw, 1.05rem);">April 1, 2026</span> | ||
</div> | </div> | ||
</div> | </div> | ||