<div class="grid">
<header>
<h1>Hector’s Adventures with George</h1>
</header>
<figure class="fig fig--1" style="--aspect-ratio: 3/4;">
<img src='https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='Small child playing with toys'>
</figure>
<p>We played in Nana and Grandad’s garden. We picked apples and made apple crumble!</p>
<figure class="fig fig--2" style="--aspect-ratio: 4/3;">
<img src='https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ'>
</figure>
<p>We had a game of football.</p>
<figure class="fig fig--3" style="--aspect-ratio: 3/4;">
<img src='https://images.unsplash.com/photo-1472162072942-cd5147eb3902?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='Child reading'>
</figure>
<p>We read a funny story together.</p>
</div>
@import url('https://fonts.googleapis.com/css?family=Schoolbell&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Schoolbell', cursive;
font-size: 2rem;
margin: 0;
padding: 2rem;
}
h1 {
margin: 0;
font-size: 3.8rem;
}
figure {
margin: 0;
background: rgba(lightBlue, 0.8);
box-shadow: -0.035rem 0.03rem 0.3rem rgba(0, 0, 0, 0.2);
}
p {
margin: 0;
padding: 1.8rem;
background-color: aliceBlue;
box-shadow: -0.035rem 0.03rem 0.3rem rgba(0, 0, 0, 0.2);
z-index: 1;
position: relative;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
.grid {
--verticalPadding: 2rem;
--overlap: 6rem;
display: grid;
/* 6/5 grid from my compound grid generator: https://codepen.io/michellebarker/full/zYOMYWv */
grid-template-columns: 5fr 1fr 4fr 2fr 3fr 3fr 2fr 4fr 1fr 5fr;
grid-template-rows:
[header-start]
auto
[fig1-start]
3rem
[header-end]
minmax(var(--verticalPadding), auto)
[p1-start]
minmax(0, auto)
[p1-end]
minmax(var(--verticalPadding), auto)
[fig2-start]
var(--overlap)
[fig1-end]
minmax(var(--verticalPadding), auto)
[p2-start]
minmax(0, auto)
[p2-end]
minmax(var(--verticalPadding), auto)
[fig3-start]
var(--overlap)
[fig2-end]
minmax(var(--verticalPadding), auto)
[p3-start]
minmax(0, auto)
[p3-end]
minmax(var(--verticalPadding), auto)
[fig3-end];
grid-auto-rows: minmax(var(--verticalPadding), auto);
gap: 1rem;
max-width: 75rem;
margin: 0 auto;
align-items: center;
background: left top / 40rem no-repeat url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/paint-splatter-1.svg), right bottom / 40rem no-repeat url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/paint-splatter-2.svg);
&::before,
&::after {
content: '';
display: block;
}
&::before {
background: left center / 20rem no-repeat url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/paint-splatter-3.svg);
grid-column: 3 / -3;
grid-row: 9 / span 4;
width: 100%;
height: 400px;
position: relative;
z-index: 2;
}
}
header {
grid-column: 1 / -2;
grid-row: header;
padding: 2rem;
box-shadow: -0.035rem 0.03rem 0.3rem rgba(0, 0, 0, 0.2);
z-index: 1;
text-align: center;
background-color: aliceBlue;
}
.fig {
&--1 {
grid-column: span 5 / -1;
grid-row: fig1;
}
&--2 {
grid-column: 1 / span 7;
grid-row: fig2;
}
&--3 {
grid-column: span 5 / -2;
grid-row: fig3;
img {
object-position: left;
}
}
}
p {
&:first-of-type {
grid-column: 3 / span 4;
grid-row: p1;
z-index: 1;
transform: rotate(-1deg);
}
&:nth-of-type(2) {
grid-column: span 3 / -3;
grid-row: p2;
transform: rotate(0.8deg);
}
&:nth-of-type(3) {
grid-column: 2 / span 4;
grid-row: p3;
transform: rotate(-0.7deg);
}
}
/* Aspect ratio – https://css-tricks.com/aspect-ratio-boxes/ */
[style*="--aspect-ratio"] {
position: relative;
}
[style*="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.