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>Custom Plywood Co.</title>
<style>
/* =========================================================================
CUSTOMIZATION ZONE: Change colors and fonts here!
========================================================================= */
:root {
--primary-color: #8B5A2B; /* A rich wood brown */
--secondary-color: #D2B48C; /* A lighter tan/wood color */
--accent-color: #2F4F4F; /* Dark slate gray for contrast */
--text-dark: #333333;
--text-light: #FFFFFF;
--background-light: #FDFBF7;
--font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Basic Setup */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-main);
color: var(--text-dark);
background-color: var(--background-light);
line-height: 1.6;
}
/* Navigation Bar */
header {
background-color: var(--primary-color);
color: var(--text-light);
padding: 1rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 1px;
}
nav ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
nav a {
color: var(--text-light);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
nav a:hover {
color: var(--secondary-color);
}
/* Hero Section */
.hero {
/* Replace the URL below with your own background image */
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1510146758428-e5e4b17b8b6a?auto=format&fit=crop&w=1920&q=80') center/cover;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-light);
padding: 0 20px;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.btn {
display: inline-block;
background-color: var(--secondary-color);
color: var(--text-dark);
padding: 10px 25px;
text-decoration: none;
font-size: 1.1rem;
font-weight: bold;
border-radius: 5px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: var(--accent-color);
color: var(--text-light);
}
/* Products Section */
.section-title {
text-align: center;
margin: 4rem 0 2rem;
font-size: 2.5rem;
color: var(--primary-color);
}
.products-grid {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
padding: 0 5%;
margin-bottom: 4rem;
}
.product-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
width: 300px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
}
.product-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.product-info {
padding: 1.5rem;
text-align: center;
}
.product-info h3 {
margin-bottom: 0.5rem;
color: var(--accent-color);
}
/* Contact Section */
.contact-section {
background-color: var(--secondary-color);
padding: 4rem 5%;
text-align: center;
}
.contact-form {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-form input, .contact-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
}
.contact-form button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 12px;
font-size: 1.1rem;
cursor: pointer;
border-radius: 4px;
}
.contact-form button:hover {
background-color: var(--accent-color);
}
/* Footer */
footer {
background-color: var(--accent-color);
color: var(--text-light);
text-align: center;
padding: 1.5rem;
font-size: 0.9rem;
}
</style>
</head>
<body>
<header>
<div class="logo">TimberTech Plywood</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Our Plywood</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<section id="home" class="hero">
<div>
<h1>Strength You Can Build On</h1>
<p>Premium grade commercial, marine, and decorative plywood directly from the manufacturer to your workshop.</p>
<a href="#products" class="btn">Explore Our Range</a>
</div>
</section>
<section id="products">
<h2 class="section-title">Our Premium Products</h2>
<div class="products-grid">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1589939705384-5185137a7f0f?auto=format&fit=crop&w=500&q=80" alt="Commercial Plywood">
<div class="product-info">
<h3>Commercial Plywood (MR Grade)</h3>
<p>Moisture-resistant plywood ideal for interior furniture, paneling, and partitions.</p>
</div>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1616422285623-13ff0162193c?auto=format&fit=crop&w=500&q=80" alt="Marine Plywood">
<div class="product-info">
<h3>Marine Plywood (BWP Grade)</h3>
<p>Boiling Water Proof. Highly durable and perfect for kitchens, bathrooms, and exterior use.</p>
</div>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1517646287270-a5a9ca602e5c?auto=format&fit=crop&w=500&q=80" alt="Blockboard">
<div class="product-info">
<h3>Premium Blockboard</h3>
<p>Excellent structural stability for long bookshelves, wardrobes, and heavy load-bearing furniture.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<h2 class="section-title" style="margin-top:0; color:#333;">Get a Quote Today</h2>
<form class="contact-form" onsubmit="submitForm(event)">
<input type="text" id="name" placeholder="Your Name" required>
<input type="email" id="email" placeholder="Your Email" required>
<input type="text" id="subject" placeholder="What type of plywood do you need?" required>
<textarea id="message" rows="5" placeholder="Tell us about your project requirements..." required></textarea>
<button type="submit">Send Inquiry</button>
</form>
</section>
<footer>
<p>© 2026 TimberTech Plywood. All rights reserved. | 123 Industrial Ave, Woodville</p>
</footer>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Simple alert for the contact form
function submitForm(event) {
event.preventDefault();
const name = document.getElementById('name').value;
alert('Thanks for reaching out, ' + name + '! This is a template, so your message hasn\'t been sent anywhere yet. You will need to connect this form to a backend service to receive emails.');
event.target.reset();
}
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
5
Requests
2
Domains
153KB
Transfer Size
152KB
Content Size
248.0ms
Dom Content Loaded
284.0ms
First Paint
508.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...