|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>David Leonard - The Future Prime Minister</title> |
|
|
<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=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #012169; |
|
|
--secondary: #C8102E; |
|
|
--accent: #FFD700; |
|
|
--light: #F8F9FA; |
|
|
--dark: #212529; |
|
|
--transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
line-height: 1.6; |
|
|
color: var(--dark); |
|
|
background-color: var(--light); |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4 { |
|
|
font-family: 'Playfair Display', serif; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.container { |
|
|
width: 100%; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 0 20px; |
|
|
} |
|
|
|
|
|
|
|
|
header { |
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
|
|
color: white; |
|
|
padding: 20px 0; |
|
|
position: fixed; |
|
|
width: 100%; |
|
|
z-index: 1000; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
header.scrolled { |
|
|
padding: 10px 0; |
|
|
background: rgba(1, 33, 105, 0.95); |
|
|
} |
|
|
|
|
|
.header-content { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
font-size: 1.8rem; |
|
|
font-weight: 700; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo span { |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.logo img { |
|
|
height: 50px; |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
nav ul li { |
|
|
margin-left: 30px; |
|
|
} |
|
|
|
|
|
nav ul li a { |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
font-size: 1rem; |
|
|
transition: var(--transition); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
nav ul li a:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: var(--accent); |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
nav ul li a:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
nav ul li a:hover { |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: none; |
|
|
background: none; |
|
|
border: none; |
|
|
color: white; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
height: 100vh; |
|
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1444653614773-995cb1ef9efa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
text-align: center; |
|
|
color: white; |
|
|
padding-top: 80px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.hero-content h1 { |
|
|
font-size: 4rem; |
|
|
margin-bottom: 1rem; |
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.hero-content h2 { |
|
|
font-size: 2rem; |
|
|
font-weight: 300; |
|
|
margin-bottom: 2rem; |
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.hero-content p { |
|
|
font-size: 1.2rem; |
|
|
max-width: 800px; |
|
|
margin: 0 auto 2rem; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-block; |
|
|
padding: 12px 30px; |
|
|
background: var(--accent); |
|
|
color: var(--primary); |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
border-radius: 50px; |
|
|
transition: var(--transition); |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
font-size: 1rem; |
|
|
margin: 0 10px; |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background: transparent; |
|
|
color: white; |
|
|
border: 2px solid white; |
|
|
} |
|
|
|
|
|
.btn-outline:hover { |
|
|
background: white; |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
|
|
|
.section { |
|
|
padding: 100px 0; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
text-align: center; |
|
|
margin-bottom: 60px; |
|
|
} |
|
|
|
|
|
.section-title h2 { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 15px; |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.section-title p { |
|
|
color: #666; |
|
|
max-width: 700px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.about-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 50px; |
|
|
} |
|
|
|
|
|
.about-img { |
|
|
flex: 1; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.about-img img { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.about-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.about-text h3 { |
|
|
font-size: 2rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.about-text p { |
|
|
margin-bottom: 15px; |
|
|
color: #555; |
|
|
} |
|
|
|
|
|
.stats { |
|
|
display: flex; |
|
|
margin-top: 30px; |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.stat-item { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.stat-item .number { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 700; |
|
|
color: var(--secondary); |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.stat-item .label { |
|
|
font-size: 0.9rem; |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
|
|
|
.policies { |
|
|
background: #f5f7fa; |
|
|
} |
|
|
|
|
|
.policies-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.policy-card { |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.policy-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.policy-icon { |
|
|
height: 80px; |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.policy-content { |
|
|
padding: 30px; |
|
|
} |
|
|
|
|
|
.policy-content h3 { |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 15px; |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
|
|
|
.news-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.news-card { |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.news-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.news-img { |
|
|
height: 200px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.news-img img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.news-card:hover .news-img img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.news-content { |
|
|
padding: 25px; |
|
|
} |
|
|
|
|
|
.news-date { |
|
|
font-size: 0.8rem; |
|
|
color: var(--secondary); |
|
|
margin-bottom: 10px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.news-content h3 { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 10px; |
|
|
color: var(--dark); |
|
|
} |
|
|
|
|
|
.news-content p { |
|
|
color: #666; |
|
|
margin-bottom: 15px; |
|
|
font-size: 0.95rem; |
|
|
} |
|
|
|
|
|
|
|
|
.cta { |
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
|
|
color: white; |
|
|
text-align: center; |
|
|
padding: 80px 0; |
|
|
} |
|
|
|
|
|
.cta h2 { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.cta p { |
|
|
font-size: 1.2rem; |
|
|
max-width: 700px; |
|
|
margin: 0 auto 40px; |
|
|
} |
|
|
|
|
|
|
|
|
footer { |
|
|
background: var(--dark); |
|
|
color: white; |
|
|
padding: 60px 0 20px; |
|
|
} |
|
|
|
|
|
.footer-content { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 40px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.footer-column h3 { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.footer-column ul { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.footer-column ul li { |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.footer-column ul li a { |
|
|
color: #ddd; |
|
|
text-decoration: none; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.footer-column ul li a:hover { |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.social-links a { |
|
|
color: white; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: var(--transition); |
|
|
} |
|
|
|
|
|
.social-links a:hover { |
|
|
background: var(--accent); |
|
|
color: var(--dark); |
|
|
} |
|
|
|
|
|
.copyright { |
|
|
text-align: center; |
|
|
padding-top: 20px; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
color: #aaa; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 992px) { |
|
|
.hero-content h1 { |
|
|
font-size: 3rem; |
|
|
} |
|
|
|
|
|
.hero-content h2 { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.about-content { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.about-img { |
|
|
max-width: 500px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
nav ul { |
|
|
position: fixed; |
|
|
top: 80px; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: calc(100vh - 80px); |
|
|
background: var(--primary); |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: 0.5s; |
|
|
z-index: 999; |
|
|
} |
|
|
|
|
|
nav ul.show { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
nav ul li { |
|
|
margin: 15px 0; |
|
|
} |
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.hero-content h1 { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header id="header"> |
|
|
<div class="container"> |
|
|
<div class="header-content"> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-landmark"></i> |
|
|
<span>Leonard</span> for PM |
|
|
</div> |
|
|
<button class="mobile-menu-btn" id="mobileMenuBtn"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<nav> |
|
|
<ul id="navMenu"> |
|
|
<li><a href="#home">Home</a></li> |
|
|
<li><a href="#about">About</a></li> |
|
|
<li><a href="#policies">Policies</a></li> |
|
|
<li><a href="#news">News</a></li> |
|
|
<li><a href="#contact">Contact</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<section class="hero" id="home"> |
|
|
<div class="container"> |
|
|
<div class="hero-content"> |
|
|
<h1>David Leonard</h1> |
|
|
<h2>Leadership for a Stronger United Kingdom</h2> |
|
|
<p>With a bold vision for economic prosperity, national unity, and global leadership, David Leonard represents the fresh leadership Britain needs in these challenging times.</p> |
|
|
<div class="hero-btns"> |
|
|
<a href="#policies" class="btn">Our Policies</a> |
|
|
<a href="#contact" class="btn btn-outline">Join the Movement</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section about" id="about"> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>Meet David Leonard</h2> |
|
|
<p>A proven leader with a track record of delivering results for the British people.</p> |
|
|
</div> |
|
|
<div class="about-content"> |
|
|
<div class="about-img"> |
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=634&q=80" alt="David Leonard"> |
|
|
</div> |
|
|
<div class="about-text"> |
|
|
<h3>The Leader Britain Needs</h3> |
|
|
<p>Born in Manchester to working-class parents, David Leonard understands the challenges facing ordinary Britons. After studying at the London School of Economics, he built a successful career in business before entering politics.</p> |
|
|
<p>As a Member of Parliament for the past 12 years, David has championed economic reforms, better public services, and a stronger Britain on the world stage. His pragmatic approach has earned respect across the political spectrum.</p> |
|
|
<p>Married with two children, David is driven by a commitment to securing a brighter future for the next generation of Britons.</p> |
|
|
|
|
|
<div class="stats"> |
|
|
<div class="stat-item"> |
|
|
<div class="number">12</div> |
|
|
<div class="label">Years in Parliament</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="number">32</div> |
|
|
<div class="label">Bills Sponsored</div> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<div class="number">78%</div> |
|
|
<div class="label">Approval Rating</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section policies" id="policies"> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>Our Vision for Britain</h2> |
|
|
<p>A comprehensive plan to build a stronger, fairer, and more prosperous United Kingdom.</p> |
|
|
</div> |
|
|
|
|
|
<div class="policies-grid"> |
|
|
<div class="policy-card"> |
|
|
<div class="policy-icon"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<div class="policy-content"> |
|
|
<h3>Economic Growth</h3> |
|
|
<p>Boost productivity through investment in infrastructure, skills, and innovation. Support British businesses to compete globally while protecting workers' rights.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="policy-card"> |
|
|
<div class="policy-icon"> |
|
|
<i class="fas fa-medal"></i> |
|
|
</div> |
|
|
<div class="policy-content"> |
|
|
<h3>National Security</h3> |
|
|
<p>Strong defence policy with modern armed forces. Counter extremism while protecting civil liberties. Invest in cyber security to protect British interests.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="policy-card"> |
|
|
<div class="policy-icon"> |
|
|
<i class="fas fa-hand-holding-heart"></i> |
|
|
</div> |
|
|
<div class="policy-content"> |
|
|
<h3>Social Care Reform</h3> |
|
|
<p>Create a National Care Service to ensure dignity for our elderly. Better pay and conditions for care workers with proper career progression.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="policy-card"> |
|
|
<div class="policy-icon"> |
|
|
<i class="fas fa-leaf"></i> |
|
|
</div> |
|
|
<div class="policy-content"> |
|
|
<h3>Green Revolution</h3> |
|
|
<p>Ambitious targets for renewable energy and carbon reduction. Green industrial strategy to create jobs while protecting our environment.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="policy-card"> |
|
|
<div class="policy-icon"> |
|
|
<i class="fas fa-graduation-cap"></i> |
|
|
</div> |
|
|
<div class="policy-content"> |
|
|
<h3>Education First</h3> |
|
|
<p>Increase funding for schools, reform curriculum to prepare students for the future. Invest in lifelong learning and vocational training.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="policy-card"> |
|
|
<div class="policy-icon"> |
|
|
<i class="fas fa-home"></i> |
|
|
</div> |
|
|
<div class="policy-content"> |
|
|
<h3>Housing for All</h3> |
|
|
<p>Ambitious house-building programme with affordable homes. Rent controls and protections for tenants. Help for first-time buyers.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section" id="news"> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>Latest News</h2> |
|
|
<p>Updates from the campaign and positive developments for Britain.</p> |
|
|
</div> |
|
|
|
|
|
<div class="news-grid"> |
|
|
<div class="news-card"> |
|
|
<div class="news-img"> |
|
|
<img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Manufacturing"> |
|
|
</div> |
|
|
<div class="news-content"> |
|
|
<div class="news-date">June 15, 2023</div> |
|
|
<h3>British Manufacturing Sees Record Growth</h3> |
|
|
<p>New government-backed initiatives have led to the strongest manufacturing growth in a decade, creating 25,000 new jobs across the Midlands and North.</p> |
|
|
<a href="#" class="btn">Read More</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="news-card"> |
|
|
<div class="news-img"> |
|
|
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Climate"> |
|
|
</div> |
|
|
<div class="news-content"> |
|
|
<div class="news-date">June 10, 2023</div> |
|
|
<h3>UK Leads Global Climate Initiative</h3> |
|
|
<p>Britain has taken charge of a new international coalition to accelerate clean energy technology, with commitments from 15 major nations.</p> |
|
|
<a href="#" class="btn">Read More</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="news-card"> |
|
|
<div class="news-img"> |
|
|
<img src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1351&q=80" alt="NHS"> |
|
|
</div> |
|
|
<div class="news-content"> |
|
|
<div class="news-date">June 5, 2023</div> |
|
|
<h3>NHS Waiting Times Reach Two-Year Low</h3> |
|
|
<p>Healthcare reforms have reduced average waiting times by 18% since January, with particular improvements in A&E and cancer treatments.</p> |
|
|
<a href="#" class="btn">Read More</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section cta"> |
|
|
<div class="container"> |
|
|
<h2>Be Part of the Change</h2> |
|
|
<p>Britain needs fresh leadership with bold ideas. Join thousands of supporters across the country who believe in a better future.</p> |
|
|
<div class="hero-btns"> |
|
|
<a href="#" class="btn">Donate</a> |
|
|
<a href="#" class="btn btn-outline">Volunteer</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<footer id="contact"> |
|
|
<div class="container"> |
|
|
<div class="footer-content"> |
|
|
<div class="footer-column"> |
|
|
<h3>Campaign HQ</h3> |
|
|
<p><i class="fas fa-map-marker-alt"></i> 123 Westminster, London SW1A 1AA</p> |
|
|
<p><i class="fas fa-phone"></i> 020 7123 4567</p> |
|
|
<p><i class="fas fa-envelope"></i> info@leonardforpm.uk</p> |
|
|
<div class="social-links"> |
|
|
<a href="#"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-column"> |
|
|
<h3>Quick Links</h3> |
|
|
<ul> |
|
|
<li><a href="#about">About David</a></li> |
|
|
<li><a href="#policies">Our Policies</a></li> |
|
|
<li><a href="#news">Latest News</a></li> |
|
|
<li><a href="#">Events</a></li> |
|
|
<li><a href="#">Endorsements</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="footer-column"> |
|
|
<h3>Get Involved</h3> |
|
|
<ul> |
|
|
<li><a href="#">Volunteer</a></li> |
|
|
<li><a href="#">Donate</a></li> |
|
|
<li><a href="#">Host an Event</a></li> |
|
|
<li><a href="#">Join Our Team</a></li> |
|
|
<li><a href="#">Voter Registration</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="footer-column"> |
|
|
<h3>Stay Updated</h3> |
|
|
<p>Sign up for campaign updates and breaking political news.</p> |
|
|
<form class="newsletter-form"> |
|
|
<input type="email" placeholder="Your email address" required> |
|
|
<button type="submit" class="btn">Subscribe</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="copyright"> |
|
|
<p>© 2023 Leonard for PM. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
|
|
const navMenu = document.getElementById('navMenu'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
navMenu.classList.toggle('show'); |
|
|
}); |
|
|
|
|
|
|
|
|
const header = document.getElementById('header'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.scrollY > 100) { |
|
|
header.classList.add('scrolled'); |
|
|
} else { |
|
|
header.classList.remove('scrolled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
if (navMenu.classList.contains('show')) { |
|
|
navMenu.classList.remove('show'); |
|
|
} |
|
|
|
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
window.scrollTo({ |
|
|
top: target.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
