<!-- Font Awesome Link -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="modal clearfix">
    <div class="modal-product">
      <div class="product">

        <!-- Slideshow container -->
        <div class="product-slideshow">

          <!-- Full-width images with number and caption text -->
          <div class="productSlides fade">
            <img src="https://github.com/EricGFigueroa/002-DailyUI-Gucci-Checkout/blob/master/img/gucci-bag-1.png?raw=true" style="width:100%">
          </div>

          <div class="productSlides fade">
            <img src="https://github.com/EricGFigueroa/002-DailyUI-Gucci-Checkout/blob/master/img/gucci-bag-2.png?raw=true" style="width:100%">
          </div>

          <div class="productSlides fade">
            <img src="https://github.com/EricGFigueroa/002-DailyUI-Gucci-Checkout/blob/master/img/gucci-bag-3.png?raw=true" style="width:100%">
          </div>

          <div class="productSlides fade">
            <img src="https://github.com/EricGFigueroa/002-DailyUI-Gucci-Checkout/blob/master/img/gucci-bag-4.png?raw=true" style="width:100%">
          </div>

          <div class="productSlides fade">
            <img src="https://github.com/EricGFigueroa/002-DailyUI-Gucci-Checkout/blob/master/img/gucci-bag-5.png?raw=true" style="width:100%">
          </div>

          <br>

          <!-- The dots/circles -->
          <div style="text-align:center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
            <span class="dot" onclick="currentSlide(4)"></span>
            <span class="dot" onclick="currentSlide(5)"></span>
          </div>

        </div>

        <h1 class="product-name">
          Gucci Tian GG<br>Supreme Backpack
        </h1>
        <p class="product-code-name">
          Style ‎428027 K0LCN 8685
        </p>
        <p class="product-price">
          $1,590
        </p>

      </div>

      <div class="round-shape"></div>
    </div>
    <div class="modal-info">
      <div class="info">
        <h2>Payment Information</h2>
        <form action="#">
          <ul class="form-list">
            <li class="form-list-row">
              <div class="user">
                <label for="#">Name</label><br>
                <i class="fas fa-user"></i></i><input type="text" required>
              </div>
            </li>
            <li class="form-list-row">
              <div class="number">
                <label for="#">Card Number</label><br>
                <i class="far fa-credit-card"></i><input type="text" required>
              </div>
            </li>
            <li class="form-list-row clearfix">
              <div class="date">
                <label for="#">Expiration Date</label><br>
                <input class="month" type="text" required placeholder="MM">
                <input class="year" type="text" required placeholder="YY">
              </div>
              <div class="cvc">
                <label for="#">CVC</label><i class="fas fa-question-circle"></i><br>
                <input type="text" required placeholder="123">
              </div>
            </li>
            <li class="form-list-row">
              <div class="checkbox">
                <label for="checkbox">
                  <input id="checkbox" type="checkbox">
                  <span>Remember My Information</span>
                </label>
              </div>
            </li>
          </ul>
          <button>Pay Now</button>
        </form>
      </div>
    </div>
  </div>
* {
  margin: 0;
  padding: 0;
  outline: none;
  text-decoration: none;
  list-style: none;
  box-sizing:border-box;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

body{
  font-family: poppins, arial, sans-serif;
  background-color: whitesmoke;
}

.modal{
  width: 96%;
  max-width: 1000px;
  height: 550px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  overflow: hidden;
  background-color: white;
  box-shadow: 5px 5px 30px rgba(0,0,0,.3);

  .modal-product{
    width: 40%;
    height: 100%;
    float: left;
    position: relative;

    .product{
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;

      .product-slideshow {
        max-width: 350px;
        margin: 0 auto;
        position: relative;

        .productSlides {
            display: none;
        }

        .dot {
          cursor: pointer;
          height: 10px;
          width: 10px;
          margin: 0 5px;
          position: relative;
          top: -36px;
          background-color: rgba(255,255,255,.5);
          border-radius: 50%;
          display: inline-block;
          transition: background-color 0.6s ease;
          box-shadow: 0 0 5px rgba(0,0,0,.3);

          &.active{
            background-color: rgba(255,255,255,1);
            box-shadow: 0 0 7px rgba(0,0,0,.6);
          }

          &:hover {
            background-color: rgba(255,255,255,.8);
          }

          /* Fading animation */
          .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
          }

          @-webkit-keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
          }

          @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
          }
        }
      }
      .product-name{
        color: #111;
        font-size: 1.7rem;
        font-weight: 300;
        line-height: 2rem;
        text-align: center;
        margin-top: -22px;
      }

      .product-code-name{
        font-size: .8rem;
        font-weight: 300;
        text-align: center;
        margin: 8px auto 5px;
      }

      .product-price{
        font-size: 1.5rem;
        font-weight: 300;
        letter-spacing: .18rem;
        text-align: center;
      }
    }

    .round-shape{
      width: 125%;
      height: 150%;
      position: absolute;
      top: 50%;
      left: 38%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: #cdb196;
      box-shadow: 0 0 25px rgba(0,0,0,.3);
      z-index: 1;
    }
  }
  .modal-info{
    width: 60%;
    height: 100%;
    float: right;
    position: relative;

    .info{
      width: 90%;
      height: 85%;
      position: absolute;
      top: 50%;
      left: 5%;
      transform: translate(0%, -50%);

      h2{
        font-size: 2.25rem;
        margin-left: 1rem;
      }

      form{
        .form-list{
          margin-top: 1.5rem;
          margin-left: 3.5rem;
          .form-list-row{
            margin: 1rem 0;

            label{
              font-size: 1rem;
            }

            input{
              width: 70%;
              font-size: 1rem;
              padding: .4rem 0;
              border: none;
              display: inline-block;
              border-bottom: solid 2px #999;
              background-color: transparent;
              transition: all .3s ease;
              &:focus{
                border-color: #cdb196;
              }
            }

            .user{
              .fa-user{
                color: #999;
                font-size: 1rem;
              }

              input{
                position: relative;
                left: -16px;
                padding-left: 30px;
              }
            }

            .number{

              .fa-credit-card{
                color: #999;
                font-size: 1rem;
              }

              input{
                position: relative;
                left: -20px;
                padding-left: 30px;
              }
            }

            .date{
              float: left;

              input{
                width: 60px;
                text-align: center;
              }
              .year{
                margin-left: 1.5rem;
              }
            }

            .cvc{
              float: left;
              margin-left: 6rem;
              text-align: center;

              .fa-question-circle{
                color: dodgerblue;
                display: inline-block;
                position: relative;
                left: .75rem;
              }

              input{
                width: 70px;
                text-align: center;
              }
            }

            .checkbox{
              margin-top: 2rem;
              input{
                width: auto;
              }

              span{
                font-size: .8rem;
              }
            }
          }
        }
        button{
          color: white;
          font-size: 1rem;
          margin-left: 1rem;
          padding: 1rem 2.5rem;
          position: absolute;
          bottom: 0;
          border: none;
          border-radius: 3px;
          background-color: #cdb196;
          box-shadow: 0 0 20px rgba(0,0,0,.25);
          transition: all .3s ease;

          &:hover{
            background-color: #b59779;
          }
        }
      }
    }
  }
}
View Compiled
var slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }
    // Thumbnail image controls
    function currentSlide(n) {
      showSlides(slideIndex = n);
    }
    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("productSlides");
      var dots = document.getElementsByClassName("dot");
      if (n > slides.length) {
        slideIndex = 1
      }
      if (n < 1) {
        slideIndex = slides.length
      }
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className += " active";
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.