<div class="support-grid"></div>
<section class="grid-1">
<div class="panel panel-title">
<h1>Barry’s Cushion</h2>
<p>A tale of lethargy and soft furnishings</p>
</div>
<div class="panel panel-1"></div>
<div class="panel panel-2"></div>
<div class="panel panel-3">
<p>“I should probably get up–things to do.”</p>
</div>
<div class="panel panel-4"></div>
<div class="panel panel-5"></div>
<div class="panel panel-6"></div>
<div class="panel panel-7">
<p>“Naaah.”</p>
</div>
<div class="panel panel-8"></div>
<div class="panel panel-9"></div>
<div class="panel panel-copyright">
<p>Sleepy Fat Cat by messenj4h<br>© Copyright happily ever after <a href="https://webdesign.tutsplus.com/tutorials/css-grid-layout-and-comics-as-explained-by-barry-the-cat--cms-27617">Envato Tuts+</a>
</div>
</section>
/* basics */
body {
background: #f8f7f2;
padding: 0 10%;
font: 100%/1.5 'Kalam', cursive;
}
h1 {
margin: 0;
line-height: 1;
padding: 10px;
color: #251b19;
}
p {
margin: 0;
padding: 10px;
color: #251b19;
font-size: 1.2em;
}
a {
color: #e56633;
}
a:hover {
text-decoration: none;
}
/* the grid */
.grid-1 {
display: grid;
width: 100%;
max-width: 770px;
margin: 10% auto;
grid-template-columns: 1fr;
grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto;
grid-gap: 25px;
}
/* panels */
.panel {
color: white;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
box-shadow: 0 0px 0px 5px #251b19;
}
/* individual panels */
.panel-title {
box-shadow: none;
}
.panel-1 {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-002.svg);
box-shadow: none;
}
.panel-2 {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-001.svg);
}
.panel-3 {
box-shadow: none;
}
.panel-4 {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-003.svg);
}
.panel-5 {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-004.svg);
}
.panel-6 {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-005.svg);
}
.panel-7 {
box-shadow: none;
}
.panel-8 {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-007.svg);
}
.panel-9 {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-008.svg);
box-shadow: none;
}
.panel-copyright {
box-shadow: none;
font-size: .75em;
}
/* media query 1 */
@media only screen and (min-width: 400px) {
.grid-1 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto 200px auto 200px 200px auto 200px auto;
}
.panel-title,
.panel-3,
.panel-6,
.panel-7,
.panel-copyright {
grid-column: span 2;
}
.panel-copyright {
text-align: right;
}
.panel-7 {
text-align: center;
}
h1 {
font-size: 3em;
}
}
/* media query 2 */
@media only screen and (min-width: 600px) {
.grid-1 {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 200px 200px 200px auto;
}
.panel-title,
.panel-copyright {
grid-column: span 3;
}
.panel-3,
.panel-6 {
grid-column: auto;
}
.panel-8 {
grid-column: span 2;
}
h1 {
font-size: 3.5em;
}
p {
font-size: 1.3em;
}
/* flexbox centering */
.panel-3 {
display: flex;
align-items: center;
}
/* layering */
.panel-7 {
grid-column: 1;
grid-row: 4;
z-index: 1;
margin: -5px 0 0 -10px;
transform: rotate(-2deg);
}
.panel-7 p {
background: #f8f7f2;
box-shadow: 0 0px 0px 5px #251b19;
text-align: left;
}
.panel-8 {
grid-column: 1 / span 2;
grid-row: 4;
background-size: 70%;
background-position: right;
}
}
This Pen doesn't use any external JavaScript resources.