Simply site

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div id="wrapper">
  <header>
<div id="header-wrapper">
    <h2>Muffin</h2>
  <p>Gotowanie na całego!</p>
</div>

</header>
<nav>
  <ul>
    <li>Przepisy</li>
    <li>Ranking</li>
    <li>Sklep</li>
    <li>Pomoc</li>
  </ul>
</nav>
<main>
<div class="col">
   <img src="http://rubytimes.pl/wp-content/uploads/2015/05/IMGP7328.jpg">
</div>
 <div class="col">
 <div id="text-wrapper">

 <p id="main-text" class="animated">
  Muffin to stronka, na której można poduczyć się tajników gotowania. Ciasta, babeczki, ciasta na słodko najlepsze u nas! Posiadamy też coś na słono tak jak spaghetti z domowym sosem, kurczaka w sosie BBQ i wiele więcej. Załóż konto już dziś i pisz swoje przepisy, a może trafisz na główną! Najlepsze konta z wypiekami będą brały udział w konkursie z nagrodami.
W sklepie są już koszulki „kocham gotować” i „jestem rozgotowana”. Kubki dojdą za tydzień… 


<a href="https://www.youtube.com/channel/UCuESGtDJVNTuwFCw8xvC3-A?">Subuj na Youtube</a>
<a href="https://pl-pl.facebook.com/">Polub na Facebooku</a>
<a href="https://https://developer.mozilla.org/css/gradient">Follow'uj na Instagramie</a> 
</p>
 
  <div id="labels">
    <span class="label animated">Loguj</span>
    <span class="label animated"></span>
    <span class="label animated">dolor</span>
  </div>
   </div>
  </div>
</main>
</div>

SCSS

}

}
header{
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(160,53,255,1) 100%); 
  padding:50px;
   box-shadow: 2px 5px 5px #333;
   position:relative;
   padding-top:0%;
   min-height:2vh;
   display:flex;
   align-items:flex-start;
}

h2{
  font-size:2em;
  position:relative;
}
nav{
  margin-top:-7px;
  position:relative;
  z-index:4;

  ul{
    display:flex;
    /* justify-content:space-around; */
  }

  li{
    display:block;
    text-align:center;
    padding:20px 0 10px 0;
   /*  margin: 0 10px 0 10px; */
    font-size:1.5em;
    color:#b380ff;
   background: linear-gradient(to bottom, rgba(242,236,246,1) 1%,rgba(211,164,249,1) 100%); 
   box-shadow: 1px 1px 10px #333;
   width:25%;
  }
  li:nth-child(4){
    box-shadow: 0 1px 5px #333;
  }
}
main{
  display:flex;
padding-top:10%;
  img{
    position:relative;
    margin-top:5%;
    transform:rotate(10deg);
    border: 10px solid white;
     max-width:90%;
     box-shadow: 1px 1px 5px #333;
  }


  .col{
text-align:right;
    width:50%;
    height:100%;
    position:relative;
  }

  #text-wrapper{
      background: linear-gradient(to bottom, rgba(242,236,246,1) 1%,rgba(211,164,249,1) 100%);;
   
  }
  #labels{
    min-height:calc(1.2em + 20px);
    font-size:1.5em;
    position:relative;
    margin:10px 0 10px 0;
          display:flex;
      align-items:center;
    &::before, &::after{
      position:absolute;
      top:0;
      left:0;
      content:'';
      width:100%;
       box-shadow: 1px 1px 5px #333;
      height:10px;
        z-index:10;
      background: linear-gradient(to bottom, rgba(172,118,247,1) 0%,rgba(222,185,247,1) 100%);;
    }
    &::after{
      top:auto;
      bottom:0;
    
    }
  }
  .label{
    background:linear-gradient(to bottom, rgba(139,49,249,1) 38%,rgba(119,216,210,1) 96%);
    padding:10px;
opacity:0;
  }
 #main-text{
   opacity:0;
   padding:30px;
   backgroung-color:radical-gradient(circle hsla(201,100%,67%,1) 0%,hsla(231,100%,67%,1)...

JavaScript

let counter = -1;
document.addEventListener('keyup', (e) => {
if(parseInt(e.keyCode) == 13){
if(counter === -1){
document.querySelector('#main-text').classList.add('fadeInRight');
}else{
document.querySelectorAll('.label')[counter].classList.add('fadeInRight');
}
counter++;
}
})