Table of Contents

1. Introduction to Layout Patterns
2. Card Patterns
3. Navigation Patterns
4. Hero Section Patterns
5. Form Layout Patterns
6. Grid-Based Patterns
7. Sidebar Patterns
8. Footer Patterns
9. Modal and Overlay Patterns
10. List and Table Patterns
11. Dashboard Patterns
12. E-commerce Patterns
13. Blog Layout Patterns
14. Landing Page Patterns
15. Responsive Patterns
16. Practical Examples

---

Introduction to Layout Patterns

Layout patterns are reusable solutions to common design problems. They provide a foundation for building consistent, maintainable, and user-friendly interfaces.

Why Use Layout Patterns?

• Consistency: Create predictable user experiences
• Reusability: Save time by reproven solutions
• Maintainability: Easier to update and debug
• Scalability: Patterns work across different screen sizes
• Best Practices: Built on industry standards and testing

Categories of Layout Patterns

/* Layout patterns can be categorized by their purpose */
.navigation-patterns { }    /* Menus, navbars, breadcrumbs */
.content-patterns { }        /* Cards, lists, articles */
.structural-patterns { }     /* Grids, sidebars, footers */
.interaction-patterns { }    /* Modals, tooltips, accordions */

---

Card Patterns

Cards are versatile containers for displaying content in a structured, visually appealing way.

Basic Card Pattern

<div class="card-pattern">
<style>
.card-pattern {
background-color: #f5f5f5;
padding: 40px;
}
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 20px;
}
.card-title {
margin: 0 0 10px 0;
font-size: 1.25rem;
color: #333;
}
.card-text {
margin: 0 0 20px 0;
color: #666;
line-height: 1.6;
}
.card-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid #eee;
color: #999;
font-size: 0.875rem;
}
.card-tag {
background: #e0e0e0;
padding: 4px 8px;
border-radius: 4px;
color: #666;
}
</style>
<div class="card-container">
<div class="card">
<img src="https://via.placeholder.com/400x200" alt="Card image" class="card-image">
<div class="card-content">
<h3 class="card-title">Basic Card</h3>
<p class="card-text">A simple card with image, title, and description. Perfect for content previews.</p>
<div class="card-meta">
<span class="card-tag">Tag</span>
<span>5 min read</span>
</div>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/400x200" alt="Card image" class="card-image">
<div class="card-content">
<h3 class="card-title">Another Card</h3>
<p class="card-text">Cards can contain different types of content and maintain consistency.</p>
<div class="card-meta">
<span class="card-tag">Popular</span>
<span>3 min read</span>
</div>
</div>
</div>
</div>
</div>

Horizontal Card Pattern

