qpEeQZ

index.html

<div class="wrapper">
  <img class="site-header" src="https://www.wearepixl.com/images/logo-b660e3e2.svg" alt="Pixl">
  <h2>Great Apps, Great Websites, Great Results</h2>
</div>

qpeeqz.markdown

qpEeQZ

A Pen by Matthew Deloughry on CodePen.

License.

style.scss

body {
  font-family: 'Montserrat', sans-serif;
  animation-name: background-change;
  animation-duration: 120s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

h1, h2 { 
  font: {
   family: 'Montserrat', sans-serif;
  }
  text-transform: uppercase;
}

h1 {font-size: 24px;}

/*
  layout
*/
body, html {
  display: grid;
  height:100%;
  
  .wrapper {
    max-width: 80%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1em; 
   
    .site-header, h2 {
      grid-column: 1/5;
      text-align:center;
      color: #fff;
      font-size: 20px;
      letter-spacing: 0.15rem;
      line-height: 1.3;
      padding-bottom: 2em;
    }
    
    h2 {
      border-top: 2px solid #fff;
      padding: 2em 0 2em 0;
    }
    
    @media (max-width: 400px) {
      
      width:65%;
      grid-template-columns: minmax(100px, 1fr);
      justify-content: center;
      align-items: center;
      
      h2, .site-header {
        font-size: 0.75rem;
        grid-column: 1;  
      }
      a {text-align: center;}
    }
  }
  
  a {
    text-decoration: none;
    text-align:center;
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    
    &:hover {
     text-decoration: underline; 
    }
  }
  
  div {
    margin:auto;
  }
}

@keyframes background-change {
  0%{background-color: #353941;}
  25%{background-color:#3b5998;}
  50%{background-color:#6bab0f;}
  75%{background-color:#3b5998;}
  100%{background-color: #353941;}
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />