Polish small components: team cards, support card alignment, gallery filters to CSS, budget sidebar, bullet list, select dropdown
This commit is contained in:
@@ -49,12 +49,12 @@
|
||||
<p><strong>Taawunu (تَعَاوُنُوا)</strong> comes from the Quranic verse: <em>"And cooperate in righteousness and piety"</em> (Al-Ma'idah 5:2). The word is a plural imperative — it's not one person saving the world. It's a command to work together.</p>
|
||||
<p>We are a small, focused team that designs, manages, and verifies community development projects for marginalized populations. We partner with registered charities (who handle donations and provide tax receipts) and local implementation organisations (who coordinate ground-level work).</p>
|
||||
<p><strong>What we bring:</strong></p>
|
||||
<ul style="padding-left: 20px; margin-bottom: 20px;">
|
||||
<li style="margin-bottom: 8px;">Project design — the 4-pillar sequential model</li>
|
||||
<li style="margin-bottom: 8px;">Budget management — every pound tracked and reported</li>
|
||||
<li style="margin-bottom: 8px;">Monitoring & evaluation — field visits, honest reports</li>
|
||||
<li style="margin-bottom: 8px;">Technology — dashboards, data systems, digital infrastructure</li>
|
||||
<li style="margin-bottom: 8px;">Fundraising strategy — campaign design for charity partners</li>
|
||||
<ul>
|
||||
<li>Project design — the 4-pillar sequential model</li>
|
||||
<li>Budget management — every pound tracked and reported</li>
|
||||
<li>Monitoring & evaluation — field visits, honest reports</li>
|
||||
<li>Technology — dashboards, data systems, digital infrastructure</li>
|
||||
<li>Fundraising strategy — campaign design for charity partners</li>
|
||||
</ul>
|
||||
<p><strong>What we don't do:</strong> We don't collect donations directly. We don't issue tax receipts. We don't operate as a registered charity. This is intentional — it keeps us focused on design, management, and accountability rather than fundraising compliance.</p>
|
||||
</div>
|
||||
|
||||
@@ -864,6 +864,17 @@ p { margin-bottom: 16px; max-width: 720px; }
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
}
|
||||
.team-card {
|
||||
background: var(--paper);
|
||||
border-radius: 4px;
|
||||
padding: 32px 24px;
|
||||
box-shadow: 0 1px 6px rgba(61, 31, 21, 0.06);
|
||||
transition: all 0.25s;
|
||||
}
|
||||
.team-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(61, 31, 21, 0.1);
|
||||
}
|
||||
.team-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
@@ -1076,6 +1087,109 @@ p { margin-bottom: 16px; max-width: 720px; }
|
||||
.photo-mosaic img { height: 200px; }
|
||||
}
|
||||
|
||||
/* ─── Gallery Item (from gallery page) ─── */
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.gallery-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }
|
||||
.gallery-item.wide { grid-column: span 2; }
|
||||
.gallery-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
.gallery-item:hover img { transform: scale(1.05); }
|
||||
.gallery-item .overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(61,31,21,0.8) 0%, transparent 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 20px;
|
||||
}
|
||||
.gallery-item:hover .overlay { opacity: 1; }
|
||||
.overlay .pillar-tag {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 3px 8px;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 6px;
|
||||
width: fit-content;
|
||||
}
|
||||
.tag-water { background: rgba(37,120,161,0.85); color: white; }
|
||||
.tag-food { background: rgba(45,106,79,0.85); color: white; }
|
||||
.tag-livelihoods { background: rgba(107,58,42,0.85); color: white; }
|
||||
.tag-education { background: rgba(201,168,76,0.85); color: white; }
|
||||
.overlay .caption-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.overlay .caption-desc {
|
||||
font-size: 12px;
|
||||
color: rgba(245,239,224,0.8);
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.gallery-item.wide { grid-column: span 1; }
|
||||
.gallery-item.tall { grid-row: span 1; aspect-ratio: 4/3; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.gallery-grid { grid-template-columns: 1fr; gap: 4px; }
|
||||
}
|
||||
|
||||
/* ─── Gallery Filters ─── */
|
||||
.gallery-filters {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding: 24px 0 16px;
|
||||
}
|
||||
.filter-btn {
|
||||
font-family: var(--font-body);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 6px 16px;
|
||||
border-radius: 3px;
|
||||
border: 1.5px solid var(--muted);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.filter-btn:hover { opacity: 0.8; }
|
||||
.filter-btn.active {
|
||||
background: var(--earth);
|
||||
border-color: var(--earth);
|
||||
color: white;
|
||||
}
|
||||
.filter-btn[data-filter="water"] { border-color: var(--water); color: var(--water); }
|
||||
.filter-btn[data-filter="food"] { border-color: var(--green); color: var(--green); }
|
||||
.filter-btn[data-filter="livelihoods"] { border-color: var(--earth); color: var(--earth); }
|
||||
.filter-btn[data-filter="education"] { border-color: var(--gold); color: var(--gold); }
|
||||
.filter-btn[data-filter="water"].active { background: var(--water); border-color: var(--water); color: white; }
|
||||
.filter-btn[data-filter="food"].active { background: var(--green); border-color: var(--green); color: white; }
|
||||
.filter-btn[data-filter="livelihoods"].active { background: var(--earth); border-color: var(--earth); color: white; }
|
||||
.filter-btn[data-filter="education"].active { background: var(--gold); border-color: var(--gold); color: white; }
|
||||
|
||||
/* ─── Prose ─── */
|
||||
.prose {
|
||||
font-size: 17px;
|
||||
@@ -1094,6 +1208,33 @@ p { margin-bottom: 16px; max-width: 720px; }
|
||||
border-radius: 4px;
|
||||
margin: 32px 0;
|
||||
}
|
||||
.prose ul {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.prose ul li {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.prose ul li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 9px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--gold);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ─── Responsive: budget + contact grids ─── */
|
||||
@media (max-width: 768px) {
|
||||
.contact-grid { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
|
||||
/* ─── Animations ─── */
|
||||
.fade-up {
|
||||
@@ -1119,6 +1260,8 @@ p { margin-bottom: 16px; max-width: 720px; }
|
||||
box-shadow: 0 1px 6px rgba(61, 31, 21, 0.06);
|
||||
border-top: 4px solid var(--green);
|
||||
transition: all 0.25s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.support-card:hover {
|
||||
transform: translateY(-4px);
|
||||
@@ -1130,6 +1273,9 @@ p { margin-bottom: 16px; max-width: 720px; }
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.support-card .support-card-bottom {
|
||||
margin-top: auto;
|
||||
}
|
||||
.support-card .btn { width: 100%; justify-content: center; }
|
||||
|
||||
/* ─── Contact Form ─── */
|
||||
@@ -1154,6 +1300,12 @@ p { margin-bottom: 16px; max-width: 720px; }
|
||||
font-size: 15px;
|
||||
background: white;
|
||||
transition: border-color 0.2s;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239C9488' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 16px center;
|
||||
padding-right: 40px;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
|
||||
+8
-82
@@ -8,66 +8,7 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<style>
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
.gallery-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }
|
||||
.gallery-item.wide { grid-column: span 2; }
|
||||
.gallery-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
.gallery-item:hover img { transform: scale(1.05); }
|
||||
.gallery-item .overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(61,31,21,0.8) 0%, transparent 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 20px;
|
||||
}
|
||||
.gallery-item:hover .overlay { opacity: 1; }
|
||||
.overlay .pillar-tag {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 3px 8px;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 6px;
|
||||
width: fit-content;
|
||||
}
|
||||
.overlay .caption-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: var(--cream);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.overlay .caption-desc {
|
||||
font-size: 12px;
|
||||
color: rgba(245,239,224,0.7);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.tag-water { background: rgba(37,120,161,0.8); color: white; }
|
||||
.tag-food { background: rgba(45,106,79,0.8); color: white; }
|
||||
.tag-livelihoods { background: rgba(107,58,42,0.8); color: white; }
|
||||
.tag-education { background: rgba(201,168,76,0.8); color: var(--deep); }
|
||||
|
||||
.gallery-item { cursor: pointer; }
|
||||
/* Lightbox */
|
||||
.lightbox {
|
||||
display: none;
|
||||
@@ -124,15 +65,6 @@
|
||||
.lightbox-nav:hover { opacity: 1; }
|
||||
.lightbox-prev { left: 10px; }
|
||||
.lightbox-next { right: 10px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.gallery-item.wide { grid-column: span 1; }
|
||||
.gallery-item.tall { grid-row: span 1; aspect-ratio: 4/3; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.gallery-grid { grid-template-columns: 1fr; gap: 4px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -167,13 +99,13 @@
|
||||
</section>
|
||||
|
||||
<!-- Pillar filter -->
|
||||
<section style="padding: 24px 0; border-bottom: 1px solid rgba(156,148,136,0.15);">
|
||||
<div class="container" style="display:flex; gap:12px; flex-wrap:wrap;">
|
||||
<button class="filter-btn active" data-filter="all" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--earth); background:var(--earth); color:white; cursor:pointer; transition:all 0.2s;">All</button>
|
||||
<button class="filter-btn" data-filter="water" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--water); background:transparent; color:var(--water); cursor:pointer; transition:all 0.2s;">💧 Water</button>
|
||||
<button class="filter-btn" data-filter="food" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--green); background:transparent; color:var(--green); cursor:pointer; transition:all 0.2s;">🌾 Food</button>
|
||||
<button class="filter-btn" data-filter="livelihoods" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--earth); background:transparent; color:var(--earth); cursor:pointer; transition:all 0.2s;">💼 Livelihoods</button>
|
||||
<button class="filter-btn" data-filter="education" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--gold); background:transparent; color:var(--gold); cursor:pointer; transition:all 0.2s;">📚 Education</button>
|
||||
<section style="border-bottom: 1px solid rgba(156,148,136,0.15);">
|
||||
<div class="container gallery-filters">
|
||||
<button class="filter-btn active" data-filter="all">All</button>
|
||||
<button class="filter-btn" data-filter="water">💧 Water</button>
|
||||
<button class="filter-btn" data-filter="food">🌾 Food</button>
|
||||
<button class="filter-btn" data-filter="livelihoods">💼 Livelihoods</button>
|
||||
<button class="filter-btn" data-filter="education">📚 Education</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -343,14 +275,8 @@ document.getElementById('navToggle').addEventListener('click', () => document.ge
|
||||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.filter-btn').forEach(b => {
|
||||
b.style.background = 'transparent';
|
||||
b.classList.remove('active');
|
||||
});
|
||||
btn.style.background = btn.dataset.filter === 'all' ? 'var(--earth)' :
|
||||
btn.dataset.filter === 'water' ? 'var(--water)' :
|
||||
btn.dataset.filter === 'food' ? 'var(--green)' :
|
||||
btn.dataset.filter === 'livelihoods' ? 'var(--earth)' : 'var(--gold)';
|
||||
btn.style.color = 'white';
|
||||
btn.classList.add('active');
|
||||
|
||||
const filter = btn.dataset.filter;
|
||||
|
||||
@@ -107,7 +107,8 @@
|
||||
<!-- Budget -->
|
||||
<h3 class="fade-up mt-5 mb-2">Budget Transparency</h3>
|
||||
<p class="fade-up" style="font-size:14px; color:#888;">Full budget breakdown. Updated after each phase.</p>
|
||||
<table class="budget-table fade-up" style="max-width:640px;">
|
||||
<div class="fade-up" style="display:grid; grid-template-columns:3fr 2fr; gap:40px; align-items:start;">
|
||||
<table class="budget-table">
|
||||
<thead>
|
||||
<tr><th>Item</th><th style="text-align:right;">Amount</th></tr>
|
||||
</thead>
|
||||
@@ -127,6 +128,17 @@
|
||||
<tr><td><strong>Total</strong></td><td><strong>£43,006</strong></td></tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div style="background:var(--light-cream); border-radius:4px; padding:28px; border-left:3px solid var(--gold);">
|
||||
<div style="font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:16px;">Revenue Projection</div>
|
||||
<div style="font-family:var(--font-mono); font-size:28px; color:var(--earth); line-height:1; margin-bottom:4px;">£92,000</div>
|
||||
<div style="font-size:13px; color:var(--muted); margin-bottom:20px;">annual revenue from fish sales</div>
|
||||
<div style="font-family:var(--font-mono); font-size:28px; color:var(--green); line-height:1; margin-bottom:4px;">167%</div>
|
||||
<div style="font-size:13px; color:var(--muted); margin-bottom:20px;">3-year ROI</div>
|
||||
<div style="font-family:var(--font-mono); font-size:28px; color:var(--gold); line-height:1; margin-bottom:4px;">6%</div>
|
||||
<div style="font-size:13px; color:var(--muted); margin-bottom:20px;">management fee</div>
|
||||
<div style="font-size:12px; color:var(--muted); padding-top:16px; border-top:1px solid rgba(156,148,136,0.2); line-height:1.5;">Every pound is tracked. Management fees are openly listed. This isn't overhead — it's how the system stays accountable.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -79,6 +79,7 @@
|
||||
<div class="label" style="color:var(--water); margin-bottom:8px;">💧 Water</div>
|
||||
<h3>Solar Water Well — Lolo Camp</h3>
|
||||
<p>Fund a solar-powered borehole providing 10,000 litres of clean water daily to 4,000+ refugees. No fuel costs, no recurring expenses — powered by the sun.</p>
|
||||
<div class="support-card-bottom">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:16px;">
|
||||
<div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--water);">£5,000</strong></div>
|
||||
<div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah Jariyah</strong></div>
|
||||
@@ -86,12 +87,14 @@
|
||||
<a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
|
||||
<p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="support-card fade-up" style="border-top-color: var(--green);">
|
||||
<div class="support-card-img"><img src="/images/gallery/fish-harvest-community.jpg" alt="Community harvesting catfish — this is what your donation funds" loading="lazy"></div>
|
||||
<div class="label" style="color:var(--green); margin-bottom:8px;">🌾 Food</div>
|
||||
<h3>Lolo Aquaculture — Phase 2</h3>
|
||||
<p>Fund the next phase of the community fish farm: broodstock acquisition, hatchery commissioning, and first pond stocking. This is the step that turns infrastructure into food.</p>
|
||||
<div class="support-card-bottom">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:16px;">
|
||||
<div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--green);">£8,700</strong></div>
|
||||
<div><span class="label">Type</span><br><strong style="font-size:14px;">Zakat Eligible</strong></div>
|
||||
@@ -99,12 +102,14 @@
|
||||
<a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
|
||||
<p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="support-card fade-up" style="border-top-color: var(--gold);">
|
||||
<div class="support-card-img"><img src="/images/gallery/children-classroom-light.jpg" alt="Children studying in their classroom — education funded by community enterprise" loading="lazy"></div>
|
||||
<div class="label" style="color:var(--gold); margin-bottom:8px;">📚 Education</div>
|
||||
<h3>Quran School Materials</h3>
|
||||
<p>Provide writing boards (alluha), ink, and solar lights for the traditional Quran schools at Lolo Camp. A small investment with deep cultural significance.</p>
|
||||
<div class="support-card-bottom">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:16px;">
|
||||
<div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--gold);">£500</strong></div>
|
||||
<div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah</strong></div>
|
||||
@@ -114,6 +119,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Other ways -->
|
||||
|
||||
Reference in New Issue
Block a user