<section class="content">
  
  <!-- Top Cat -->
  <div class="cat-top"></div>
  
  <!-- White Block -->
  <div class="content__block">
    Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meowmeow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow
  </div>
  
  <!-- Bottom Cat -->
  <div class="cat-bottom"></div>
  
</section>
$bodyBg: #030018;
$purple: #292477;
$green: #13693B;
$magenta: #AD2266;
$blue: #1a28b3;
  
html {
  box-sizing: border-box;
  font-size: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #dfdfdf;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  line-height: 1.3;
}

h1, h2 {
  margin-top: 0;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 1.5rem;
}

header {
  padding: 30px;
  background-color: $blue;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);  
  position: relative;
  z-index: 10;
  
  a {
    color: #ffffff;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    display: inline-block;
    margin: 0 10px;
  }
}

.hero {
  position: relative;
  height: 300px;
  overflow: hidden;
  
  &__background {
    position: absolute;
    background-image: url('https://placekitten.com/800/560');
    background-size: cover;
    background-position: center;
    opacity: 0.8;
    z-index: 0;
    width: 100%;
    height: 600px;
  }

  &__text {
    position: relative;
    text-align: center;
    z-index: 100;
    margin: 3rem 0;
    padding: 1.5rem;
  }
}

.content {
  color: $bodyBg;
  padding: 1rem;
    
  &__block {
    background-color: #ffffff;
    margin: 50px 0;
    padding: 30px;
    min-height: 180px;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(0,0,0,0.25);
  }
      
  .cat-top, .cat-bottom {
    width: 120px;
    height: 120px;    
    background-image: url('https://www.dropbox.com/s/mqapcs2hsf7k4yp/cat-expressions_03.png?dl=1');
    background-size: cover;
    background-position: center center;
  }
  
  .cat-top { 
    margin-bottom: -100px;
  }  
  
  .cat-bottom {    
    float: right;
    margin-top: -100px;
  }
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,700

External JavaScript

This Pen doesn't use any external JavaScript resources.