Landing Page for BCIT Projects

Landing Page for BCIT Projects

Landing page leads to all of my BCIT projects .

PLANNING PROCESS

Made it as simple landing page so that viewer can easily find projects they want to see, with an accent of intro animation.

LANGUAGE | TOOLS

 

FEATURED

Intro CSS animation

CSS


.overlay-text-big span{
  opacity: 0;
  transform: translate(0, -100px) rotate(360deg) scale(0);
  animation:animate 5s forwards;
}

.overlay-text-big span{
  display:inline-block;
}

.overlay-text-big span:nth-of-type(2){
  animation-delay: .1s;
}
.overlay-text-big span:nth-of-type(3){
  animation-delay: .2s;
}
.overlay-text-big span:nth-of-type(4){
  animation-delay: .3s;
}
.overlay-text-big span:nth-of-type(5){
  animation-delay: .4s;
}
.overlay-text-big span:nth-of-type(6){
  animation-delay: .5s;
}

@keyframes animate{
  30%{
    transform: translate(0, -50px) rotate(180deg) scale(1);
  }
  60%{
    transform: translate(0, 20px) rotate(0deg) scale(.8);
  }
  100%{
    transform: translate(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

 

 

SCREENSHOTS

 

Follow Me