<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Mobility Infographic</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<link href="https://api.fontshare.com/v2/css?f[]=cal-sans@400,700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<style>
:root {
--bg-black: #111111;
--accent-blue: #0085FF;
--accent-green: #39FF14;
--text-white: #FFFFFF;
--base-font-size: 48px;
--tracking: 0.05em;
}
body {
background-color: #f8f8f8;
font-family: 'Cal Sans', sans-serif;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
color: var(--text-white);
}
.grid-container {
display: grid;
/* Responsive Grid: 1 col on mobile, 2 on tablet, 3 on desktop */
grid-template-columns: 1fr;
gap: 15px;
width: 100%;
max-width: 1350px; /* 3 columns of ~440px */
}
@media (min-width: 768px) {
.grid-container { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.grid-container { grid-template-columns: repeat(3, 1fr); }
}
.card {
background-color: var(--bg-black);
padding: 40px;
aspect-ratio: 1 / 1; /* Keeps them square */
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
box-sizing: border-box;
transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
}
.card:hover {
background-color: var(--accent-blue);
}
h2, .main-text {
font-size: clamp(32px, 4vw, var(--base-font-size));
font-weight: 700;
line-height: 1.05;
margin: 0;
letter-spacing: var(--tracking);
position: relative;
z-index: 2;
}
.sub-text {
font-family: sans-serif;
font-size: 16px;
margin-top: 20px;
max-width: 80%;
line-height: 1.4;
opacity: 0.8;
z-index: 2;
}
.stat-footer {
margin-top: auto;
text-align: right;
z-index: 2;
}
.big-number {
font-size: clamp(50px, 8vw, 84px);
font-weight: 700;
line-height: 1;
margin-top: auto;
display: flex;
align-items: center;
gap: 15px;
z-index: 2;
}
.canvas-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.ph-fill-icon {
font-size: clamp(80px, 10vw, 110px);
color: var(--accent-green);
align-self: flex-end;
margin-top: auto;
z-index: 2;
}
.ph-arrow-fill {
font-size: 0.5em;
color: var(--accent-green);
}
.van-pattern {
position: absolute;
bottom: 10%;
right: 5%;
font-size: clamp(100px, 15vw, 180px);
color: rgba(255,255,255,0.15);
z-index: 1;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="card">
<h2>High-speed rails can travel up to 350 km/h</h2>
<div id="canvas-rail" class="canvas-container"></div>
</div>
<div class="card">
<h2>Africa's mobility market is projected to surpass $18B by 2035</h2>
<div id="canvas-graph" class="canvas-container"></div>
<div class="stat-footer">
<div style="font-size: 20px;"><strong>$8.9B</strong><br><span style="opacity: 0.6;">2025</span></div>
</div>
</div>
<div class="card">
<h2>Electric vehicles produce zero tailpipe emissions.</h2>
<p class="sub-text">70% cleaner over their entire lifespan than gasoline cars.</p>
<i class="ph-fill ph-leaf ph-fill-icon"></i>
</div>
<div class="card">
<h2>A single trotro in Accra generates over $65+ in daily revenue.</h2>
<i class="ph-fill ph-van van-pattern"></i>
<div id="canvas-vans" class="canvas-container"></div>
</div>
<div class="card">
<h2>Trotro fares consume about 20%-22% of the average monthly salary.</h2>
</div>
<div class="card">
<div class="main-text">Nigeria's transport sector is a billion dollar industry.</div>
<div class="big-number">
$1.61B
<i class="ph-fill ph-arrow-circle-up ph-arrow-fill"></i>
</div>
</div>
</div>
<script>
// Helper to handle resizing for p5 sketches
function createResponsiveSketch(id, drawFn) {
new p5((p) => {
p.setup = () => {
let container = p.select('#' + id);
let canvas = p.createCanvas(container.width, container.height);
canvas.parent(id);
};
p.windowResized = () => {
let container = p.select('#' + id);
p.resizeCanvas(container.width, container.height);
};
p.draw = () => {
p.clear();
drawFn(p);
};
});
}
// Sketch 1: Rails
createResponsiveSketch('canvas-rail', (p) => {
p.stroke(255, 255, 255, 70);
p.strokeWeight(3);
let spacing = 12;
for(let i = 0; i < 20; i++) {
p.line(0, p.height*0.6 + (i * spacing), p.width, p.height*0.6 + (i * spacing));
}
});
// Sketch 2: Graph
createResponsiveSketch('canvas-graph', (p) => {
p.noFill();
p.stroke(255, 255, 255, 160);
p.strokeWeight(6);
p.beginShape();
p.curveVertex(0, p.height * 0.9);
p.curveVertex(0, p.height * 0.9);
p.curveVertex(p.width * 0.3, p.height * 0.8);
p.curveVertex(p.width * 0.6, p.height * 0.6);
p.curveVertex(p.width, p.height * 0.5);
p.curveVertex(p.width, p.height * 0.5);
p.endShape();
});
// Sketch 3: Vans Pattern
createResponsiveSketch('canvas-vans', (p) => {
p.fill(255, 255, 255, 40);
p.noStroke();
const d = (x, y, s) => {
p.push();
p.translate(x * p.width, y * p.height);
p.scale(s);
p.rect(0, 0, 40, 22, 3);
p.pop();
};
d(0.1, 0.85, 1.2); d(0.3, 0.9, 1.5); d(0.7, 0.8, 1.1);
});
</script>
</body>
</html>“Create a "Responsive Mobility Infographic" component. Use p5.js for creative coding / canvas sketches, Phosphor Icons. Apply hover transitions. Color palette: #111111, #0085ff, #39ff14, #ffffff. Layout: CSS Grid, Flexbox.”