<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Vibes&display=swap" rel="stylesheet">
  </head>
<body class="container">
  <header>
    <div class="logo">
          <img src="https://i2.wp.com/allmaddesigns.com/wp-content/uploads/2019/07/logo-e1562479112497.png?fit=150%2C150&ssl=1 " />
    </div>
  <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Services</li>
          <li>Contact</li>
        </ul>
 </nav>
  </header>
<div class="cover">
</div>
 <div class="cta hide">
   <h3>HEADING</h3>
   <h4>Sed felis eget velit aliquet sagittis id consectetur purus.</h4>
   <a class="button">
     Buy Now!
   </a>
  </div>
  <div class="left-bar">
     <div>
      <h3>HEADING</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
    </div>
    <div>
      <h3>HEADING</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
    </div>
    <div>
      <h3>HEADING</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
    </div>
  </div>
  <div class="content-main">
 <div class="columns">
 <div class="hide col-1">
      <h3>HEADING</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
 </div>
<div class="hide col-2">
      <h3>HEADING</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
</div>
<div class="hide col-3">
      <h3>HEADING</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
</div>
    </div>
  </div>
  <footer>
    <div class="low">
      <h3>HEADING</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
    </div>
    <div>
      <h3>HEADING</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
    </div>
    <div class="low">
      <h3>HEADING</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
    </div>
<div>
    <h3>HEADING</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet sagittis id consectetur purus.</p>
    </div>
  </footer>
