<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,600,700|Roboto+Slab|Shadows+Into+Light" rel="stylesheet">
<div class="flex-em">
  <div class="heading">
    <div class="inner">
      <h1>Keep Pushing Through</h1>
      <h2>Because you never know...</h2>
    </div>
  </div>
  <main>

    <p class="center">You never know what's on the other side until you get there.</p>
    <p class="center">You never know when you might <a id="breakThrough" class="break-through" onclick="shakeThrough()">break&nbsp;through</a></p>
    <p class="center">You never know when something will change</p>
    <p class="center">You never know when you might change somebody's life for the better</p>
    <p class="last">But you do know that <span class="make-a-diff">you can make a difference</span> if you keep at it.</p>
  </main>
  <footer>

    <small>Pen by <a href="https://www.aaronrhoades.com/">Aaron Rhoades</a>
  </small>
    <div class="social">
      <a href="https://www.instagram.com/aaronbrosef"><img src="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-social-instagram.svg" alt=""></a>
      <a href="https://www.facebook.com/aaronrhoadesmusic"><img src="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-social-facebook.svg" alt=""></a>
    </div>
  </footer>
</div>
@import "compass";
$off-white: #fffbff;
$brown: #a0793e;
$dark-red: #750801;

.flex-em {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
main {
  padding: 70px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.center {
  max-width: 400px;
  align-self: center;
}
.heading {
  background: #a0793e;
  margin: 0;
  padding: 10px 20px;
  h1 {
    font-family: "Roboto Slab", serif;
    color: #fffbff;
    text-shadow: 1px 1px 0 #000;
  }
  h2 {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 1px;
    color: darken($brown, 25%);
    text-shadow: 3px 0 0 darken($brown, 10%);
  }
}
p {
  color: #444;
  font-weight: 400;
  font-family: "Josefin Sans", sans-serif;
  text-align: center;
  margin: 5vh 0;
  font-size: 18px;
}
p:first-of-type {
  //font-size: 22px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  //font-weight: 300;
}
p:nth-of-type(3) {
  font-weight: 300;
  letter-spacing: 1px;
  color: #555;
}
p:nth-of-type(4) {
  font-weight: 300;
  letter-spacing: 2px;
  color: #888;
  font-style: italic;
  line-height: 22px;
}

.last {
  font-weight: 700;
}

.break-through {
  display: inline-block;
  font-family: "Shadows Into Light", cursive;
  text-transform: uppercase;
  text-decoration: none;
}
.break-through:hover {
  cursor: pointer;
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.shake { //to call javascript
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.make-a-diff {
  display: inline-block;
  color: #9f351d;
  transform: rotate(-2deg);
  position: relative;
  top: -2px;
  background: #a5e5ef;
  box-shadow: -3px 3px 0 #72a7bb, 1px -1px 0 #72a7bb;
  margin: 0 3px;
}

footer {
  font-family: "Roboto Slab", serif;
  background: #d8cb9b;
  padding: 20px;
  text-align: center;
  color: #585248;
  small a {
    color: #a0793e;
  }
  .social {
    margin: 20px 10px 0;
    img {
      width: 30px;
      height: 30px;
      filter: opacity(0.5);
      &:hover {
        filter: opacity(0.7);
      }
    }
  }
}
@media (max-width: 880px) {
  .make-a-diff {
    display: block;
    font-weight: 700;
    max-width: 264px;
    margin: 5px auto;
  }
}
@media (min-width: 700px) {
  
  main {
    min-height: 70vh;
  }
  .heading .inner {
    width: 500px;
    margin: 0 auto;
  }
  p {
    font-size: 20px;
  }
}
// shake animation adapted from:
// https://css-tricks.com/snippets/css/shake-css-keyframe-animation/
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-4px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(3px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(2px, 0, 0);
  }
}
View Compiled
function shakeThrough() {
  var breakthrough = document.getElementById("breakThrough");
  //Restart breakthrough animaton
  
  var newBreakthrough = breakthrough.cloneNode(true);
  newBreakthrough.classList.add("shake");

  breakthrough.parentNode.replaceChild(newBreakthrough, breakthrough);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.