<div class="horizontal-card-pattern">
<style>
.horizontal-card-pattern {
background-color: #f5f5f5;
padding: 40px;
}
.horizontal-card {
display: flex;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
max-width: 800px;
margin: 0 auto 20px;
}
.horizontal-card-image {
width: 200px;
object-fit: cover;
}
.horizontal-card-content {
flex: 1;
padding: 20px;
}
.horizontal-card-title {
margin: 0 0 10px 0;
color: #333;
}
.horizontal-card-text {
margin: 0 0 15px 0;
color: #666;
line-height: 1.6;
}
.horizontal-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.horizontal-card-button {
background: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
.horizontal-card-button:hover {
background: #0056b3;
}
@media (max-width: 768px) {
.horizontal-card {
flex-direction: column;
}
.horizontal-card-image {
width: 100%;
height: 200px;
}
}
</style>
<div class="horizontal-card">
<img src="https://via.placeholder.com/200x300" alt="Card image" class="horizontal-card-image">
<div class="horizontal-card-content">
<h3 class="horizontal-card-title">Horizontal Card</h3>
<p class="horizontal-card-text">This card layout works well for featured content where you want to show more details while maintaining visual interest.</p>
<div class="horizontal-card-footer">
<span>📅 January 15, 2024</span>
<button class="horizontal-card-button">Read More</button>
</div>
</div>
</div>
</div>

Product Card Pattern

<div class="product-card-pattern">
<style>
.product-card-pattern {
background-color: #f5f5f5;
padding: 40px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.product-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
position: relative;
transition: transform 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
}
.product-badge {
position: absolute;
top: 10px;
left: 10px;
background: #ff6b6b;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: bold;
z-index: 1;
}
.product-image {
width: 100%;
height: 250px;
object-fit: cover;
}
.product-info {
padding: 20px;
}
.product-category {
color: #999;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.product-name {
margin: 5px 0;
font-size: 1.1rem;
color: #333;
}
.product-rating {
color: #ffc107;
margin: 5px 0;
}
.product-price {
font-size: 1.25rem;
font-weight: bold;
color: #007bff;
margin: 10px 0;
}
.product-price s {
font-size: 0.9rem;
color: #999;
margin-left: 5px;
}
.product-actions {
display: flex;
gap: 10px;
}
.product-button {
flex: 1;
background: #007bff;
color: white;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
.product-button:hover {
background: #0056b3;
}
.product-wishlist {
background: #f0f0f0;
border: none;
width: 40px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
.product-wishlist:hover {
background: #e0e0e0;
}
</style>
<div class="product-grid">
<div class="product-card">
<span class="product-badge">Sale</span>
<img src="https://via.placeholder.com/300x250" alt="Product" class="product-image">
<div class="product-info">
<div class="product-category">Electronics</div>
<h3 class="product-name">Wireless Headphones</h3>
<div class="product-rating">★★★★☆ (4.5)</div>
<div class="product-price">$89.99 <s>$129.99</s></div>
<div class="product-actions">
<button class="product-button">Add to Cart</button>
<button class="product-wishlist">❤️</button>
</div>
</div>
</div>
<div class="product-card">
<img src="https://via.placeholder.com/300x250" alt="Product" class="product-image">
<div class="product-info">
<div class="product-category">Accessories</div>
<h3 class="product-name">Leather Watch</h3>
<div class="product-rating">★★★★★ (5.0)</div>
<div class="product-price">$199.99</div>
<div class="product-actions">
<button class="product-button">Add to Cart</button>
<button class="product-wishlist">❤️</button>
</div>
</div>
</div>
</div>
</div>

---

Navigation Patterns

Navigation patterns help users move through your website efficiently.

Horizontal Navigation Bar

<nav class="horizontal-nav">
<style>
.horizontal-nav {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 0 40px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
}
.nav-logo {
color: white;
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 30px;
}
.nav-item {
position: relative;
}
.nav-link {
color: white;
text-decoration: none;
padding: 5px 0;
transition: color 0.3s;
}
.nav-link:hover {
color: #ffd700;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #ffd700;
transition: width 0.3s;
}
.nav-link:hover::after {
width: 100%;
}
.nav-link.active {
color: #ffd700;
}
.nav-link.active::after {
width: 100%;
}
.nav-search {
display: flex;
align-items: center;
}
.nav-search-input {
padding: 8px 15px;
border: none;
border-radius: 20px;
outline: none;
width: 200px;
transition: width 0.3s;
}
.nav-search-input:focus {
width: 250px;
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.nav-toggle span {
width: 25px;
height: 3px;
background: white;
margin: 3px 0;
transition: 0.3s;
}
@media (max-width: 768px) {
.nav-menu {
display: none;
position: absolute;
top: 70px;
left: 0;
right: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
flex-direction: column;
padding: 20px;
text-align: center;
z-index: 1000;
}
.nav-menu.active {
display: flex;
}
.nav-toggle {
display: flex;
}
.nav-search {
display: none;
}
}
</style>
<div class="nav-container">
<a href="#" class="nav-logo">Logo</a>
<div class="nav-toggle">
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav-menu">
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">Portfolio</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<div class="nav-search">
<input type="text" class="nav-search-input" placeholder="Search...">
</div>
</div>
</nav>

Vertical Sidebar Navigation

<div class="vertical-nav-demo">
<style>
.vertical-nav-demo {
display: flex;
min-height: 500px;
background-color: #f5f5f5;
}
.vertical-nav {
width: 250px;
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
color: white;
padding: 20px 0;
}
.nav-header {
padding: 0 20px 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 20px;
}
.nav-header h3 {
margin: 0;
font-size: 1.2rem;
}
.nav-header p {
margin: 5px 0 0;
font-size: 0.875rem;
opacity: 0.8;
}
.vertical-nav-menu {
list-style: none;
padding: 0;
margin: 0;
}
.vertical-nav-item {
position: relative;
}
.vertical-nav-link {
display: block;
padding: 12px 20px;
color: white;
text-decoration: none;
transition: all 0.3s;
}
.vertical-nav-link:hover {
background: rgba(255,255,255,0.1);
padding-left: 30px;
}
.vertical-nav-link.active {
background: rgba(255,255,255,0.2);
border-left: 4px solid #ffd700;
}
.nav-icon {
margin-right: 10px;
width: 20px;
display: inline-block;
}
.nav-badge {
float: right;
background: #ff6b6b;
padding: 2px 6px;
border-radius: 10px;
font-size: 0.75rem;
}
.nav-divider {
height: 1px;
background: rgba(255,255,255,0.1);
margin: 10px 0;
}
.main-content {
flex: 1;
padding: 30px;
}
@media (max-width: 768px) {
.vertical-nav-demo {
flex-direction: column;
}
.vertical-nav {
width: 100%;
}
}
</style>
<nav class="vertical-nav">
<div class="nav-header">
<h3>Dashboard</h3>
<p>Welcome back, User</p>
</div>
<ul class="vertical-nav-menu">
<li class="vertical-nav-item">
<a href="#" class="vertical-nav-link active">
<span class="nav-icon">🏠</span>
Dashboard
</a>
</li>
<li class="vertical-nav-item">
<a href="#" class="vertical-nav-link">
<span class="nav-icon">👤</span>
Profile
</a>
</li>
<li class="vertical-nav-item">
<a href="#" class="vertical-nav-link">
<span class="nav-icon">📊</span>
Analytics
<span class="nav-badge">New</span>
</a>
</li>
<li class="vertical-nav-item">
<a href="#" class="vertical-nav-link">
<span class="nav-icon">✉️</span>
Messages
<span class="nav-badge">3</span>
</a>
</li>
<li class="nav-divider"></li>
<li class="vertical-nav-item">
<a href="#" class="vertical-nav-link">
<span class="nav-icon">⚙️</span>
Settings
</a>
</li>
<li class="vertical-nav-item">
<a href="#" class="vertical-nav-link">
<span class="nav-icon">🚪</span>
Logout
</a>
</li>
</ul>
</nav>
<main class="main-content">
<h2>Main Content Area</h2>
<p>This is where your main content goes. The sidebar navigation provides easy access to different sections.</p>
</main>
</div>

Breadcrumb Navigation

<div class="breadcrumb-demo">
<style>
.breadcrumb-demo {
background-color: #f5f5f5;
padding: 40px;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0 0 20px;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item:not(:last-child)::after {
content: '/';
margin: 0 10px;
color: #999;
}
.breadcrumb-link {
color: #007bff;
text-decoration: none;
transition: color 0.3s;
}
.breadcrumb-link:hover {
color: #0056b3;
text-decoration: underline;
}
.breadcrumb-current {
color: #666;
}
/* Alternative separator */
.breadcrumb-dot .breadcrumb-item:not(:last-child)::after {
content: '•';
font-size: 1.2rem;
}
.breadcrumb-arrow .breadcrumb-item:not(:last-child)::after {
content: '→';
}
/* With background */
.breadcrumb-background {
background: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
</style>
<div class="breadcrumb-background">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Products</a></li>
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Electronics</a></li>
<li class="breadcrumb-item"><span class="breadcrumb-current">Smartphones</span></li>
</ul>
</div>
<div class="breadcrumb-background">
<ul class="breadcrumb breadcrumb-arrow">
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Dashboard</a></li>
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Settings</a></li>
<li class="breadcrumb-item"><span class="breadcrumb-current">Profile</span></li>
</ul>
</div>
</div>

Mega Menu Pattern

<nav class="mega-menu-demo">
<style>
.mega-menu-demo {
background: #333;
padding: 0 40px;
position: relative;
}
.mega-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.mega-logo {
color: white;
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
}
.mega-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.mega-nav-item {
position: relative;
}
.mega-nav-link {
display: block;
padding: 0 20px;
color: white;
text-decoration: none;
line-height: 60px;
transition: background 0.3s;
}
.mega-nav-link:hover {
background: #444;
}
.mega-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 600px;
background: white;
border-radius: 0 0 8px 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
padding: 30px;
display: none;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
z-index: 1000;
}
.mega-nav-item:hover .mega-dropdown {
display: grid;
}
.mega-column h4 {
margin: 0 0 15px 0;
color: #333;
font-size: 1rem;
}
.mega-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.mega-column li {
margin-bottom: 10px;
}
.mega-column a {
color: #666;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s;
}
.mega-column a:hover {
color: #007bff;
}
.mega-featured {
grid-column: span 3;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
display: flex;
gap: 20px;
}
.mega-featured-item {
flex: 1;
background: #f5f5f5;
padding: 15px;
border-radius: 4px;
}
</style>
<div class="mega-container">
<a href="#" class="mega-logo">Store</a>
<ul class="mega-nav">
<li class="mega-nav-item">
<a href="#" class="mega-nav-link">Home</a>
</li>
<li class="mega-nav-item">
<a href="#" class="mega-nav-link">Products</a>
<div class="mega-dropdown">
<div class="mega-column">
<h4>Electronics</h4>
<ul>
<li><a href="#">Smartphones</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Tablets</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</div>
<div class="mega-column">
<h4>Clothing</h4>
<ul>
<li><a href="#">Men's</a></li>
<li><a href="#">Women's</a></li>
<li><a href="#">Kids'</a></li>
<li><a href="#">Shoes</a></li>
</ul>
</div>
<div class="mega-column">
<h4>Home & Garden</h4>
<ul>
<li><a href="#">Furniture</a></li>
<li><a href="#">Decor</a></li>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Garden</a></li>
</ul>
</div>
<div class="mega-featured">
<div class="mega-featured-item">
<strong>New Arrivals</strong>
<p>Check out our latest products</p>
</div>
<div class="mega-featured-item">
<strong>Sale</strong>
<p>Up to 50% off selected items</p>
</div>
</div>
</div>
</li>
<li class="mega-nav-item">
<a href="#" class="mega-nav-link">Services</a>
</li>
<li class="mega-nav-item">
<a href="#" class="mega-nav-link">About</a>
</li>
</ul>
</div>
</nav>

---

Hero Section Patterns

Hero sections are the first thing users see and set the tone for your website.

Fullscreen Hero with Overlay

<div class="hero-fullscreen">
<style>
.hero-fullscreen {
position: relative;
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
padding: 0 20px;
animation: fadeInUp 1s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-title {
font-size: clamp(2rem, 5vw, 4rem);
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.hero-subtitle {
font-size: clamp(1rem, 2vw, 1.25rem);
margin-bottom: 30px;
opacity: 0.9;
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
}
.hero-button {
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
}
.hero-button-primary {
background: #007bff;
color: white;
border: 2px solid #007bff;
}
.hero-button-primary:hover {
background: #0056b3;
border-color: #0056b3;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,123,255,0.4);
}
.hero-button-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.hero-button-secondary:hover {
background: white;
color: #333;
transform: translateY(-2px);
}
.hero-scroll {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
color: white;
text-decoration: none;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
40% {transform: translateY(-20px) translateX(-50%);}
60% {transform: translateY(-10px) translateX(-50%);}
}
</style>
<div class="hero-overlay"></div>
<div class="hero-content">
<h1 class="hero-title">Discover Amazing Places</h1>
<p class="hero-subtitle">Experience the beauty of nature with our curated collection of destinations and travel experiences.</p>
<div class="hero-buttons">
<a href="#" class="hero-button hero-button-primary">Get Started</a>
<a href="#" class="hero-button hero-button-secondary">Learn More</a>
</div>
</div>
<a href="#content" class="hero-scroll">Scroll Down ↓</a>
</div>

Split Screen Hero

<div class="split-hero">
<style>
.split-hero {
display: flex;
min-height: 100vh;
}
.split-left {
flex: 1;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.split-left-content {
max-width: 400px;
}
.split-left h2 {
font-size: 3rem;
margin-bottom: 20px;
}
.split-left p {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 30px;
opacity: 0.9;
}
.split-button {
display: inline-block;
padding: 15px 30px;
background: white;
color: #667eea;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: all 0.3s;
}
.split-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.split-right {
flex: 1;
background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.split-right-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
}
.split-right-content {
position: relative;
z-index: 1;
color: white;
text-align: center;
max-width: 400px;
}
.split-right h3 {
font-size: 2rem;
margin-bottom: 20px;
}
.split-right p {
font-size: 1rem;
line-height: 1.6;
}
@media (max-width: 768px) {
.split-hero {
flex-direction: column;
}
.split-left, .split-right {
min-height: 50vh;
}
}
</style>
<div class="split-left">
<div class="split-left-content">
<h2>Your Journey Begins Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="split-button">Start Exploring</a>
</div>
</div>
<div class="split-right">
<div class="split-right-overlay"></div>
<div class="split-right-content">
<h3>Experience More</h3>
<p>Discover breathtaking landscapes and unforgettable moments</p>
</div>
</div>
</div>

Minimal Hero with Search

<div class="minimal-hero">
<style>
.minimal-hero {
background: #f9f9f9;
padding: 100px 20px;
text-align: center;
}
.minimal-container {
max-width: 800px;
margin: 0 auto;
}
.minimal-hero h1 {
font-size: 3rem;
color: #333;
margin-bottom: 20px;
font-weight: 300;
}
.minimal-hero p {
font-size: 1.2rem;
color: #666;
margin-bottom: 40px;
line-height: 1.6;
}
.search-container {
max-width: 500px;
margin: 0 auto;
display: flex;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-radius: 50px;
overflow: hidden;
}
.search-input {
flex: 1;
padding: 15px 20px;
border: none;
outline: none;
font-size: 1rem;
}
.search-button {
padding: 15px 30px;
background: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
transition: background 0.3s;
}
.search-button:hover {
background: #0056b3;
}
.trending-tags {
margin-top: 30px;
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.trending-tag {
padding: 5px 15px;
background: #e0e0e0;
border-radius: 20px;
color: #666;
text-decoration: none;
font-size: 0.875rem;
transition: all 0.3s;
}
.trending-tag:hover {
background: #007bff;
color: white;
}
</style>
<div class="minimal-container">
<h1>What can we help you find?</h1>
<p>Search our extensive collection of resources, articles, and guides</p>
<div class="search-container">
<input type="text" class="search-input" placeholder="Search for anything...">
<button class="search-button">Search</button>
</div>
<div class="trending-tags">
<span>Trending:</span>
<a href="#" class="trending-tag">Technology</a>
<a href="#" class="trending-tag">Design</a>
<a href="#" class="trending-tag">Development</a>
<a href="#" class="trending-tag">Business</a>
<a href="#" class="trending-tag">Marketing</a>
</div>
</div>
</div>

---

Form Layout Patterns

Contact Form Pattern

<div class="form-pattern">
<style>
.form-pattern {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 80px 20px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.form-card {
max-width: 600px;
width: 100%;
background: white;
border-radius: 15px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.form-title {
margin: 0 0 30px 0;
color: #333;
text-align: center;
font-size: 2rem;
}
.form-group {
margin-bottom: 25px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 500;
}
.form-input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s;
box-sizing: border-box;
}
.form-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}
.form-input.error {
border-color: #dc3545;
}
.form-error {
color: #dc3545;
font-size: 0.875rem;
margin-top: 5px;
display: none;
}
.form-input.error + .form-error {
display: block;
}
.form-textarea {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s;
resize: vertical;
min-height: 120px;
box-sizing: border-box;
}
.form-textarea:focus {
outline: none;
border-color: #667eea;
}
.form-checkbox {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.form-checkbox input {
width: 18px;
height: 18px;
cursor: pointer;
}
.form-checkbox label {
color: #555;
cursor: pointer;
}
.form-submit {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
.form-submit:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102,126,234,0.4);
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
}
</style>
<div class="form-card">
<h2 class="form-title">Contact Us</h2>
<form>
<div class="form-row">
<div class="form-group">
<label class="form-label">First Name</label>
<input type="text" class="form-input" placeholder="John">
</div>
<div class="form-group">
<label class="form-label">Last Name</label>
<input type="text" class="form-input" placeholder="Doe">
</div>
</div>
<div class="form-group">
<label class="form-label">Email</label>
<input type="email" class="form-input" placeholder="[email protected]">
</div>
<div class="form-group">
<label class="form-label">Subject</label>
<input type="text" class="form-input" placeholder="How can we help?">
</div>
<div class="form-group">
<label class="form-label">Message</label>
<textarea class="form-textarea" placeholder="Your message..."></textarea>
</div>
<div class="form-checkbox">
<input type="checkbox" id="newsletter">
<label for="newsletter">Subscribe to our newsletter</label>
</div>
<button type="submit" class="form-submit">Send Message</button>
</form>
</div>
</div>

Login Form Pattern

<div class="login-pattern">
<style>
.login-pattern {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.login-card {
max-width: 400px;
width: 100%;
background: white;
border-radius: 15px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header h2 {
margin: 0 0 10px 0;
color: #333;
}
.login-header p {
margin: 0;
color: #666;
}
.login-form .form-group {
margin-bottom: 20px;
}
.login-form label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: 500;
}
.login-form input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s;
box-sizing: border-box;
}
.login-form input:focus {
outline: none;
border-color: #667eea;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.remember-me {
display: flex;
align-items: center;
gap: 5px;
color: #555;
}
.forgot-password {
color: #667eea;
text-decoration: none;
font-size: 0.9rem;
}
.forgot-password:hover {
text-decoration: underline;
}
.login-button {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
margin-bottom: 20px;
}
.login-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102,126,234,0.4);
}
.social-login {
text-align: center;
}
.social-login p {
color: #666;
margin-bottom: 15px;
position: relative;
}
.social-login p::before,
.social-login p::after {
content: '';
position: absolute;
top: 50%;
width: 30%;
height: 1px;
background: #e0e0e0;
}
.social-login p::before {
left: 0;
}
.social-login p::after {
right: 0;
}
.social-buttons {
display: flex;
gap: 10px;
}
.social-button {
flex: 1;
padding: 10px;
border: 2px solid #e0e0e0;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s;
font-weight: 500;
}
.social-button:hover {
background: #f5f5f5;
border-color: #ccc;
}
.signup-link {
text-align: center;
margin-top: 20px;
color: #666;
}
.signup-link a {
color: #667eea;
text-decoration: none;
font-weight: 500;
}
.signup-link a:hover {
text-decoration: underline;
}
</style>
<div class="login-card">
<div class="login-header">
<h2>Welcome Back</h2>
<p>Please sign in to your account</p>
</div>
<form class="login-form">
<div class="form-group">
<label>Email Address</label>
<input type="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="••••••••">
</div>
<div class="form-options">
<label class="remember-me">
<input type="checkbox"> Remember me
</label>
<a href="#" class="forgot-password">Forgot password?</a>
</div>
<button type="submit" class="login-button">Sign In</button>
</form>
<div class="social-login">
<p>or</p>
<div class="social-buttons">
<button class="social-button">Google</button>
<button class="social-button">GitHub</button>
</div>
</div>
<div class="signup-link">
Don't have an account? <a href="#">Sign up</a>
</div>
</div>
</div>

---

Grid-Based Patterns

Masonry Grid Pattern

<div class="masonry-pattern">
<style>
.masonry-pattern {
background-color: #f5f5f5;
padding: 40px;
}
.masonry {
column-count: 4;
column-gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 20px;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.masonry-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.masonry-item img {
width: 100%;
height: auto;
display: block;
}
.masonry-content {
padding: 15px;
}
.masonry-content h3 {
margin: 0 0 10px 0;
color: #333;
}
.masonry-content p {
margin: 0;
color: #666;
line-height: 1.5;
}
@media (max-width: 1024px) {
.masonry {
column-count: 3;
}
}
@media (max-width: 768px) {
.masonry {
column-count: 2;
}
}
@media (max-width: 480px) {
.masonry {
column-count: 1;
}
}
</style>
<div class="masonry">
<div class="masonry-item">
<img src="https://via.placeholder.com/400x300" alt="Item 1">
<div class="masonry-content">
<h3>Item 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="masonry-item">
<img src="https://via.placeholder.com/400x500" alt="Item 2">
<div class="masonry-content">
<h3>Item 2</h3>
<p>Sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>
<div class="masonry-item">
<img src="https://via.placeholder.com/400x250" alt="Item 3">
<div class="masonry-content">
<h3>Item 3</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate.</p>
</div>
</div>
<div class="masonry-item">
<img src="https://via.placeholder.com/400x400" alt="Item 4">
<div class="masonry-content">
<h3>Item 4</h3>
<p>Excepteur sint occaecat cupidatat non proident.</p>
</div>
</div>
<div class="masonry-item">
<img src="https://via.placeholder.com/400x350" alt="Item 5">
<div class="masonry-content">
<h3>Item 5</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div>
<div class="masonry-item">
<img src="https://via.placeholder.com/400x450" alt="Item 6">
<div class="masonry-content">
<h3>Item 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>

Magazine Grid Pattern

<div class="magazine-pattern">
<style>
.magazine-pattern {
background-color: #f5f5f5;
padding: 40px;
}
.magazine {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.magazine-item {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: all 0.3s;
}
.magazine-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.magazine-item.featured {
grid-column: span 2;
grid-row: span 2;
}
.magazine-item.wide {
grid-column: span 2;
}
.magazine-item.tall {
grid-row: span 2;
}
.magazine-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.magazine-item.featured .magazine-image {
height: 300px;
}
.magazine-content {
padding: 20px;
}
.magazine-meta {
color: #999;
font-size: 0.875rem;
margin-bottom: 10px;
}
.magazine-title {
margin: 0 0 10px 0;
color: #333;
font-size: 1.25rem;
}
.magazine-item.featured .magazine-title {
font-size: 1.5rem;
}
.magazine-excerpt {
margin: 0;
color: #666;
line-height: 1.5;
}
@media (max-width: 768px) {
.magazine {
grid-template-columns: 1fr;
}
.magazine-item.featured,
.magazine-item.wide,
.magazine-item.tall {
grid-column: span 1;
grid-row: span 1;
}
}
</style>
<div class="magazine">
<div class="magazine-item featured">
<img src="https://via.placeholder.com/600x400" alt="Featured" class="magazine-image">
<div class="magazine-content">
<div class="magazine-meta">Featured Article · 5 min read</div>
<h3 class="magazine-title">The Future of Web Design</h3>
<p class="magazine-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="magazine-item wide">
<img src="https://via.placeholder.com/400x200" alt="Article 2" class="magazine-image">
<div class="magazine-content">
<h3 class="magazine-title">CSS Grid Mastery</h3>
<p class="magazine-excerpt">Learn advanced techniques for complex layouts.</p>
</div>
</div>
<div class="magazine-item">
<img src="https://via.placeholder.com/300x200" alt="Article 3" class="magazine-image">
<div class="magazine-content">
<h3 class="magazine-title">Flexbox Tips</h3>
<p class="magazine-excerpt">Essential tricks for better layouts.</p>
</div>
</div>
<div class="magazine-item tall">
<img src="https://via.placeholder.com/300x400" alt="Article 4" class="magazine-image">
<div class="magazine-content">
<h3 class="magazine-title">Responsive Design</h3>
<p class="magazine-excerpt">Making websites work everywhere.</p>
</div>
</div>
<div class="magazine-item">
<img src="https://via.placeholder.com/300x200" alt="Article 5" class="magazine-image">
<div class="magazine-content">
<h3 class="magazine-title">Web Typography</h3>
<p class="magazine-excerpt">Fonts that make a difference.</p>
</div>
</div>
<div class="magazine-item">
<img src="https://via.placeholder.com/300x200" alt="Article 6" class="magazine-image">
<div class="magazine-content">
<h3 class="magazine-title">Color Theory</h3>
<p class="magazine-excerpt">Creating harmonious palettes.</p>
</div>
</div>
</div>
</div>

---

Sidebar Patterns

Collapsible Sidebar

<div class="collapsible-sidebar-demo">
<style>
.collapsible-sidebar-demo {
display: flex;
min-height: 500px;
background: #f5f5f5;
}
.sidebar {
width: 250px;
background: white;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
transition: width 0.3s;
overflow: hidden;
}
.sidebar.collapsed {
width: 70px;
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid #eee;
}
.sidebar.collapsed .sidebar-header h3 {
display: none;
}
.toggle-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: #666;
padding: 5px;
}
.sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-menu li a {
display: flex;
align-items: center;
padding: 15px 20px;
color: #666;
text-decoration: none;
transition: all 0.3s;
white-space: nowrap;
}
.sidebar-menu li a:hover {
background: #f5f5f5;
color: #007bff;
}
.sidebar-menu li a.active {
background: #e3f2fd;
color: #007bff;
border-left: 3px solid #007bff;
}
.sidebar.collapsed .sidebar-menu li a span:not(.icon) {
display: none;
}
.sidebar-menu .icon {
margin-right: 15px;
width: 20px;
text-align: center;
}
.sidebar.collapsed .sidebar-menu .icon {
margin-right: 0;
}
.main-area {
flex: 1;
padding: 30px;
background: #f5f5f5;
}
.badge {
margin-left: auto;
background: #ff6b6b;
color: white;
padding: 2px 6px;
border-radius: 10px;
font-size: 0.75rem;
}
.sidebar.collapsed .badge {
display: none;
}
</style>
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<h3>Menu</h3>
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
</div>
<ul class="sidebar-menu">
<li><a href="#" class="active"><span class="icon">🏠</span> <span>Dashboard</span></a></li>
<li><a href="#"><span class="icon">👤</span> <span>Profile</span></a></li>
<li><a href="#"><span class="icon">📊</span> <span>Analytics</span> <span class="badge">New</span></a></li>
<li><a href="#"><span class="icon">✉️</span> <span>Messages</span> <span class="badge">3</span></a></li>
<li><a href="#"><span class="icon">⚙️</span> <span>Settings</span></a></li>
</ul>
</div>
<main class="main-area">
<h2>Main Content</h2>
<p>Click the toggle button to collapse/expand the sidebar.</p>
</main>
<script>
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('collapsed');
}
</script>
</div>

Sticky Sidebar Pattern

<div class="sticky-sidebar-demo">
<style>
.sticky-sidebar-demo {
display: flex;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 40px;
background: #f5f5f5;
}
.sticky-sidebar {
width: 300px;
}
.sidebar-content {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: sticky;
top: 20px;
}
.sidebar-content h3 {
margin: 0 0 15px 0;
color: #333;
}
.sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-menu li {
margin-bottom: 10px;
}
.sidebar-menu a {
display: block;
padding: 10px;
color: #666;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s;
}
.sidebar-menu a:hover {
background: #f5f5f5;
color: #007bff;
}
.sidebar-menu a.active {
background: #007bff;
color: white;
}
.main-content {
flex: 1;
}
.content-section {
background: white;
border-radius: 8px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content-section h2 {
margin: 0 0 20px 0;
color: #333;
}
.content-section p {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background: #007bff;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
opacity: 0.8;
transition: all 0.3s;
}
.back-to-top:hover {
opacity: 1;
transform: translateY(-5px);
}
@media (max-width: 768px) {
.sticky-sidebar-demo {
flex-direction: column;
}
.sticky-sidebar {
width: 100%;
}
.sidebar-content {
position: static;
}
}
</style>
<aside class="sticky-sidebar">
<div class="sidebar-content">
<h3>Table of Contents</h3>
<ul class="sidebar-menu">
<li><a href="#section1" class="active">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
</ul>
</div>
</aside>
<main class="main-content">
<div id="section1" class="content-section">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
<div id="section2" class="content-section">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="section3" class="content-section">
<h2>Section 3</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
<div id="section4" class="content-section">
<h2>Section 4</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="section5" class="content-section">
<h2>Section 5</h2>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</main>
<a href="#" class="back-to-top">↑</a>
</div>

---

Footer Patterns

Multi-Column Footer

<footer class="multi-footer">
<style>
.multi-footer {
background: #2c3e50;
color: white;
padding: 60px 20px 30px;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.footer-section h3 {
margin: 0 0 20px 0;
font-size: 1.2rem;
position: relative;
padding-bottom: 10px;
}
.footer-section h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background: #ff6b6b;
}
.footer-section p {
margin: 0 0 15px 0;
line-height: 1.6;
color: #bdc3c7;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: #bdc3c7;
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: white;
padding-left: 5px;
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
}
.contact-info li {
margin-bottom: 15px;
color: #bdc3c7;
display: flex;
align-items: center;
gap: 10px;
}
.contact-info .icon {
width: 20px;
text-align: center;
}
.newsletter-form {
display: flex;
gap: 10px;
margin-top: 20px;
}
.newsletter-input {
flex: 1;
padding: 10px;
border: none;
border-radius: 4px;
background: rgba(255,255,255,0.1);
color: white;
}
.newsletter-input::placeholder {
color: #95a5a6;
}
.newsletter-button {
padding: 10px 20px;
background: #ff6b6b;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
.newsletter-button:hover {
background: #ff5252;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-link {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s;
}
.social-link:hover {
background: #ff6b6b;
transform: translateY(-3px);
}
.footer-bottom {
max-width: 1200px;
margin: 40px auto 0;
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: #95a5a6;
}
</style>
<div class="footer-container">
<div class="footer-section">
<h3>About Us</h3>
<p>We are dedicated to providing the best services and solutions for our customers. With years of experience and a passionate team, we deliver excellence.</p>
<div class="social-links">
<a href="#" class="social-link">f</a>
<a href="#" class="social-link">t</a>
<a href="#" class="social-link">in</a>
<a href="#" class="social-link">ig</a>
</div>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Resources</h3>
<ul class="footer-links">
<li><a href="#">Blog</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact Info</h3>
<ul class="contact-info">
<li><span class="icon">📍</span> 123 Main St, City, Country</li>
<li><span class="icon">📞</span> +1 (555) 123-4567</li>
<li><span class="icon">✉️</span> [email protected]</li>
</ul>
<h3 style="margin-top: 30px;">Newsletter</h3>
<p>Subscribe to get updates</p>
<form class="newsletter-form">
<input type="email" class="newsletter-input" placeholder="Your email">
<button class="newsletter-button">Subscribe</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 Your Company. All rights reserved.</p>
</div>
</footer>

Minimal Footer

<footer class="minimal-footer">
<style>
.minimal-footer {
background: #f5f5f5;
padding: 40px 20px;
}
.minimal-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.footer-logo {
font-size: 2rem;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}
.footer-nav {
margin-bottom: 30px;
}
.footer-nav a {
color: #666;
text-decoration: none;
margin: 0 15px;
transition: color 0.3s;
}
.footer-nav a:hover {
color: #007bff;
}
.footer-copyright {
color: #999;
font-size: 0.9rem;
}
</style>
<div class="minimal-container">
<div class="footer-logo">Logo</div>
<div class="footer-nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<a href="#">Privacy</a>
<a href="#">Terms</a>
</div>
<div class="footer-copyright">
<p>&copy; 2024 Your Company. All rights reserved.</p>
</div>
</div>
</footer>

---

Modal and Overlay Patterns

Basic Modal

<div class="modal-demo">
<style>
.modal-demo {
padding: 40px;
background: #f5f5f5;
min-height: 300px;
}
.open-modal-btn {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-overlay.active {
display: flex;
}
.modal {
background: white;
border-radius: 8px;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-header {
padding: 20px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
color: #333;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #666;
transition: color 0.3s;
}
.modal-close:hover {
color: #ff6b6b;
}
.modal-content {
padding: 20px;
}
.modal-content p {
margin: 0 0 15px 0;
color: #666;
line-height: 1.6;
}
.modal-footer {
padding: 20px;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.modal-btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s;
}
.modal-btn-primary {
background: #007bff;
color: white;
}
.modal-btn-primary:hover {
background: #0056b3;
}
.modal-btn-secondary {
background: #e0e0e0;
color: #333;
}
.modal-btn-secondary:hover {
background: #ccc;
}
</style>
<button class="open-modal-btn" onclick="openModal()">Open Modal</button>
<div class="modal-overlay" id="modal">
<div class="modal">
<div class="modal-header">
<h3>Modal Title</h3>
<button class="modal-close" onclick="closeModal()">×</button>
</div>
<div class="modal-content">
<p>This is a modal dialog. It appears on top of the content and requires user interaction.</p>
<p>You can put any content here: forms, images, text, etc.</p>
</div>
<div class="modal-footer">
<button class="modal-btn modal-btn-secondary" onclick="closeModal()">Cancel</button>
<button class="modal-btn modal-btn-primary" onclick="closeModal()">Confirm</button>
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById('modal').classList.add('active');
}
function closeModal() {
document.getElementById('modal').classList.remove('active');
}
// Close on overlay click
document.getElementById('modal').addEventListener('click', function(e) {
if (e.target === this) {
closeModal();
}
});
// Close on Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && document.getElementById('modal').classList.contains('active')) {
closeModal();
}
});
</script>
</div>

Toast Notification Pattern

<div class="toast-demo">
<style>
.toast-demo {
padding: 40px;
background: #f5f5f5;
min-height: 300px;
}
.toast-buttons {
display: flex;
gap: 10px;
}
.toast-trigger {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
color: white;
}
.toast-trigger.success { background: #28a745; }
.toast-trigger.error { background: #dc3545; }
.toast-trigger.info { background: #17a2b8; }
.toast-trigger.warning { background: #ffc107; color: #333; }
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
.toast {
background: white;
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 15px;
min-width: 300px;
max-width: 400px;
animation: toastSlideIn 0.3s ease;
transform: translateX(400px);
opacity: 0;
transition: all 0.3s;
}
.toast.show {
transform: translateX(0);
opacity: 1;
}
@keyframes toastSlideIn {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.toast.success { border-left: 4px solid #28a745; }
.toast.error { border-left: 4px solid #dc3545; }
.toast.info { border-left: 4px solid #17a2b8; }
.toast.warning { border-left: 4px solid #ffc107; }
.toast-icon {
font-size: 1.5rem;
}
.toast-content {
flex: 1;
}
.toast-title {
font-weight: bold;
margin-bottom: 5px;
}
.toast-message {
color: #666;
font-size: 0.9rem;
}
.toast-close {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: #999;
transition: color 0.3s;
}
.toast-close:hover {
color: #666;
}
</style>
<div class="toast-buttons">
<button class="toast-trigger success" onclick="showToast('success')">Success Toast</button>
<button class="toast-trigger error" onclick="showToast('error')">Error Toast</button>
<button class="toast-trigger info" onclick="showToast('info')">Info Toast</button>
<button class="toast-trigger warning" onclick="showToast('warning')">Warning Toast</button>
</div>
<div class="toast-container" id="toastContainer"></div>
<script>
function showToast(type) {
const container = document.getElementById('toastContainer');
const toast = document.createElement('div');
toast.className = `toast ${type}`;
const icons = {
success: '✓',
error: '✗',
info: 'ℹ',
warning: '⚠'
};
const titles = {
success: 'Success',
error: 'Error',
info: 'Info',
warning: 'Warning'
};
toast.innerHTML = `
<div class="toast-icon">${icons[type]}</div>
<div class="toast-content">
<div class="toast-title">${titles[type]}</div>
<div class="toast-message">This is a ${type} message</div>
</div>
<button class="toast-close" onclick="this.parentElement.remove()">×</button>
`;
container.appendChild(toast);
// Trigger animation
setTimeout(() => toast.classList.add('show'), 10);
// Auto remove after 5 seconds
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => toast.remove(), 300);
}, 5000);
}
</script>
</div>

---

Best Practices Summary

Key Principles

1. Consistency: Use patterns consistently throughout your site
2. Responsiveness: Ensure patterns work on all devices
3. Accessibility: Make patterns usable for everyone
4. Performance: Optimize patterns for fast loading
5. Maintainability: Write clean, documented code
6. Flexibility: Patterns should adapt to different content
7. User Experience: Focus on usability first

Pattern Selection Guide

Content Type	Recommended Pattern
Content previews	Card patterns
Site navigation	Navigation patterns
Page introduction	Hero patterns
User input	Form patterns
Visual content	Grid patterns
Supporting content	Sidebar patterns
Page end	Footer patterns
Temporary messages	Modal/Toast patterns

Remember: The best pattern is one that serves your users' needs while maintaining visual appeal and performance!

HTML & CSS Learning Guides, Exercises, Projects, Design Systems, Accessibility & Performance (Related to HTML & CSS Development)

---

HTML & CSS Quiz – Comprehensive Assessment:
This quiz evaluates core knowledge of HTML and CSS including structure, styling, layout, forms, and responsive design. It is used to test practical understanding of front-end fundamentals and identify skill levels in web development.
Read more: https://macronepal.com/bash/html-and-css-quiz-comprehensive-assessment/

---

Complete Guide to HTML & CSS Tooling & Automation:
This guide explains tools and automation workflows used in modern web development, such as preprocessors, build tools, and task runners that improve efficiency in HTML and CSS projects.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-tooling-automation/

---

Complete HTML & CSS Exercises:
A collection of practical exercises designed to strengthen HTML and CSS skills through hands-on coding tasks, covering layout, styling, and responsive design concepts.
Read more: https://macronepal.com/bash/complete-html-and-css-exercises/

---

Complete HTML & CSS Landing Page Project:
This project focuses on building a full landing page using HTML and CSS, helping learners understand real-world website structure, layout design, and UI development.
Read more: https://macronepal.com/bash/complete-html-css-landing-page-project/

---

HTML & CSS Debugging and Testing Guide:
This guide teaches how to identify and fix errors in HTML and CSS code, along with testing techniques to ensure websites work correctly across browsers.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-debugging-testing/

---

HTML & CSS Design Systems Guide:
A design system approach helps maintain consistency in UI development using reusable components, styles, and patterns across web projects.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

---

HTML & CSS Accessibility (A11y) Guide:
This guide focuses on making websites accessible for all users, including proper semantic HTML, keyboard navigation, alt text, and screen reader support.
Read more: https://macronepal.com/bash/complete-guide-to-html-css-accessibility-a11y/

---

HTML & CSS Performance Guide:
This topic explains optimization techniques such as reducing file size, improving loading speed, and writing efficient HTML and CSS for better website performance.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-performance/

---

HTML & CSS Design Systems (Advanced Overview):
Design systems help developers maintain scalable and consistent UI components across large projects using structured HTML and reusable CSS patterns.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/