Web Layout Playground

Hero Layouts

HERO

Layout Preview

Welcome to Our Platform

Create stunning layouts with just CSS. No frameworks required.

HTML

CSS

.hero-centered {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 8px;
}

.hero-centered h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.hero-centered p {
    font-size: 1.1rem;
    color: #bbb;
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

Text & Content Layouts

TEXT

Layout Preview

The Art of Web Design

Web design has evolved significantly over the past two decades. From simple HTML pages to complex interactive applications, the landscape has transformed dramatically.

Today's designers must balance aesthetics with functionality, creating experiences that are both beautiful and practical. This requires a deep understanding of user behavior and design principles.

HTML

CSS

.article-single {
    max-width: 700px;
}

.article-single h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.article-single p {
    color: #ccc;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

Card & Grid Layouts

CARDS

Layout Preview

Design

Create beautiful, responsive layouts with pure CSS.

Performance

Lightning fast websites optimized for all devices.

Security

Enterprise-grade security for your peace of mind.

HTML

CSS

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
}

Media & Video Layouts

MEDIA

Layout Preview

Watch Our Story

HTML

CSS

.video-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 300px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.play-button {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
}

Navigation Layouts

NAV

Layout Preview

HTML

CSS

.nav-simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

Desktop Navigation

NAV

Layout Preview

Logo

Hero Content

HTML

CSS

.nav-transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.nav-transparent .nav-logo {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
}

.nav-transparent .nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-transparent .nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}`
                    

Mobile Navigation

NAV

Layout Preview

Page content...

HTML

CSS

.mobile-hamburger {
    position: relative;
}

.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #111;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    background: #222;
    z-index: 100;
    display: none;
    flex-direction: column;
    padding: 1rem 0;
}

.mobile-menu a {
    padding: 1rem 1.5rem;
    color: #ccc;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: block;
}

.close-btn {
    align-self: flex-end;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}`
                    

Z-Pattern Layout

PATTERN

Layout Preview

Logo

Info

HTML

CSS

.z-pattern {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.z-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.z-cell {
    padding: 2rem;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    position: relative;
}

.z-label {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #3b82f6;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

.z-diagonal {
    text-align: center;
    font-size: 2rem;
    color: #3b82f6;
}`
                    

F-Pattern Layout

PATTERN

Layout Preview

Full Top Scan

Secondary Scan

Left Column Scan Down

Fading engagement

HTML

CSS

.f-pattern {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.f-top {
    background: rgba(59, 130, 246, 0.1);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    position: relative;
    width: 100%;
}

.f-middle {
    background: rgba(59, 130, 246, 0.08);
    padding: 1.5rem 2rem;
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    position: relative;
    width: 60%;
}

.f-bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.f-label {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #f97316;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}`
                    

Footer Layouts

FOOTER

Layout Preview

HTML

CSS

.footer-simple {
    text-align: center;
}

.footer-copyright {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

Icon Layouts

ICON

Layout Preview

Design

Create beautiful designs with ease

Develop

Build powerful applications

Launch

Deploy with confidence

HTML

CSS

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.feature-card {
    text-align: center;
}

.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1rem;
}

.feature-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-card p {
    font-size: 0.9rem;
    color: #999;
}`
                    

Image Layouts

IMAGE

Layout Preview

Amazing Product

Create stunning layouts with powerful CSS techniques. Build responsive designs that look great on any device.

📸

HTML

CSS

.hero-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-split-text h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-split-text p {
    color: #bbb;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.hero-split-image {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    height: 300px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}`
                    

Card Layouts

CARDS

Layout Preview

Card Title

This is a simple card with a colored header, title, description, and a link. Perfect for organizing content.

Learn More →

HTML

CSS

.card-basic {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.card-header {
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-body {
    padding: 1.5rem;
}

.card-body h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.card-body p {
    color: #999;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.card-body a {
    color: #60a5fa;
    text-decoration: none;
    transition: color 0.3s;
}

.card-body a:hover {
    color: #93c5fd;
}`
                    

Grid Layouts

GRIDS

Layout Preview

Card 1

Card 2

Card 3

HTML

CSS

.grid-equal-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.grid-card {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    font-weight: 600;
    color: #ccc;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.grid-card:hover {
    background: #222;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
}`
                    

Video Hero Layouts

VIDEO HERO

Layout Preview

Stream Your Content

Watch amazing videos

HTML

CSS

.vh-fullscreen-layout {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
}

.vh-fullscreen-layout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.vh-fullscreen-layout h2,
.vh-fullscreen-layout p,
.vh-fullscreen-layout button {
    position: relative;
    z-index: 2;
}

.vh-fullscreen-layout h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.vh-fullscreen-layout p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #ddd;
}`
                    

Slideshow/Carousel Layouts

SLIDESHOW

Layout Preview

Hero Layouts

Welcome to Our Platform

Text & Content Layouts

The Art of Web Design

Card & Grid Layouts

Design

Performance

Security

Media & Video Layouts

Navigation Layouts

Desktop Navigation

Mobile Navigation

Z-Pattern Layout

F-Pattern Layout

Footer Layouts

Icon Layouts

Design

Develop

Launch

Image Layouts

Amazing Product

Card Layouts

Card Title

Grid Layouts

Video Hero Layouts

Stream Your Content

Slideshow/Carousel Layouts

Slide One