KS Portfolio.<div class="slideNav-container">
  <ul>
    <li class="one"><a href="#about">About</a></li>
    <li class="two"><a href="#design">Design</a></li>
    <li class="three"><a href="#web-dev">Web Dev</a></li>
    <hr />
  </ul>
</div>

<style>
.slideNav-container {
  margin-inline: auto;
  max-width: 1000px;



  ul li {
    display: inline;
    text-align: center;
  }

  a {
    display: inline-block;
    width: calc(100% / 3.5);
    margin: 0;
    text-decoration: none;
    color: #333;
  }

  .two:hover~hr {
    margin-left: calc(100% / 3.5);
  }

  .three:hover~hr {
    margin-left: calc(100% / 3.5 * 2);
  }


  hr {
    height: .25rem;
    width: calc(100% / 3.5);
    margin: 0;
    background: tomato;
    border: none;
    transition: .3s ease-in-out;
  }
}
</style>


<main>

  <style>
  .home-slides,
  .swiper-slide {
    height: inherit;
  }

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

  .banner {
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: #fff;
  }

  .swiper-pagination-bullet-active {
    background: #fff;
  }
  </style>
  <section class="banner">
    <div class="swiper home-slides">
      <div class="swiper-wrapper">
                <div class="swiper-slide">
          <h3>About Me</h3>
          <div class="content-container">
            <p>Hello</p>
          </div>
        </div>
                <div class="swiper-slide">
          <h3>Works</h3>
          <div class="content-container">
            <p>World</p>
          </div>
        </div>
        
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </section>

</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
  if (typeof Swiper !== 'undefined') {
    const homeSlides = new Swiper('.home-slides', {
      loop: true,
      autoplay: true,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }
});
</script>