<link rel="stylesheet" href="../dist/css/forms.css">

          <form class="form-stepper">
            <!-- barra de progresso  -->
            <div class="progressbar">
                <div class="progress" id="progress"></div>

                <div class="progress-step progress-step-active"></div>
                <div class="progress-step"></div>
                <div class="progress-step"></div>
                <div class="progress-step"></div>
            </div>

            <!-- formulários -->
            <div class="form-step form-step-active">
                <div class="mb-3">
                    <label for="exampleInputEmailName" class="form-label">Nome</label>
                    <input type="text" class="form-control" id="exampleInputEmailName">
                </div>
                <div class="mb-3">
                    <label for="exampleLastName" class="form-label">Sobrenome</label>
                    <input type="text" class="form-control" id="exampleLastName">
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
                <div class="btn-form-group">
                    <a href="#" class="btn btn-next">Continuar</a>
                </div>
            </div>

            <div class="form-step">
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Confirm Email</label>
                    <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
                <div class="btn-form-group">
                    <a href="#" class="btn btn-prev">Voltar</a>
                    <a href="#" class="btn btn-next">Continuar</a>
                </div>
            </div>

            <div class="form-step">
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Phone</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                  </div>
                  <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Nascimento</label>
                    <input type="password" class="form-control" id="exampleInputPassword1">
                  </div>
                  <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Check me out</label>
                  </div>
                  <div class="btn-form-group">
                    <a href="#" class="btn btn-prev">Voltar</a>
                    <a href="#" class="btn btn-next">Continuar</a>
                </div>
            </div>

            <div class="form-step">
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Senha</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                  </div>
                  <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Confirmação de senha</label>
                    <input type="password" class="form-control" id="exampleInputPassword1">
                  </div>
                  <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Check me out</label>
                  </div>
                  <div class="btn-form-group">
                    <a href="#" class="btn btn-prev">Voltar</a>
                    <button class="btn btn-form-submit" type="submit">Enviar</button>
                </div>
            </div>

          </form>
          <script src="../dist/js/form-stepper.js"></script>