SCSS

by mhd83

HTML

<div class="grid">

    <header>
        <h1>Hector’s Adventures with George</h1>
    </header>

    <figure>
        <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'>
        <figcaption>We played in Nana and Grandad’s garden. We picked apples and made apple crumble!</figcaption>
    </figure>
    
    <figure>
        <img src='https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ'>
        <figcaption>We had a game of football.</figcaption>
    </figure>
    
    <figure>
        <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'>
        <figcaption>We read a funny story together.</figcaption>
    </figure>
    
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Schoolbell&display=swap');

* { margin: 0; padding: 0; font-size: 16px; }

body {
  font-family: 'Schoolbell', cursive;
  padding: 1rem;
}

header {
	padding: 1rem 2rem;
	box-shadow: -0.035rem 0.03rem 0.3rem rgba(0, 0, 0, 0.2);
	text-align: center;
	background-color: aliceBlue;
  margin-bottom: -2rem;
  position: relative;
  z-index: 2;
  display: inline-block;

  h1 {
    margin: 0;
    font-size: 2rem;
  }
}

div.grid {
  width: 80%;
  
  figure {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-bottom: -2rem;

    img {
      max-width: 55%;
    }
  
    figcaption {
      margin: 0 -2rem 0 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;
    }
    
    &:nth-child(odd) {
      flex-direction: row;
      
      figcaption {
        margin: 0 0 0 -2rem;
      }
    }
    
    &:nth-child(2) {
      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/paint-splatter-1.svg);
      background-size: cover;
      background-repeat: no-repeat;
    }
    
    &:nth-child(3) {
      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/paint-splatter-2.svg);
      background-size: cover;
      background-repeat: no-repeat;
    }
    
    &:nth-child(4) {
      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/paint-splatter-3.svg);
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}