Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teddy Peters | Professional Drummer</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
/* Reset */
* {margin:0; padding:0; box-sizing:border-box;}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
color: #333;
scroll-behavior: smooth;
background-color: #f5f5f5;
}
/* Header */
header {
position: fixed;
top:0;
left:0;
width:100%;
background: rgba(17,17,17,0.95);
color:#fff;
z-index:1000;
display:flex;
justify-content: center;
padding:15px 0;
}
nav a {
color:#fff;
margin:0 15px;
text-decoration:none;
font-weight:bold;
transition:0.3s;
}
nav a:hover {color:#ffcc00;}
/* Hero Section */
#home {
height:100vh;
background: url('your-hero-image.jpg') center/cover no-repeat;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align:center;
color:#fff;
padding:0 20px;
}
#home h1 {
font-size:3em;
text-shadow:2px 2px 8px rgba(0,0,0,0.7);
}
#home p {
font-size:1.3em;
margin-top:10px;
text-shadow:1px 1px 6px rgba(0,0,0,0.7);
}
#home a.button {
margin-top:20px;
padding:15px 30px;
background:#ffcc00;
color:#111;
text-decoration:none;
font-weight:bold;
border-radius:6px;
transition:0.3s;
}
#home a.button:hover {background:#e6b800;}
/* Sections */
section {
padding:80px 20px;
max-width:1100px;
margin:auto;
opacity:0;
transform:translateY(30px);
transition: all 0.8s ease-in-out;
}
section.visible {
opacity:1;
transform:translateY(0);
}
h2 {
text-align:center;
margin-bottom:30px;
font-size:2em;
}
p {max-width:800px; margin:auto; text-align:center; line-height:1.8;}
/* Services */
.services {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
gap:20px;
margin-top:20px;
}
.service-card {
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
text-align:center;
font-weight:bold;
transition:0.3s;
}
.service-card:hover {transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.2);}
/* Gallery */
.gallery {
display:grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:30px;
}
.gallery img {
width:100%;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
/* Contact Form */
.contact-form {
max-width:600px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}
.contact-form input, .contact-form textarea {
padding:12px;
border-radius:6px;
border:1px solid #ccc;
width:100%;
}
.contact-form button {
padding:15px;
background:#111;
color:#fff;
border:none;
font-size:16px;
border-radius:6px;
cursor:pointer;
transition:0.3s;
}
.contact-form button:hover {background:#333;}
/* Footer */
footer {
text-align:center;
padding:30px 20px;
background:#111;
color:#fff;
margin-top:50px;
}
@media(max-width:600px){
#home h1{font-size:2.2em;}
#home p{font-size:1em;}
nav a {margin:0 8px;}
}
</style>
</head>
<body>
<header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#gallery">Gallery</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section id="home">
<h1>Teddy Peters</h1>
<p>Professional Drummer | Music Tech | Instructor</p>
<a href="#contact" class="button">Book Me</a>
</section>
<section id="about">
<h2>About Me</h2>
<p>
Etedi Peters, professionally known as Teddy Peters or Teddy P, is a professional and well-seasoned drummer.
He is a live, studio, recording, and touring drummer known for his versatility across all genres of music.
Additionally, he is a skilled drum tech and drum instructor, sharing his expertise with others.
Teddy P has worked with notable artistes and bands, and also performs his own solo shows.
He focuses on bringing solid groove, uniqueness, and balance to every music he plays.
</p>
</section>
<section id="services">
<h2>Services</h2>
<div class="services">
<div class="service-card">Live Performances</div>
<div class="service-card">Studio Recording & Production</div>
<div class="service-card">Drum Lessons & Workshops</div>
<div class="service-card">Music Consulting</div>
</div>
</section>
<section id="gallery">
<h2>Gallery</h2>
<div class="gallery">
<img src="image1.jpg" alt="Performance 1">
<img src="image2.jpg" alt="Performance 2">
<img src="image3.jpg" alt="Studio Session">
<img src="image4.jpg" alt="Live Event">
</div>
</section>
<section id="contact">
<h2>Book Me</h2>
<form class="contact-form" action="mailto:teddydrumz9@gmail.com" method="post" enctype="text/plain">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<input type="text" name="service" placeholder="Service Needed" required>
<input type="date" name="date" required>
<textarea name="message" rows="5" placeholder="Additional Details"></textarea>
<button type="submit">Send Booking Request</button>
</form>
</section>
<footer>
<p>Phone: 08168625352 | Email: Teddydrumz9@gmail.com</p>
</footer>
<script>
// Scroll animation for sections
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.classList.add('visible');
}
});
}, {threshold: 0.2});
sections.forEach(section => observer.observe(section));
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
8
Requests
3
Domains
48KB
Transfer Size
58KB
Content Size
193.0ms
Dom Content Loaded
200.0ms
First Paint
237.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...