<div class="practice" id="top">
    <div class="practice-logo bg-light d-flex justify-content-center flex-column border-bottom">
        <div class="text-center">
            <i class="fa fa-camera fa-2x"></i>
        </div>
    </div>
    <div class="practice-nav bg-light d-flex justify-content-center flex-column border-bottom">
        <nav class="navbar navbar-expand-md navbar-light bg-light">
            <div></div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Categories</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Products</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0" action="#">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
    </div>
    <div class="practice-menu bg-light d-flex justify-content-center flex-column">
        <div class="text-center">
            <a href="#" class="text-dark">
                <i class="fa fa-bars fa-2x"></i>
            </a>
        </div>
    </div>
    <div class="practice-scoll bg-light d-flex justify-content-center flex-column">
        <div class="text-center">
            <a href="#" class="text-dark js-scrollintoview" data-target="#main">
                scroll
            </a>
        </div>
    </div>
    <div class="practice-carousel bg-white">
        <div id="my-carousel" class="practice-carousel-body carousel slide carousel-none" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="d-flex h-100">
                        <div class="col-12 col-lg-4 d-flex flex-column justify-content-between p-5 practice-details">
                            <div class="slide-left"><strong>info 1</strong></div>
                            <div>
                                <h2 class="slide-top">Chairs</h2>
                                <p class="slide-right">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias fuga nesciunt
                                    optio similique. Autem dolor doloremque ex expedita explicabo fugiat magni
                                    minima nisi provident, quam repellat reprehenderit veritatis voluptate.
                                </p>
                            </div>
                            <div class="slide-left">
                                <a href="#" class="btn btn-outline-primary">
                                    Button
                                    <i class="fa fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col practice-image p-0">
                            <img src="https://images.unsplash.com/photo-1562660227-ff3feb4b09e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&h=800&q=80" class="img-cover">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="d-flex h-100">
                        <div class="col-12 col-lg-4 d-flex flex-column justify-content-between p-5 practice-details">
                            <div class="slide-left"><strong>info 2</strong></div>
                            <div>
                                <h2 class="slide-top">Wooden things</h2>
                                <p class="slide-right">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid cumque deleniti,
                                    distinctio dolore ducimus earum error eum fuga in incidunt labore laudantium
                                    molestias, nostrum officiis rem repellendus, sint velit?
                                </p>
                            </div>
                            <div class="slide-left">
                                <a href="#" class="btn btn-outline-primary">
                                    Button
                                    <i class="fa fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col practice-image p-0">
                            <img src="https://images.unsplash.com/photo-1562683855-441c9f1289d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&h=800&q=80" class="img-cover">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="d-flex h-100">
                        <div class="col-12 col-lg-4 d-flex flex-column justify-content-between p-5 practice-details">
                            <div class="slide-left"><strong>info 3</strong></div>
                            <div>
                                <h2 class="slide-top">Black muse</h2>
                                <p class="slide-right">
                                    Lorem ipsum dolor sit amet.
                                </p>
                            </div>
                            <div class="slide-left">
                                <a href="#" class="btn btn-outline-primary">
                                    Button
                                    <i class="fa fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col practice-image p-0">
                            <img src="https://images.unsplash.com/photo-1562685886-21638fb7a3f7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&h=800&q=80" class="img-cover">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="practice-footer bg-dark d-flex justify-content-center flex-column">
        <div class="px-5">
            <div class="row">
                <div class="col-3">
                    <a href="#" data-target="#my-carousel" data-slide-to="0" class="active">
                        <i class="fa fa-circle"></i>
                    </a>
                    <a href="#" data-target="#my-carousel" data-slide-to="1">
                        <i class="fa fa-circle"></i>
                    </a>
                    <a href="#" data-target="#my-carousel" data-slide-to="2">
                        <i class="fa fa-circle"></i>
                    </a>
                </div>
                <div class="col text-light">
                    <a href="#my-carousel" role="button" data-slide="prev">
                        prev
                    </a>
                    /
                    <a href="#my-carousel" role="button" data-slide="next">
                        next
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="container py-5" id="main">
    <h3>Demo page</h3>
    <p class="lead">
        This is a demo to make awesome animations. Use as you like please. I just added a grid and use the carousel from
        bootstrap.
    </p>
    <br>
    <h5>Some images used:</h5>
    <div>
        Photo by
        <a href="https://unsplash.com/@triconautes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
            Les Triconautes</a> on
        <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
    </div>
    <div>
        Photo by
        <a href="https://unsplash.com/@benkleaphoto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
            Ben Klea</a> on
        <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
    </div>
    <div>
        Photo by
        <a href="https://unsplash.com/@helloimnik?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
            Hello I'm Nik 🇬🇧</a> on
        <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
    </div>
    <br>
    <h5>Inspiration:</h5>
    <div>
        <a href="https://dribbble.com/shots/6721500--45-2-Shots-for-Practice">#45.2 Shots for Practice</a>
    </div>
  <div class="py-5">
        <a href="#" class="js-scrollintoview" data-target="#top">back to top</a>
    </div>
    
    <div class="py-5"><br></div>
    <div class="py-5"><br></div>
    <div class="py-5"><br></div>
    <div class="py-5"><br></div>
    <div class="py-5"><br></div>
