687 lines
15 KiB
Markdown
687 lines
15 KiB
Markdown
# Web Design Templates
|
|
|
|
Ready-to-use templates for common web design patterns.
|
|
|
|
## Landing Page Template
|
|
|
|
### Modern SaaS Landing Page
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product Name - Tagline</title>
|
|
<style>
|
|
:root {
|
|
--primary: #4F46E5;
|
|
--primary-dark: #4338CA;
|
|
--secondary: #10B981;
|
|
--text: #1F2937;
|
|
--text-light: #6B7280;
|
|
--bg: #FFFFFF;
|
|
--bg-alt: #F9FAFB;
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
}
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
background: var(--primary);
|
|
color: white;
|
|
padding: 8px 16px;
|
|
text-decoration: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
padding: 1rem 0;
|
|
border-bottom: 1px solid #E5E7EB;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-links a:hover,
|
|
.nav-links a:focus {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover,
|
|
.btn-primary:focus {
|
|
background: var(--primary-dark);
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
padding: 4rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
margin-bottom: 1.5rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.25rem;
|
|
color: var(--text-light);
|
|
margin-bottom: 2rem;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Features Section */
|
|
.features {
|
|
padding: 4rem 0;
|
|
background: var(--bg-alt);
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
font-size: 2.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--primary);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1rem;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Mobile Menu */
|
|
.mobile-toggle {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.nav-links.active {
|
|
display: flex;
|
|
}
|
|
|
|
.mobile-toggle {
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="#main" class="skip-link">Skip to main content</a>
|
|
|
|
<header role="banner">
|
|
<nav class="container" aria-label="Main navigation">
|
|
<div class="logo">Logo</div>
|
|
<button class="mobile-toggle" aria-label="Toggle menu" aria-expanded="false">
|
|
☰
|
|
</button>
|
|
<ul class="nav-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main" role="main">
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1>Build Something Amazing</h1>
|
|
<p>The best solution for your business needs. Fast, reliable, and easy to use.</p>
|
|
<div class="hero-cta">
|
|
<a href="#signup" class="btn btn-primary">Get Started</a>
|
|
<a href="#demo" class="btn">Watch Demo</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features" class="features">
|
|
<div class="container">
|
|
<h2 class="section-title">Features</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">⚡</div>
|
|
<h3>Fast Performance</h3>
|
|
<p>Lightning-fast speeds that keep your users engaged.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">🔒</div>
|
|
<h3>Secure by Default</h3>
|
|
<p>Enterprise-grade security built into every layer.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">📊</div>
|
|
<h3>Powerful Analytics</h3>
|
|
<p>Gain insights with comprehensive analytics tools.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer role="contentinfo">
|
|
<div class="container">
|
|
<p>© 2025 Company Name. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
|
|
const toggle = document.querySelector('.mobile-toggle');
|
|
const nav = document.querySelector('.nav-links');
|
|
|
|
if (toggle && nav) {
|
|
toggle.addEventListener('click', function() {
|
|
const expanded = this.getAttribute('aria-expanded') === 'true';
|
|
this.setAttribute('aria-expanded', !expanded);
|
|
nav.classList.toggle('active');
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Form Template
|
|
|
|
### Accessible Contact Form
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Contact Us</title>
|
|
<style>
|
|
/* Add styles from above template */
|
|
|
|
.form-container {
|
|
max-width: 600px;
|
|
margin: 4rem auto;
|
|
padding: 2rem;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.form-field {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
label .required {
|
|
color: #DC2626;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 2px solid #E5E7EB;
|
|
border-radius: 6px;
|
|
font-size: 1rem;
|
|
font-family: inherit;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
input[aria-invalid="true"],
|
|
textarea[aria-invalid="true"] {
|
|
border-color: #DC2626;
|
|
}
|
|
|
|
.hint {
|
|
display: block;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.error {
|
|
display: block;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875rem;
|
|
color: #DC2626;
|
|
}
|
|
|
|
.success {
|
|
padding: 1rem;
|
|
background: #D1FAE5;
|
|
color: #065F46;
|
|
border-radius: 6px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="form-container">
|
|
<h1>Contact Us</h1>
|
|
<p>Fill out the form below and we'll get back to you soon.</p>
|
|
|
|
<form id="contact-form" novalidate>
|
|
<div class="form-field">
|
|
<label for="name">
|
|
Name <span class="required" aria-label="required">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
aria-required="true"
|
|
aria-describedby="name-error"
|
|
autocomplete="name"
|
|
/>
|
|
<span id="name-error" class="error" role="alert" hidden>
|
|
Please enter your name
|
|
</span>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="email">
|
|
Email <span class="required" aria-label="required">*</span>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
aria-required="true"
|
|
aria-describedby="email-hint email-error"
|
|
autocomplete="email"
|
|
/>
|
|
<span id="email-hint" class="hint">
|
|
We'll never share your email with anyone else.
|
|
</span>
|
|
<span id="email-error" class="error" role="alert" hidden>
|
|
Please enter a valid email address
|
|
</span>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="message">
|
|
Message <span class="required" aria-label="required">*</span>
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows="5"
|
|
required
|
|
aria-required="true"
|
|
aria-describedby="message-error"
|
|
></textarea>
|
|
<span id="message-error" class="error" role="alert" hidden>
|
|
Please enter a message
|
|
</span>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Send Message</button>
|
|
</form>
|
|
</main>
|
|
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
|
|
const form = document.getElementById('contact-form');
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Clear previous errors
|
|
const errors = form.querySelectorAll('.error');
|
|
errors.forEach(error => error.hidden = true);
|
|
|
|
const fields = form.querySelectorAll('input, textarea');
|
|
fields.forEach(field => field.removeAttribute('aria-invalid'));
|
|
|
|
let isValid = true;
|
|
|
|
// Validate each required field
|
|
const name = document.getElementById('name');
|
|
if (!name.value.trim()) {
|
|
showError(name, 'name-error');
|
|
isValid = false;
|
|
}
|
|
|
|
const email = document.getElementById('email');
|
|
if (!email.value.trim() || !isValidEmail(email.value)) {
|
|
showError(email, 'email-error');
|
|
isValid = false;
|
|
}
|
|
|
|
const message = document.getElementById('message');
|
|
if (!message.value.trim()) {
|
|
showError(message, 'message-error');
|
|
isValid = false;
|
|
}
|
|
|
|
if (isValid) {
|
|
// Submit form
|
|
console.log('Form is valid, submitting...');
|
|
showSuccess();
|
|
}
|
|
});
|
|
|
|
function showError(field, errorId) {
|
|
field.setAttribute('aria-invalid', 'true');
|
|
const error = document.getElementById(errorId);
|
|
error.hidden = false;
|
|
field.focus();
|
|
}
|
|
|
|
function isValidEmail(email) {
|
|
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
|
}
|
|
|
|
function showSuccess() {
|
|
const success = document.createElement('div');
|
|
success.className = 'success';
|
|
success.setAttribute('role', 'status');
|
|
success.textContent = 'Thank you! Your message has been sent.';
|
|
form.insertBefore(success, form.firstChild);
|
|
form.reset();
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Dashboard Template
|
|
|
|
### Admin Dashboard Layout
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard</title>
|
|
<style>
|
|
/* Base styles */
|
|
:root {
|
|
--sidebar-width: 250px;
|
|
--header-height: 60px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: #F3F4F6;
|
|
}
|
|
|
|
/* Layout Grid */
|
|
.dashboard {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"sidebar header"
|
|
"sidebar main";
|
|
grid-template-columns: var(--sidebar-width) 1fr;
|
|
grid-template-rows: var(--header-height) 1fr;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
grid-area: sidebar;
|
|
background: #1F2937;
|
|
color: white;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.sidebar nav ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.sidebar nav a {
|
|
display: block;
|
|
padding: 0.75rem 1rem;
|
|
color: #D1D5DB;
|
|
text-decoration: none;
|
|
border-radius: 6px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.sidebar nav a:hover,
|
|
.sidebar nav a[aria-current="page"] {
|
|
background: #374151;
|
|
color: white;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
grid-area: header;
|
|
background: white;
|
|
border-bottom: 1px solid #E5E7EB;
|
|
padding: 0 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
grid-area: main;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #1F2937;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #6B7280;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard {
|
|
grid-template-areas:
|
|
"header"
|
|
"main";
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: var(--header-height) 1fr;
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
left: -250px;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
transition: left 0.3s;
|
|
}
|
|
|
|
.sidebar.active {
|
|
left: 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="dashboard">
|
|
<aside class="sidebar" role="navigation" aria-label="Main navigation">
|
|
<h2>Dashboard</h2>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#overview" aria-current="page">Overview</a></li>
|
|
<li><a href="#analytics">Analytics</a></li>
|
|
<li><a href="#users">Users</a></li>
|
|
<li><a href="#settings">Settings</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<header class="header" role="banner">
|
|
<h1>Dashboard Overview</h1>
|
|
<button class="mobile-menu-toggle" aria-label="Toggle menu">☰</button>
|
|
</header>
|
|
|
|
<main class="main-content" role="main">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-value">1,234</div>
|
|
<div class="stat-label">Total Users</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">$12,345</div>
|
|
<div class="stat-label">Revenue</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">98.5%</div>
|
|
<div class="stat-label">Uptime</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
These templates provide solid starting points for common web design patterns with accessibility and responsiveness built in.
|