.heading
  h1 Logo Slider Animation
  .me
  a(href="https://github.com/cmdeveloped" target="_blank")
    i(class='fab fa-github')
  a(href="https://twitter.com/collinscode_" target="_blank")
    i(class='fab fa-twitter')
  a(href="https://codepen.io/collinscode" target="_blank")
    i(class='fab fa-codepen')
  a(href="https://linkedin.com/in/cmdeveloped" target="_blank")
    i(class='fab fa-linkedin')

.container
  .left
    .logo
      h1.brand collins.
      ul.pages
        li#code.page.active code
        li#life.page life
        li#blog.page blog
        li#contact.page contact    
  .right
    .nav
      a(data-logo='#code')
        i(class='fal fa-code-branch')
      a(data-logo='#life')
        i(class='fal fa-male')
      a(data-logo='#blog')
        i(class='fal fa-browser')
      a(data-logo='#contact')
        i(class='fal fa-at')
View Compiled
=bg($a, $b)
  background-size: $a
  background-position: $b
  background-repeat: no-repeat
  
=gradient($a, $b, $c)
  background: $b
  background: linear-gradient($a, $b, $c)
  
=flex($a, $b)
  display: flex
  align-items: $a
  justify-content: $b
  
$color1: #485563
$color2: #29323c

*
  ::-webkit-scrollbar
    display: none

html
  min-height: 100vh
  +gradient(to right, $color1, $color2)
  +flex(center, center)
  body
    font-family: 'Roboto', sans-serif
    +flex(center, center)
    flex-direction: column
    height: 100%
    width: 100%
    .heading
      text-align: center
      color: white
      margin-bottom: 2rem
      p
        margin: 0
      a
        color: #fff
        display: inline-block
        .fab
          margin-right: 0.5rem
          font-size: 1rem
          padding: 0.5rem
          margin-top: 1rem
    
.container
  display: flex
  flex-direction: column
  min-width: 75%
  box-shadow: 0 12px 1rem rgba(0,0,0,0.1)
  transition: 1s
  .left
    padding: 6rem 0
    +flex(center, center)
    width: 100%
    .logo
      +flex(flex-start, center)
      color: white
      &:before
        content: '{{'
        font-size: 4.5rem
        line-height: 3rem
        position: relative
        top: 1rem
        right: 0.75rem
      &:after
        content: '}}'
        font-size: 4.5rem
        line-height: 3rem
        position: relative
        top: 1rem
        left: 0.75rem
        transition: 2s
      .brand
        padding: 1rem 0
        font-size: 2.5rem
        line-height: 3rem
        margin: 0
      .pages
        list-style: none
        padding: 0
        margin: 0
        height: 4rem
        width: auto
        position: relative
        overflow-y: scroll
        pointer-events: none
        .page
          font-size: 2.5rem
          line-height: 3rem
          padding: 1rem 0
          font-weight: 100
          max-width: 0
          transition: all 1s
        .page.active
          max-width: 10rem
  .right
    background-color: white
    flex-shrink: 0
    .nav
      +flex(center, center)
      padding: 1rem
      a
        display: inline-block
        margin: auto
        width: 100%
        text-align: center
        font-size: 1.5rem
        color: $color1
        opacity: 0.5
        cursor: pointer
        transition: 0.25s
        &:hover
          opacity: 1
$('.nav a').click(function() {
  $page = $(this).attr('data-logo');
  $first = $('.page:first-child').position().top;
  $position = $($page).position().top;
  $scroll = $position - $first;
  
  $('.pages').stop().animate({scrollTop: $scroll}, 1000);
  $($page).siblings('.page').removeClass('active');
  $($page).addClass('active');
});

$('.pages').on('mousewheel', function(e) {
  e.preventDefault();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js