Advanced, clean, and professional HTML landing page template for a Free Workshop
Advanced, clean, and professional HTML landing page template for a Free Workshop
Responsive design (mobile + desktop)
2x3 matrix layout for YouTube videos
Modern, professional style with CSS
Easy to customize links, colors, fonts, and layout
Replace src="https://www.youtube.com/embed/FQdaUv95mR8" with your YouTube embed link.
- Start -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Free Workshop Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<style>
/* ===== Reset & Base Styles ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background-color: #f4f7fa;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
/* ===== Hero Section ===== */
.hero {
background: linear-gradient(to right, #0066cc, #004c99);
color: white;
text-align: center;
padding: 60px 20px;
}
.hero h1 {
font-size: 3em;
font-weight: 800;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2em;
max-width: 700px;
margin: 0 auto 30px;
}
.cta-btn {
background-color: white;
color: #0066cc;
font-weight: 600;
padding: 14px 28px;
border-radius: 6px;
transition: background 0.3s ease;
display: inline-block;
}
.cta-btn:hover {
background-color: #e6f0fb;
}
/* ===== Container ===== */
.container {
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
}
.section-title {
text-align: center;
font-size: 2em;
font-weight: 600;
margin-bottom: 40px;
color: #222;
}
/* ===== Video Grid ===== */
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.video-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}
.video-card:hover {
transform: translateY(-5px);
}
.video-wrapper {
position: relative;
padding-top: 56.25%;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.video-info {
padding: 20px;
}
.video-title {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 10px;
}
.video-description {
font-size: 0.95em;
color: #555;
}
/* ===== Footer ===== */
footer {
text-align: center;
padding: 30px 20px;
font-size: 0.9em;
color: #777;
}
@media (max-width: 600px) {
.hero h1 {
font-size: 2em;
}
.cta-btn {
width: 100%;
}
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero">
<h1>Join Our Free Online Workshop</h1>
<p>Master new skills and gain valuable knowledge from industry leaders. Get started by watching our sessions below.</p>
<a href="#videos" class="cta-btn">Start Learning</a>
</section>
<!-- Video Section -->
<section class="container" id="videos">
<h2 class="section-title">Workshop Sessions</h2>
<div class="video-grid">
<!-- Video 1 -->
<div class="video-card">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/FQdaUv95mR8" allowfullscreen></iframe>
</div>
<div class="video-info">
<div class="video-title">Session 1: Welcome & Introduction</div>
<div class="video-description">An overview of what you'll learn and how to get the most from this workshop.</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/FQdaUv95mR8" allowfullscreen></iframe>
</div>
<div class="video-info">
<div class="video-title">Session 2: Fundamentals</div>
<div class="video-description">Learn the core concepts and tools needed before diving deeper.</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/FQdaUv95mR8" allowfullscreen></iframe>
</div>
<div class="video-info">
<div class="video-title">Session 3: Hands-On Example</div>
<div class="video-description">A practical example to help you apply the concepts you've learned.</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/FQdaUv95mR8" allowfullscreen></iframe>
</div>
<div class="video-info">
<div class="video-title">Session 4: Advanced Techniques</div>
<div class="video-description">Explore expert-level strategies to solve real-world problems.</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/FQdaUv95mR8" allowfullscreen></iframe>
</div>
<div class="video-info">
<div class="video-title">Session 5: Q&A with Experts</div>
<div class="video-description">Hear from experienced professionals and get your questions answered.</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/FQdaUv95mR8" allowfullscreen></iframe>
</div>
<div class="video-info">
<div class="video-title">Session 6: What's Next?</div>
<div class="video-description">Learn how to continue your learning journey and grow your skills.</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
© 2025 Free Workshop. Designed with care.
</footer>
</body>
</html>
- End -
Comments
Post a Comment