</body>
</html>
@keyframes reveal {
  from {opacity:0; margin-top:25px;}
  to{opacity:1; margin-top:10px;}
}
@-webkit-keyframes reveal {
  from {opacity:0; margin-top:25px;}
  to{opacity:1; margin-top:10px;}
}
@keyframes call-reveal {
  from {opacity:0; margin-top:40px;}
  to{opacity:1; margin-top:25px;}
}
@-webkit-keyframes call-reveal {
  from {opacity:0; margin-top:40px;}
  to{opacity:1; margin-top:25px;}
}
.hide {
  opacity:0;
}
.reveal {
  animation: reveal 1s ease-out;
}
.call-reveal {
  animation: call-reveal 2s ease-out;
}
html {
  box-sizing:border-box;
  font-family: 'Vibes', cursive;
  letter-spacing:.12em;
}
p {
  font-family:roboto, sans-serif;
  font-size:16px;
}
h3 {
  font-size:25px;
}
h4 {
  font-size:23px;
}
.container {
width: 100%;
  position:relative;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr [col-start]);
    grid-template-rows: repeat(12, minmax(0px, max-content));
    background: #ddd;
    justify-content: stretch;
}
header {
    background: transparent;
    grid-column: 1/ span 12;
    grid-row: 1/ span 1;
    display: flex;
    min-height: 165px;
    flex-flow: row nowrap;
    justify-content: flex-end;
    z-index: 2;
}
nav {
    min-width: 100%;
    display: flex;
    align-self: flex-end;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    padding-bottom: 15px;
}
nav ul {
    display: flex;
    list-style-type: none;
    padding-left: 0;
    margin: 0 35px 0 25px;
}
nav ul li {
    display: inherit;
    margin-left: 5px;
    font-size: 20px;
    background: #fff;
    background-position: center;
  transition: background 0.8s;
    color: #000;
    padding: 2px 7px 1px 7px;
    border-radius: 5px;
    box-shadow: 10px 10px 12px #000000aa;
}
nav ul li:hover {
  color:#FFF;
  background: #c44040 radial-gradient(circle, transparent 1%, #c44040 1%) center/15000%;
  box-shadow: 0px 5px 12px #000000aa;
}
img {
  max-width:100%;

}
.logo {
    display: flex;
  align-self:flex-start;
  z-index:2;
    top: 5px;
    left: 30px;
    position: absolute;
}
.logo img {
    max-width: 70%;
}
.cover {
    background: url(https://images.unsplash.com/photo-1515185500307-65d052ffba10?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) center left;
  background-repeat:repeat;
    background-size: 100%;
  background-attachment:scroll;
    grid-column: 1/ span 12;
    grid-row: 1/ span 2;
}
.cta {
    grid-column: 2/span 10;
    grid-row: 2/ span 1;
    padding: 25px;
  margin-left:5px;
  margin-bottom:25px;
  margin-right:5px;
  border-radius:5px;
    align-items: flex-start;
    justify-content: flex-end;
    display: flex;
    flex-flow: column nowrap;
  color:black;
  background:#fff;
  box-shadow:10px 10px 12px #000000aa;
  z-index:3;
}
.button {
  padding:7px 10px;
  font-size:20px;
  border-radius:5px;
  background: #c44040aa;
    background-position: center;
  transition: background 0.8s;
  box-shadow:-10px 5px 12px #000000aa;
  color:black;
  text-transform:uppercase; 
}
.button:hover {
    background: #c44040 radial-gradient(circle, transparent 1%, #c44040 1%) center/15000%;
  box-shadow: 0px 5px 12px #000000aa;
}
.button:active, nav ul li:active {
  background-color: #FFF;
  background-size: 100%;
  transition: background 0s;
}
.left-bar {
    grid-column: 1/ span 12;
    grid-row: 5/ span 2;
    background: #c44040;
    justify-self: stretch;
    z-index: 2;
}
.left-bar div {
    padding: 10px;
    margin: 0 23px;
  color:#fff;
}
.left-bar h3 {
padding:15px; 
}
.left-bar p {
  color:#000;
  background:#fff;
  padding:15px;
  border-radius:5px;
  box-shadow: 10px -10px 12px #000000aa;
}
.content-main {
    grid-column: 1/ span 12;
    grid-row: 3/ span 2;
  background: url(https://images.unsplash.com/photo-1559864845-42b13e1b0ae2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) top left;
  background-repeat:repeat;
  background-attachment:scroll;
  background-size:100%;
  z-index:3;
}
.columns {
  display: flex;
  flex-flow:column wrap;
  padding:25px 0;
}
.columns div {
  margin: 10px 30px;
  padding:25px;
  background: #4494dd;
  border-radius:5px;
  box-shadow:10px 10px 12px #000000aa;
}
footer {
    grid-column: 1/ span 12;
    grid-row: 8/ span 2;
    background: #4494dd;
  display:flex;
  flex-flow:column wrap;
} 
footer div {
  padding: 25px 30px;
}
footer h3 {
    background: #fff;
    color: #000;
    padding: 2px 7px 1px 7px;
    border-radius: 5px;
    box-shadow: 10px 10px 12px #000000aa;
}

@media screen and (min-width:900px) {
 header {
grid-column: 1/ span 12;
    grid-row: 1/ span 1;
}
  nav{
    justify-content: flex-end;
  }
  
  .cta {
  grid-column:2/span 5;
  grid-row:2/ span 1;
    margin:25px;
  }
.left-bar {
    grid-column: 1/ span 4;
    grid-row: 3/ span 3;
}
  .cover {
    background-attachment:fixed;
  }
.content-main {
    grid-column: 5/ span 8;
    grid-row: 3/ span 3;
  background-attachment:fixed;
    z-index: 2;
}
.columns {
  flex-flow:row nowrap;
}
  .columns div {
    margin-right: 0;
}
.columns div:last-of-type {
    margin-right: 30px;
}
footer {
    grid-column: 1/ span 12;
    grid-row: 7/ span 2;
  flex-flow:row nowrap;
  align-items:flex-start;
  justify-content:flex-start;
}

footer div {
    padding: 25px;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}
footer div.low {
    flex-flow: row nowrap;
    justify-content: flex-end;
}
footer div.low h3 {
    transform: rotate(-90deg);
    align-self: flex-end;
}
}
@media screen and (min-width:1102px) {
  .cta {
    margin: 75px 25px;
  }
.left-bar {
  grid-column: 1/ span 2;
 justify-self:stretch;
}

.content-main {
    grid-column: 3/ span 10;
}
}
{
 const callTo = document.querySelector('.cta');
 const colOne = document.querySelector('.col-1');
 const colTwo = document.querySelector('.col-2');
 const colThree = document.querySelector('.col-3');
 const hidden = document.querySelector('.hide');
  
 //document width
 let docWidth = document.body.clientWidth || document.documentElement.clientWidth;

//blue box top positions
let boxOne = colOne.offsetTop;
let boxTwo = colTwo.offsetTop;
let boxThree = colThree.offsetTop;


 //animate call to action box
  function animate() {
    callTo.classList.add('call-reveal');
    callTo.style.margin = '25px 5px 25px 5px';
  }
 //animate .col-one when scroll to .col-one
function animateDos() {
 if (window.pageYOffset > boxOne) { 
      colOne.classList.add('reveal');
      colOne.style.opacity = 1;
    }   
  }
  //animate .col-two when scroll to .col-two
  function animateThree(){
    if (window.pageYOffset > boxTwo) {
      colTwo.classList.add('reveal');
      colTwo.style.opacity = 1;
    } 
  }
//animate .col-three when scroll to .col-three
  function animateFour(){
    if (window.pageYOffset > boxThree) {
      colThree.classList.add('reveal');
      colThree.style.opacity = 1;
  }
  }

 //animate blue column cards
function animateTwo(){
setTimeout( ()=>{
      colOne.classList.add('reveal');
      colOne.style.opacity = 1;
  }, 1500);
      setTimeout( ()=>{
      colTwo.classList.add('reveal');
      colTwo.style.opacity = 1;
  }, 3000);
    setTimeout( ()=>{
      colThree.classList.add('reveal');
      colThree.style.opacity = 1;
  }, 4500);
  }




//Trigger animation by window scroll event
window.onscroll = function() {animateScroll()};

//full animation function by document width for responsive design
  function animateScroll() {
   if (docWidth >= 900) {
     animate();
     animateTwo();
     hidden.style.opacity = 1;
   } else if (docWidth < 899) {
     animate();
     animateDos();
     animateThree();
     animateFour();
     hidden.style.opacity = 1;
   } else{
     console.log(`nothing happened`);
   }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.