</div>

$light: #f8f9fa;
$dark: #343a40 ;
$carousel-transition-duration: .6s;

.practice {
  display: grid;
  max-width: 100vw;
  min-height: 100vh;
  grid-template-columns: 70px auto;
  grid-template-rows: min-content auto 100px;
  @media (min-width: 992px) {
    grid-template-columns: 100px auto;
    grid-template-rows: 100px auto 100px;
  }

  &-logo {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  &-nav {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  &-menu {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  &-scroll {
    grid-column: 1/2;
    grid-row: 3/4;
  }

  &-carousel {
    grid-column: 2/3;
    grid-row: 2/3;
    position: relative;

    &-body {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;

      .carousel-inner {
        height: 100%;
      }

      .carousel-item {
        height: 100%;
      }
    }
  }

  &-footer {
    position: relative;
    grid-column: 2/3;
    grid-row: 3/4;
  }

  &-image {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    @media (min-width: 992px) {
      position: relative;
    }
  }

  &-details {
    position: relative;
    z-index: 20;
    text-shadow: 0 0 2px $dark;
    color: $light;
    background: rgba(0, 0, 0, .5);
    @media (min-width: 992px) {
      position: relative;
      background: none;
      text-shadow: none;
      color: $dark;
    }
  }
}

.img-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.active {
  .img-cover {
    animation-name: scale;
    animation-duration: 6s;
    transform: scale(1.1);
  }
}

.slide-left {
  transition: all .6s;
  opacity: 0;
  transform: translateX(-40px);
}

.slide-top {
  transition: all .6s;
  opacity: 0;
  transform: translateY(-40px);
}

.slide-right {
  transition: all .6s;
  opacity: 0;
  transform: translateX(40px);
}

.active {
  .slide-left,
  .slide-top,
  .slide-right {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.carousel-none {
  .carousel-item {
    transform: none;
  }
}

.carousel-item-left {
  .img-cover {
    animation-name: slide-left;
    animation-duration: $carousel-transition-duration;
  }

  &.active {
    .img-cover {
      opacity: 1;
      animation-name: slide-out-left;
    }
  }
}

.carousel-item-right {
  .img-cover {
    animation-name: slide-right;
    animation-duration: $carousel-transition-duration;
  }

  &.active {
    .img-cover {
      opacity: 1;
      animation-name: slide-out-right;
    }
  }
}

@-webkit-keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes slide-left {
  0% {
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 100% 50%;
  }
}

@-webkit-keyframes slide-out-left {
  0% {
    transform: scaleX(1.1);
    transform-origin: 0 50%;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
}

@-webkit-keyframes slide-right {
  0% {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
}

@-webkit-keyframes slide-out-right {
  0% {
    transform: scaleX(1.1);
    transform-origin: 100% 50%;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
}

document.addEventListener('click', (evt) => {
  const { classList, dataset } = evt.target;
  if (!classList.contains('js-scrollintoview')) {
    return;
  }
  if (!dataset.target) {
    return;
  }

  const elm = document.querySelector(dataset.target);
  if (!elm) {
    return;
  }

  evt.preventDefault();
  elm.scrollIntoView({
    behavior: 'smooth',
    block: 'start',
    inline: 'center',
  });
});