<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cricket – Landing Page Template</title>
<meta name="description" content="Beautiful, fast, and responsive cricket landing page template in English." />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#0b1211;
--card:#111a19;
--muted:#9fb5b1;
--text:#eaf2f1;
--brand:#1db954;
--brand-2:#15a34a;
--ring:rgba(29,185,84,.35);
--shadow: 0 10px 30px rgba(0,0,0,.35);
--radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;scroll-behavior:smooth}
body{
font-family:'Roboto', sans-serif;
background: radial-gradient(1200px 600px at 80% -10%, rgba(29,185,84,.12), transparent 60%),
radial-gradient(900px 500px at 10% 110%, rgba(29,185,84,.12), transparent 60%),
var(--bg);
color:var(--text);
line-height:1.6;
}
.container{width:min(1100px, 92%);margin-inline:auto}
header{
position:sticky;top:0;z-index:50;
backdrop-filter:saturate(1.3) blur(8px);
background:linear-gradient(180deg, rgba(11,18,17,.85), rgba(11,18,17,.55));
border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo{
width:36px;height:36px;border-radius:12px;
background:conic-gradient(from 210deg, var(--brand), var(--brand-2));
display:grid;place-items:center;box-shadow:var(--shadow)
}
.logo svg{width:22px;height:22px;fill:#06140d}
.nav a{color:var(--muted);text-decoration:none;margin-inline:12px;font-size:18px}
.nav a:hover{color:var(--text)}
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;
background:linear-gradient(180deg, var(--brand), var(--brand-2));
color:#06140d;font-weight:700;border:none;padding:10px 18px;border-radius:14px;
box-shadow: 0 8px 24px var(--ring);cursor:pointer}
.btn:focus{outline:3px solid var(--ring)}
.btn.secondary{background:#0f1716;color:var(--text);border:1px solid rgba(255,255,255,.08)}
.hero{padding:72px 0 36px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.tag{display:inline-flex;gap:8px;align-items:center;background:rgba(29,185,84,.12);border:1px solid rgba(29,185,84,.35);color:#a7f3d0;padding:6px 10px;border-radius:999px;font-size:14px}
h1{font-size:44px;margin:12px 0 12px;line-height:1.25}
p.lead{color:var(--muted);font-size:20px;margin:0 0 18px}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);
border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.stat{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:14px;text-align:center}
.stat strong{display:block;font-size:28px}
.stat span{color:var(--muted)}
.section{padding:36px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px;font-size:26px}
.card p{color:var(--muted);margin:0}
.icon{width:28px;height:28px}
.schedule{overflow:hidden}
.match{
display:grid;grid-template-columns:1.2fr .6fr .6fr .6fr;gap:8px;align-items:center;
padding:12px 14px;border-bottom:1px dashed rgba(255,255,255,.08)
}
.match strong{font-size:18px}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:14px;background:rgba(255,255,255,.08)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.news-card{display:flex;flex-direction:column;gap:10px}
.news-card img{width:100%;height:170px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.news-card h4{margin:0;font-size:22px}
.news-card p{margin:0;color:var(--muted)}
.cta{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:linear-gradient(120deg, rgba(29,185,84,.18), rgba(29,185,84,.08));
border:1px solid rgba(29,185,84,.35);border-radius:var(--radius);padding:18px}
.input{
display:flex;gap:8px;background:#0d1615;border:1px solid rgba(255,255,255,.08);
border-radius:12px;padding:6px
}
.input input{all:unset;color:var(--text);padding:8px 10px;flex:1}
footer{padding:26px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,.06);margin-top:36px}
@media (max-width: 900px){
.hero-grid{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr 1fr}
.news-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
.grid-3,.news-grid{grid-template-columns:1fr}
.match{grid-template-columns:1fr .6fr .6fr}
.hide-sm{display:none}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div>
<div>
<div aria-hidden="true">
<svg viewBox="0 0 24 24" role="img" aria-label="Cricket Ball"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm4.6 3.4a9 9 0 0 1 0 12.73c-3.52-3.52-9.21-3.52-12.73 0A9 9 0 0 1 16.6 5.4Z"/></svg>
</div>
<span>Cricket</span>
</div>
<nav>
<a href="#features">Features</a>
<a href="#schedule">Match Schedule</a>
<a href="#news">News</a>
<a href="#cta">Download</a>
</nav>
<button onclick="document.querySelector('#cta').scrollIntoView({behavior:'smooth'})">Get Started</button>
</div>
</header>
<!-- Hero -->
<section>
<div>
<div>
<span>New Update • Real-Time Scores</span>
<h1>Your Favorite Cricket—In One Beautiful Landing Page</h1>
<p>Live scores, match schedules, news, and analytics—all in one place. Use this template instantly for your app or service.</p>
<div style="display:flex;gap:10px;margin-top:8px">
<a href="#features">Learn More</a>
<a href="#news">Latest News</a>
</div>
<div>
<div><strong>+120</strong><span>Leagues Covered</span></div>
<div><strong>2.5M</strong><span>Score Updates/Day</span></div>
<div><strong>99.9%</strong><span>Uptime</span></div>
</div>
</div>
<div>
<div>
<img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?q=80&w=1200&auto=format&fit=crop" alt="Cricket Stadium" style="width:100%;height:280px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08)">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px">
<button onclick="alert('This is a demo button 🙂')">Watch Live</button>
<button onclick="alert('Shared!')">Share</button>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div>
<h2 style="margin:0 0 12px">Powerful Features</h2>
<p style="margin:0 0 18px;color:var(--muted)">Everything a modern cricket platform needs.</p>
<div>
<div>
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M21 3H3v18h18V3zM5 5h14v2H5V5zm0 4h14v10H5V9zm3 2v6l5-3-5-3z"/></svg>
<h3>Highlights Videos</h3>
<p>Instant match clips and top moments—high quality with less data.</p>
</div>
<div>
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1-4-2.4V7z"/></svg>
<h3>Real-Time Scores</h3>
<p>Fast updates, bowler/batsman stats, and one-click sharing.</p>
</div>
<div>
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M3 5h18v2H3V5zm0 6h12v2H3v-2zm0 6h18v2H3v-2z"/></svg>
<h3>Team & Player Profiles</h3>
<p>Performance graphs, form guides, and head-to-head comparisons.</p>
</div>
</div>
</div>
</section>
<!-- Schedule -->
<section id="schedule">
<div>
<h2 style="margin:0 0 12px">Upcoming Matches</h2>
<div role="table" aria-label="Match Schedule">
<div role="row">
<strong role="cell">Karachi Kings vs Lahore Qalandars</strong>
<span role="cell">Today, 7:30 PM</span>
<span role="cell">National Stadium</span>
<span role="cell">TV: Sports HD</span>
</div>
<div role="row">
<strong role="cell">Quetta Gladiators vs Multan Sultans</strong>
<span role="cell">Tomorrow, 6:00 PM</span>
<span role="cell">Multan Cricket Stadium</span>
<span role="cell">TV: Plus</span>
</div>
<div role="row">
<strong role="cell">Islamabad United vs Peshawar Zalmi</strong>
<span role="cell">Sep 3, 8:00 PM</span>
<span role="cell">Pindi Cricket Stadium</span>
<span role="cell">TV: Max</span>
</div>
</div>
</div>
</section>
<!-- News -->
<section id="news">
<div>
<h2 style="margin:0 0 12px">Latest News</h2>
<div>
<article>
<img src="https://images.unsplash.com/photo-1601314167099-232775c1bb51?q=80&w=1200&auto=format&fit=crop" alt="Batsman hitting a shot" />
<h4>Captain’s Century Turns the Game</h4>
<p>A thrilling finish with explosive batting in the last over—experts share their views.</p>
<a href="#">Read More</a>
</article>
<article>
<img src="https://images.unsplash.com/photo-1519451241324-20b4ea2c4220?q=80&w=1200&auto=format&fit=crop" alt="Bowler in action" />
<h4>New Speed Record</h4>
<p>Young fast bowler clocks 156 km/h—could this be the next superstar?</p>
<a href="#">Read More</a>
</article>
<article>
<img src="https://images.unsplash.com/photo-1542267847-65c55232fb5b?q=80&w=1200&auto=format&fit=crop" alt="Excited fans in stadium" />
<h4>Record Attendance</h4>
<p>Ticket sales exceeded expectations—new facilities and family zones introduced.</p>
<a href="#">Read More</a>
</article>
</div>
</div>
</section>
<!-- CTA -->
<section id="cta">
<div>
<div>
<h3 style="margin:0 0 8px">Start Your Cricket App Today</h3>
<p style="margin:0;color:var(--muted)">Enter your email—we’ll send you the download link and guidance.</p>
</div>
<form onsubmit="return subscribe(event)">
<input type="email" name="email" placeholder="Your Email" required>
<button type="submit">Send</button>
</form>
</div>
</section>
<footer>
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap">
<span>© <span id="year"></span> Cricket — All rights reserved</span>
<div style="display:flex;gap:12px">
<a href="#features">Features</a>
<a href="#schedule">Schedule</a>
<a href="#news">News</a>
<a href="#">Privacy</a>
</div>
</div>
</footer>
<script>
// Auto year
document.getElementById('year').textContent = new Date().getFullYear();
// Simple form handler (demo)
function subscribe(e){
e.preventDefault();
const form = e.target;
const email = form.email.value.trim();
if(!email){
alert('Please enter a valid email.');
return false;
}
alert('Thanks! We'll email you the download link: ' + email);
form.reset();
return false;
}
</script>
</body>
</html>
