Creative Sign Up page

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<section class="section">
  <div class="container">
    <div class="row g-0 bg-white align-items-center">
      <div class="col-lg-6">
        <div class="auth-box">
            <h1 class="display-4 fw-bold mt-5 pt-2">Get started</h1>
            <p class="text-muted">Already have an account? <a href="" class="text-dark"><u>Log In</u></a></p><form class="custom-form mt-5 ">
              <div class="mb-3">
                <label class="form-label text-muted">Your name</label>
                <input type="text" class="form-control" id="name" placeholder="Name">
            </div>
              <div class="mb-3">
                  <label class="form-label text-muted">Your email</label>
                  <input type="text" class="form-control" id="email" placeholder="name@email.com">
              </div>
              <div class="mb-3">
                  <label class="form-label text-muted">Phone number</label>
                  <input type="text" class="form-control" id="phone" placeholder="(545) 256-4856">
              </div>

              <div class="row mb-3 mt-5">
                <div class="col-12 mt-2">
                    <button class="btn btn-dark w-100" type="submit">Sign up</button>
                </div>
            </div>

            <p class="text-muted mt-4 pt-2 mb-0">By signing up You agree to our <a href="" class="text-muted"><u>Privacy Policy</u></a> and <a href="" class="text-muted"><u>Terms of Service</u></a></p>
          </form>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="bg-login d-none d-lg-block">
          <img src="images/bg-login.png" class="img-fluid" alt="">
            <div class="auth-contain">
            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
              <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
              </div>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <div class="text-center text-white my-4 p-4">
                    <h3>Learn and Practice</h3>
                      <p class="text-white-50 f-20 mt-3">No matter what experience you have.We will help you start coding in minutes.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="text-center text-white my-4 p-4">
                    <h3>Learn and Practice</h3>
                    <p class="text-white-50 f-20 mt-3">No matter what experience you have.We will help you start coding in minutes.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="text-center text-white my-4 p-4">
                    <h3>Learn and Practice</h3>
                    <p class="text-white-50 f-20 mt-3">No matter what experience you have.We will help you start coding in minutes.</p>
                  </div>
                </div>
              </div>
            </div>
            </div>
        </div>

      </div>
    </div>
  </div>
</section>

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
body {
  font-family: 'Nunito', sans-serif;
  line-height: 26px;
  color: #2d2c2c;
  font-weight: 400;
  background-color: #f0e9dd;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

.btn,
.btn:focus,
button,
button:focus {
  outline: none !important;
}

a {
  text-decoration: none !important;
  outline: none;
}

p {
  font-size: 16px;
}

.section {
  padding-bottom: 80px;
  padding-top: 80px;
  position: relative;
}

.row > * {
  position: relative;
}

.btn {
  padding: 0.7rem 1.8rem;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.5s;
  border-radius: 0px;
}

.btn-dark {
  background: #2d2c2c;
  border-color: #2d2c2c !important;
}

.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .btn-dark.focus, .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark .open > .dropdown-toggle.btn-primary {
  background: #232222;
  border-color: #232222;
}

.btn:focus {
  box-shadow: none;
}

.text-muted {
  color: #a1a1a1 !important;
}

.auth-box {
  padding: 50px 140px;
}

.custom-form .form-control {
  border-width: 0 0 1px 0;
  border-radius: 0;
  height: 48px;
  padding: 0;
  font-size: 18px;
}

.custom-form .form-control:focus {
  box-shadow: none;
  border-color: #2d2c2c;
}

.auth-contain {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 500px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.carousel-indicators {
  bottom: -100px;
}

@media (max-width: 1024px) {
  .bg-login img {
    height: 100vh;
  }
  .auth-box {
    padding: 40px 60px;
  }
}

<!-- Bootstrap CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<!-- CUSTOM JS -->
<script>
  const counter = document.querySelectorAll('.counter_value');
    const speed = 250; // The lower the slower
    counter.forEach(counter_value => {
      const updateCount = () => {
        const target = +counter_value.getAttribute('data-target');
        const count = +counter_value.innerText;
        const inc = target / speed;
        // Check if target is reached
        if (count < target) {
                // Add inc to count and output in counter_value
          counter_value.innerText = (count + inc).toFixed(0);
          // Call function every ms
          setTimeout(updateCount, 1);
        } else {
          counter_value.innerText = target;
        }
      };
      updateCount();
    });
</script>