body {
font-family: Arial, sans-serif;
margin: 0;
background: #fafafa;
color: #333;
}
/* ---------- Shared Styles ---------- */
h2 {
margin-top: 0;
}
p {
margin: 0 0 1rem;
}
/* ---------- SECTION 1: Pinterest Masonry Grid ---------- */
.masonry {
column-count: 3;
column-gap: 1rem;
padding: 2rem;
}
.masonry-item {
background: #fff;
margin-bottom: 1rem;
display: inline-block;
width: 100%;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.masonry-item img {
width: 100%;
display: block;
}
.masonry-item .content {
padding: 1rem;
}
/* ---------- SECTION 2: Collage / Overlap ---------- */
.collage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2rem;
padding: 4rem 2rem;
background: #fff;
}
.collage-item {
position: relative;
}
.collage-item img {
width: 100%;
display: block;
border-radius: 12px;
}
.collage-item .text-block {
position: absolute;
bottom: -20px;
left: 20px;
background: rgba(255,255,255,0.9);
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
max-width: 80%;
}
/* ---------- SECTION 3: Scrollytelling Panels ---------- */
.panel {
height: 100vh;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
background-size: cover;
background-position: center;
background-attachment: fixed; /* Parallax effect */
}
.panel h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.panel p {
font-size: 1.2rem;
max-width: 600px;
}
.panel:nth-child(odd) { background-blend-mode: multiply; background-color: rgba(0,0,0,0.4); }
.panel:nth-child(even) { background-blend-mode: screen; background-color: rgba(0,0,0,0.3); }
GAMEDAY
Feature One Title
This is the first feature section with an engaging description to capture visitor interest.
Feature Two Title
Alternating layout with the image now on the right for visual variety and balance.
Feature Three Title
Highlight a service, product, or project with a short, enticing blurb here.
Feature Four Title
Keep the message concise and pair it with a compelling photograph to tell the story.
Feature Five Title
This layout works well for small summaries or teasers leading to full content pages.
Feature Six Title
The alternating pattern keeps the page visually dynamic without overwhelming visitors.
Feature Seven Title
Finish the series with a strong closing feature that leaves a lasting impression.
MAPS/PARKING
Dynamic Storytelling
Layered images and text create a magazine-like feel.
Editorial Energy
Perfect for highlighting bold visuals alongside text blurbs.
GIVEAWAYS
Immersive Introduction
Draw the visitor in with full-width imagery and large, readable text.
Chapter Two
Each scroll reveals a new “chapter” with its own background and content focus.
Final Chapter
Leave the viewer with a strong image and message as they reach the end.
