<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Africa’s Leaders – Final</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{
width:100%;
background:#000;
overflow-x:hidden;
font-family:'Inter',sans-serif;
color:#fff;
}
/* ================= TOP BAR ================= */
.top-bar{
background:#000;
border-bottom:1px solid rgba(255,255,255,.08);
padding:14px 30px;
display:flex;
justify-content:space-between;
align-items:center;
}
.top-bar img{height:42px}
/* ================= MENU ================= */
.menu-bar{
background:#fff;
padding:18px 20px;
box-shadow:0 14px 36px rgba(0,0,0,.28);
}
.menu-bar ul{
list-style:none;
display:flex;
justify-content:center;
gap:32px;
flex-wrap:wrap;
}
.menu-bar a{
text-decoration:none;
color:#111;
font-size:14px;
font-weight:500;
}
.menu-bar a:hover{color:#CF9E66}
/* ================= HERO ================= */
.hero{
min-height:calc(100vh - 170px);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:90px 20px;
background:
radial-gradient(circle at 70% 30%, rgba(207,158,102,.06), transparent 55%),
radial-gradient(circle at 30% 70%, rgba(255,255,255,.03), transparent 50%);
}
.hero h1{
font-family:'Playfair Display',serif;
font-size:56px;
color:#CF9E66;
margin-bottom:30px;
}
.hero span{
color:#E6E1D6;
font-weight:600;
letter-spacing:2px;
min-width:260px;
display:inline-block;
}
.hero p{
max-width:820px;
margin:auto;
font-size:17px;
line-height:1.75;
color:#E4E4E4;
margin-bottom:42px;
}
.hero a{
padding:14px 38px;
background:#CF9E66;
color:#000;
font-weight:600;
border-radius:30px;
text-decoration:none;
}
/* ================= DIVIDER ================= */
.section-divider{
height:90px;
background:linear-gradient(
to bottom,
#000,
rgba(207,158,102,.08),
#000
);
}
/* ================= SECTION 2 ================= */
.section2{padding:90px 0 0}
.section2 h2{
font-family:'Playfair Display',serif;
text-align:center;
font-size:42px;
}
.section2 p{
text-align:center;
color:#cfcfcf;
margin-top:10px;
}
.section2-inner{
max-width:1300px;
margin:70px auto 0;
padding:0 30px;
display:grid;
grid-template-columns:360px 1fr;
gap:60px;
align-items:center;
}
/* EARTH */
.earth-wrap{
width:320px;height:320px;border-radius:50%;
box-shadow:0 0 70px rgba(207,158,102,.45);
}
.earth{
width:100%;height:100%;border-radius:50%;
background:url("https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg") center/cover no-repeat;
animation:spin 80s linear infinite;
transition:transform 1.8s ease;
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* TABS */
.tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{
background:transparent;
border:1px solid #CF9E66;
color:#CF9E66;
padding:9px 18px;
cursor:pointer;
font-size:13px;
}
.tabs button.active{background:#CF9E66;color:#000}
/* GRAPH */
.scale{
font-size:12px;
color:#9a9a9a;
text-align:right;
margin-bottom:12px;
}
.graph{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
}
.card{
background:#161616;
padding:18px;
border-left:3px solid #CF9E66;
}
.card h4{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}
.bar{height:5px;background:#2a2a2a}
.fill{
height:100%;
width:0;
background:#CF9E66;
transition:width 1.2s ease;
}
/* SUBSCRIBER STRIP */
.subscriber-strip{
margin-top:80px;
background:#0b0b0b;
border-top:1px solid rgba(207,158,102,.25);
border-bottom:1px solid rgba(207,158,102,.25);
}
.strip-inner{
max-width:1300px;
margin:auto;
padding:44px 30px;
text-align:center;
}
.strip-title{
font-family:'Playfair Display',serif;
font-size:26px;
}
.strip-count{
font-family:'Playfair Display',serif;
font-size:58px;
color:#CF9E66;
margin:12px 0;
}
.strip-btn{
padding:12px 44px;
background:#CF9E66;
border:none;
font-weight:600;
cursor:pointer;
}
/* ================= SECTION 3 ================= */
.section3{
width:100%;
background:#000;
padding:120px 0;
}
.section3-inner{
width:100%;
display:grid;
grid-template-columns:420px 1fr;
gap:90px;
align-items:center;
padding:0 60px;
}
.mag-cover img{
width:100%;
border-radius:8px;
box-shadow:0 60px 120px rgba(0,0,0,.85);
}
.mag-eyebrow{
font-size:14px;
letter-spacing:5px;
color:#CF9E66;
margin-bottom:24px;
}
.mag-title{
font-family:'Playfair Display',serif;
font-size:60px;
line-height:1.05;
margin-bottom:30px;
}
.mag-text{
font-size:22px;
line-height:1.9;
color:#E6E6E6;
margin-bottom:26px;
}
.mag-text.secondary{font-size:19px;color:#CFCFCF}
.mag-btn{
display:inline-block;
margin-top:34px;
padding:16px 44px;
background:#CF9E66;
color:#000;
font-weight:600;
text-decoration:none;
}
/* RESPONSIVE */
@media(max-width:900px){
.section2-inner,.section3-inner{
grid-template-columns:1fr;
text-align:center;
}
.hero h1{font-size:38px}
}
</style>
</head>
<body>
<div class="top-bar">
<div>🔍</div>
<img src="logo.png">
<div>☰</div>
</div>
<div class="menu-bar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MAGAZINE</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">ARTICLES</a></li>
<li><a href="#">BLOGS</a></li>
<li><a href="#">GET FEATURED</a></li>
<li><a href="#">NEWSLETTER</a></li>
<li><a href="#">DONATE FOR AFRICA</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
<section class="hero">
<div>
<h1>A Global Business Platform<br>for <span id="word"></span></h1>
<p>Africa’s Leaders is a premium platform showcasing influential voices, powerful ideas, and leadership journeys shaping business, innovation, and progress across the African continent.</p>
<a href="#">About Africa’s Leaders</a>
</div>
</section>
<div class="section-divider"></div>
<section class="section2">
<h2>OUR GLOBAL SUBSCRIBERS</h2>
<p>Readers of Our News, Articles & Magazines</p>
<div class="section2-inner">
<div class="earth-wrap"><div id="earth" class="earth"></div></div>
<div>
<div class="tabs">
<button class="active" onclick="changeRegion('world',120,this)">World</button>
<button onclick="changeRegion('america',80,this)">America</button>
<button onclick="changeRegion('asia',-60,this)">Asia</button>
<button onclick="changeRegion('africa',10,this)">Africa</button>
<button onclick="changeRegion('europe',-20,this)">Europe</button>
<button onclick="changeRegion('oceania',160,this)">Oceania</button>
</div>
<div class="scale">Max Scale: 500K+ Readers</div>
<div id="graph" class="graph"></div>
</div>
</div>
<div class="subscriber-strip">
<div class="strip-inner">
<div class="strip-title">GLOBAL SUBSCRIBERS</div>
<div class="strip-count" id="count">1,545,329+</div>
<button class="strip-btn">Subscribe</button>
</div>
</div>
</section>
<section class="section3">
<div class="section3-inner">
<div class="mag-cover">
<img src="https://elevateicons.com/wp-content/uploads/2025/04/Facebook-Cover_Jessica-Fern-Kirkland-scaled.jpg">
</div>
<div>
<div class="mag-eyebrow">LATEST MAGAZINE ISSUE</div>
<h2 class="mag-title">Featuring Visionary Leadership<br>& Global Influence</h2>
<p class="mag-text">The latest edition of <strong>Africa’s Leaders</strong> presents in-depth conversations, leadership journeys, and powerful narratives from individuals shaping industries, communities, and the future of business.</p>
<p class="mag-text secondary">This issue brings forward voices that reflect clarity of purpose, strategic thinking, and the courage required to lead in a rapidly evolving global landscape.</p>
<a href="#" class="mag-btn">Read Full Magazine</a>
</div>
</div>
</section>
<script>
const words=["Leaders","Visionaries","Founders","Innovators","Change Makers"];
let wi=0,ci=0,del=false;
setInterval(()=>{
const w=document.getElementById("word");
if(!del){w.textContent=words[wi].slice(0,++ci);if(ci===words[wi].length)setTimeout(()=>del=true,1200)}
else{w.textContent=words[wi].slice(0,--ci);if(ci===0){del=false;wi=(wi+1)%words.length}}
},90);
let currentAngle=120;
const earth=document.getElementById("earth");
const graph=document.getElementById("graph");
const data={
world:[["America",320],["Asia",280],["Africa",240],["Europe",200],["Middle East",160],["Oceania",90]],
america:[["USA",280],["Canada",60],["Brazil",40],["Mexico",30],["Argentina",20]],
asia:[["India",180],["UAE",70],["Japan",60],["Singapore",50],["Indonesia",40]],
africa:[["Nigeria",110],["South Africa",90],["Kenya",60],["Egypt",50],["Ghana",30]],
europe:[["UK",90],["Germany",70],["France",55],["Italy",45],["Netherlands",35]],
oceania:[["Australia",60],["New Zealand",20],["Fiji",10],["PNG",8],["Samoa",5]]
};
function rotateEarth(target){
let diff=target-currentAngle;
if(diff>180)diff-=360;
if(diff<-180)diff+=360;
currentAngle+=diff;
earth.style.transform=`rotate(${currentAngle}deg)`;
}
function changeRegion(region,angle,btn){
document.querySelectorAll(".tabs button").forEach(b=>b.classList.remove("active"));
btn.classList.add("active");
rotateEarth(angle);
graph.innerHTML="";
const max=500;
data[region].forEach(([name,val])=>{
const card=document.createElement("div");
card.className="card";
card.innerHTML=`<h4><span>${name}</span><span>0K+</span></h4><div class="bar"><div class="fill"></div></div>`;
graph.appendChild(card);
let n=0;
const txt=card.querySelector("span:last-child");
const fill=card.querySelector(".fill");
const w=(val/max)*85;
const t=setInterval(()=>{
n+=Math.ceil(val/28);
if(n>=val){n=val;clearInterval(t)}
txt.textContent=n+"K+";
fill.style.width=w+"%";
},25);
});
}
changeRegion("world",120,document.querySelector(".tabs button"));
</script>
</body>
</html>