HTML/CSS Components
Copy-paste ready HTML and CSS. No frameworks, no dependencies. Just clean, semantic markup you can use anywhere.
Vanilla HTML & CSS Only
Premium Content
Unlock all HTML/CSS components with full source code access
- 22 Production-ready components
- Copy-paste ready HTML/CSS
- WordPress plugin included
Hero Basic
Simple hero section with headline, subheadline, and CTA buttons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Basic - SkunkPages</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Work Sans', sans-serif;
}
.hero-basic {
padding: 6rem 1.5rem;
background: linear-gradient(to bottom, #f9fafb 0%, #ffffff 100%);
text-align: center;
}
.hero-basic__content {
max-width: 56rem;
margin: 0 auto;
}
.hero-basic__headline {
font-size: 3.75rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
color: #111827;
letter-spacing: -0.02em;
}
.hero-basic__subheadline {
font-size: 1.25rem;
line-height: 1.75;
color: #4b5563;
margin-bottom: 2rem;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
}
.hero-basic__buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.hero-basic__button {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 500;
font-size: 1rem;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
border: none;
font-family: 'Work Sans', sans-serif;
}
.hero-basic__button--primary {
background-color: #e50914;
color: #ffffff;
}
.hero-basic__button--primary:hover {
background-color: #b30710;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(229, 9, 20, 0.3);
}
.hero-basic__button--secondary {
background-color: transparent;
color: #111827;
border: 1px solid #d1d5db;
}
.hero-basic__button--secondary:hover {
background-color: #f3f4f6;
border-color: #9ca3af;
}
@media (max-width: 768px) {
.hero-basic {
padding: 4rem 1rem;
}
.hero-basic__headline {
font-size: 2.5rem;
}
.hero-basic__subheadline {
font-size: 1.125rem;
}
.hero-basic__buttons {
flex-direction: column;
}
.hero-basic__button {
justify-content: center;
width: 100%;
}
}
</style>
</head>
<body>
<section class="hero-basic">
<div class="hero-basic__content">
<h1 class="hero-basic__headline">Build Your Landing Page in Minutes</h1>
<p class="hero-basic__subheadline">Create high-converting landing pages with our professional blocks and templates. No coding required.</p>
<div class="hero-basic__buttons">
<a href="#" class="hero-basic__button hero-basic__button--primary">Get Started Free</a>
<a href="#" class="hero-basic__button hero-basic__button--secondary">View Demo</a>
</div>
</div>
</section>
</body>
</html>Hero with Form
Hero section with email capture form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero with Form - SkunkPages</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Work Sans', sans-serif; }
.hero-form {
padding: 6rem 1.5rem;
background: linear-gradient(to bottom, #f9fafb 0%, #ffffff 100%);
text-align: center;
}
.hero-form__content { max-width: 40rem; margin: 0 auto; }
.hero-form__badge {
display: inline-flex;
padding: 0.375rem 0.875rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 1.5rem;
background-color: #fee2e2;
color: #991b1b;
}
.hero-form__headline {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1rem;
color: #111827;
}
.hero-form__subheadline {
font-size: 1.125rem;
line-height: 1.75;
color: #6b7280;
margin-bottom: 2rem;
}
.hero-form__form { max-width: 28rem; margin: 0 auto; }
.hero-form__input-group {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.hero-form__input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 1rem;
font-family: 'Work Sans', sans-serif;
}
.hero-form__input:focus {
outline: none;
border-color: #e50914;
box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.1);
}
.hero-form__button {
padding: 0.75rem 1.5rem;
background-color: #e50914;
color: #ffffff;
border: none;
border-radius: 0.5rem;
font-weight: 500;
font-size: 1rem;
cursor: pointer;
font-family: 'Work Sans', sans-serif;
white-space: nowrap;
}
.hero-form__button:hover {
background-color: #b30710;
}
.hero-form__trust {
font-size: 0.875rem;
color: #9ca3af;
margin-top: 0.75rem;
}
@media (max-width: 768px) {
.hero-form { padding: 4rem 1rem; }
.hero-form__headline { font-size: 2rem; }
.hero-form__input-group { flex-direction: column; }
.hero-form__button { width: 100%; }
}
</style>
</head>
<body>
<section class="hero-form">
<div class="hero-form__content">
<div class="hero-form__badge">🔥 Limited Time Offer</div>
<h1 class="hero-form__headline">Get Your Free Guide Today</h1>
<p class="hero-form__subheadline">Join thousands of professionals who have transformed their workflow with our proven strategies.</p>
<form class="hero-form__form">
<div class="hero-form__input-group">
<input type="email" class="hero-form__input" placeholder="Enter your email" required>
<button type="submit" class="hero-form__button">Get Free Access</button>
</div>
<p class="hero-form__trust">No spam, unsubscribe anytime.</p>
</form>
</div>
</section>
</body>
</html>Simple Navbar
Responsive navigation with logo, menu, and CTA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Navbar - SkunkPages</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Work Sans', sans-serif; }
.navbar {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid #e5e7eb;
z-index: 50;
}
.navbar__container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
}
.navbar__logo {
display: flex;
align-items: center;
text-decoration: none;
color: #111827;
font-weight: 800;
font-size: 1.25rem;
}
.navbar__logo-icon {
width: 2rem;
height: 2rem;
background: #e50914;
border-radius: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 900;
margin-right: 0.5rem;
}
.navbar__nav {
display: flex;
gap: 2rem;
}
.navbar__link {
text-decoration: none;
color: #374151;
font-weight: 500;
transition: color 0.2s;
}
.navbar__link:hover { color: #111827; }
.navbar__cta {
padding: 0.5rem 1rem;
background: #e50914;
color: white;
text-decoration: none;
border-radius: 0.5rem;
font-weight: 500;
transition: background 0.2s;
}
.navbar__cta:hover { background: #b30710; }
.navbar__mobile-btn {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
@media (max-width: 768px) {
.navbar__nav, .navbar__cta { display: none; }
.navbar__mobile-btn { display: block; }
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
<a href="#" class="navbar__logo">
<div class="navbar__logo-icon">S</div>
<span>SkunkPages</span>
</a>
<div class="navbar__nav">
<a href="#" class="navbar__link">Home</a>
<a href="#" class="navbar__link">Templates</a>
<a href="#" class="navbar__link">Components</a>
<a href="#" class="navbar__link">Pricing</a>
</div>
<a href="#" class="navbar__cta">Get Started</a>
<button class="navbar__mobile-btn">☰</button>
</div>
</nav>
</body>
</html>Simple Footer
Multi-column footer with social links
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Footer - SkunkPages</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Work Sans', sans-serif; }
.footer {
background: #111827;
color: white;
padding: 3rem 1.5rem;
}
.footer__container {
max-width: 1280px;
margin: 0 auto;
}
.footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.footer__column h3 {
font-size: 0.875rem;
font-weight: 700;
margin-bottom: 1rem;
}
.footer__links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer__link {
color: #9ca3af;
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s;
}
.footer__link:hover { color: white; }
.footer__bottom {
padding-top: 2rem;
border-top: 1px solid #374151;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer__copyright {
color: #9ca3af;
font-size: 0.875rem;
}
.footer__social {
display: flex;
gap: 1rem;
}
.footer__social-link {
color: #9ca3af;
transition: color 0.2s;
}
.footer__social-link:hover { color: white; }
</style>
</head>
<body>
<footer class="footer">
<div class="footer__container">
<div class="footer__grid">
<div class="footer__column">
<h3>Product</h3>
<ul class="footer__links">
<li><a href="#" class="footer__link">Features</a></li>
<li><a href="#" class="footer__link">Templates</a></li>
<li><a href="#" class="footer__link">Pricing</a></li>
</ul>
</div>
<div class="footer__column">
<h3>Company</h3>
<ul class="footer__links">
<li><a href="#" class="footer__link">About</a></li>
<li><a href="#" class="footer__link">Blog</a></li>
<li><a href="#" class="footer__link">Contact</a></li>
</ul>
</div>
<div class="footer__column">
<h3>Resources</h3>
<ul class="footer__links">
<li><a href="#" class="footer__link">Documentation</a></li>
<li><a href="#" class="footer__link">Support</a></li>
<li><a href="#" class="footer__link">API</a></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<p class="footer__copyright">© 2025 SkunkPages. All rights reserved.</p>
<div class="footer__social">
<a href="#" class="footer__social-link">Twitter</a>
<a href="#" class="footer__social-link">LinkedIn</a>
<a href="#" class="footer__social-link">GitHub</a>
</div>
</div>
</div>
</footer>
</body>
</html>