15 CSS Footer Designs 04 / 15
Postcard
Travel / lifestyle footer with a Polaroid-style brand card rotated 1.5° on the left, dotted-border "wish you were here" feel, and three column link blocks beside it. Pure CSS, no JS.
The code
<footer class="cf06">
<div class="cf06b">
<div class="cf06card">
<div class="cf06img" aria-hidden="true">⛵</div>
<div class="cf06cap">
<div class="cf06cn">Driftways</div>
<div class="cf06ct">Slow travel · Est. 2018</div>
</div>
</div>
<div class="cf06col">
<h4>Wander</h4>
<a href="#">Destinations</a>
<a href="#">Itineraries</a>
<a href="#">Field guides</a>
<a href="#">Packing lists</a>
<a href="#">Slow trains</a>
</div>
<div class="cf06col">
<h4>Stories</h4>
<a href="#">Recent essays</a>
<a href="#">Photo journals</a>
<a href="#">Reader letters</a>
<a href="#">Audio dispatches</a>
<a href="#">Issue archive</a>
</div>
<div class="cf06col">
<h4>Studio</h4>
<a href="#">About</a>
<a href="#">Contributors</a>
<a href="#">Submissions</a>
<a href="#">Bookshop</a>
<a href="#">Newsletter</a>
</div>
</div>
<div class="cf06meta">
<span>© 2026 Driftways · Made slowly in Lisbon, Tokyo, and Mexico City.</span>
</div>
</footer> <footer class="cf06">
<div class="cf06b">
<div class="cf06card">
<div class="cf06img" aria-hidden="true">⛵</div>
<div class="cf06cap">
<div class="cf06cn">Driftways</div>
<div class="cf06ct">Slow travel · Est. 2018</div>
</div>
</div>
<div class="cf06col">
<h4>Wander</h4>
<a href="#">Destinations</a>
<a href="#">Itineraries</a>
<a href="#">Field guides</a>
<a href="#">Packing lists</a>
<a href="#">Slow trains</a>
</div>
<div class="cf06col">
<h4>Stories</h4>
<a href="#">Recent essays</a>
<a href="#">Photo journals</a>
<a href="#">Reader letters</a>
<a href="#">Audio dispatches</a>
<a href="#">Issue archive</a>
</div>
<div class="cf06col">
<h4>Studio</h4>
<a href="#">About</a>
<a href="#">Contributors</a>
<a href="#">Submissions</a>
<a href="#">Bookshop</a>
<a href="#">Newsletter</a>
</div>
</div>
<div class="cf06meta">
<span>© 2026 Driftways · Made slowly in Lisbon, Tokyo, and Mexico City.</span>
</div>
</footer>.cf06 {
width: 100%;
padding: 56px 32px 28px;
background: #ebe3d3;
color: #2a2520;
font-family: ui-sans-serif, system-ui, sans-serif;
box-sizing: border-box;
}
.cf06b {
display: grid;
grid-template-columns: 220px 1fr 1fr 1fr;
gap: 32px;
max-width: 1100px;
margin: 0 auto;
padding-bottom: 28px;
border-bottom: 1.5px dashed rgba(42, 37, 32, 0.25);
align-items: flex-start;
}
.cf06card {
background: #fff;
padding: 14px 14px 18px;
box-shadow:
0 8px 22px rgba(42, 37, 32, 0.18),
0 2px 6px rgba(42, 37, 32, 0.08);
transform: rotate(-1.5deg);
transition: transform 0.3s;
}
.cf06card:hover {
transform: rotate(0deg) translateY(-2px);
}
.cf06img {
aspect-ratio: 1;
background: #c8b89e;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
}
.cf06cap {
padding-top: 12px;
text-align: center;
}
.cf06cn {
font:
700 18px/1.1 "Bradley Hand",
"Marker Felt",
ui-serif,
cursive;
color: #2a2520;
}
.cf06ct {
font:
11px/1.4 ui-sans-serif,
system-ui;
color: #6b6056;
margin-top: 3px;
letter-spacing: 0.04em;
}
.cf06col {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.cf06col h4 {
margin: 0 0 6px;
font:
700 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c43a32;
}
.cf06col a {
font-size: 14px;
color: #2a2520;
text-decoration: none;
transition: color 0.2s;
}
.cf06col a:hover {
color: #c43a32;
text-decoration: underline;
text-underline-offset: 3px;
}
.cf06meta {
max-width: 1100px;
margin: 18px auto 0;
font:
italic 12px ui-serif,
Georgia,
serif;
color: #6b6056;
text-align: center;
}
@media (max-width: 880px) {
.cf06b {
grid-template-columns: 1fr 1fr;
}
.cf06card {
grid-column: span 2;
max-width: 240px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.cf06b {
grid-template-columns: 1fr;
}
.cf06card {
grid-column: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.cf06card {
transition: none;
}
} .cf06 {
width: 100%;
padding: 56px 32px 28px;
background: #ebe3d3;
color: #2a2520;
font-family: ui-sans-serif, system-ui, sans-serif;
box-sizing: border-box;
}
.cf06b {
display: grid;
grid-template-columns: 220px 1fr 1fr 1fr;
gap: 32px;
max-width: 1100px;
margin: 0 auto;
padding-bottom: 28px;
border-bottom: 1.5px dashed rgba(42, 37, 32, 0.25);
align-items: flex-start;
}
.cf06card {
background: #fff;
padding: 14px 14px 18px;
box-shadow:
0 8px 22px rgba(42, 37, 32, 0.18),
0 2px 6px rgba(42, 37, 32, 0.08);
transform: rotate(-1.5deg);
transition: transform 0.3s;
}
.cf06card:hover {
transform: rotate(0deg) translateY(-2px);
}
.cf06img {
aspect-ratio: 1;
background: #c8b89e;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
}
.cf06cap {
padding-top: 12px;
text-align: center;
}
.cf06cn {
font:
700 18px/1.1 "Bradley Hand",
"Marker Felt",
ui-serif,
cursive;
color: #2a2520;
}
.cf06ct {
font:
11px/1.4 ui-sans-serif,
system-ui;
color: #6b6056;
margin-top: 3px;
letter-spacing: 0.04em;
}
.cf06col {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.cf06col h4 {
margin: 0 0 6px;
font:
700 11px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c43a32;
}
.cf06col a {
font-size: 14px;
color: #2a2520;
text-decoration: none;
transition: color 0.2s;
}
.cf06col a:hover {
color: #c43a32;
text-decoration: underline;
text-underline-offset: 3px;
}
.cf06meta {
max-width: 1100px;
margin: 18px auto 0;
font:
italic 12px ui-serif,
Georgia,
serif;
color: #6b6056;
text-align: center;
}
@media (max-width: 880px) {
.cf06b {
grid-template-columns: 1fr 1fr;
}
.cf06card {
grid-column: span 2;
max-width: 240px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.cf06b {
grid-template-columns: 1fr;
}
.cf06card {
grid-column: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.cf06card {
transition: none;
}
}