A Pen by Daniel Hinds-Bond

Thumbnail
This awesome code was written by 007design, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 007design ©
  • HTML
  • CSS
  • JavaScript
    <section class="progress-bar">
  <div class="prev-button"></div>
  <div class="step-button" id="step_button_1" data-step-button="1">1</div>
  <div class="step-button" id="step_button_2" data-step-button="2">2</div>
  <div class="step-button" id="step_button_3" data-step-button="3">3</div>
  <div class="step-button" id="step_button_4" data-step-button="4">4</div>
  <div class="step-button" id="step_button_5" data-step-button="5">5</div>
  <div class="next-button"></div>
</section>

<section class="info-form">
  <form action="" class="form-step" id="form_step_one"></form>
</section>

/*Downloaded from https://www.codeseek.co/007design/a-pen-by-daniel-hinds-bond-gKmdbQ */
    section.progress-bar {
  position: fixed;
  top: 70px;
  height: 70px;
  width: 100%;
  background-color: white;
  text-align: center;
  z-index: 1;
  padding-top: 20px;

  .prev-button {
    display: inline-block;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    background-color: blue;
    vertical-align: middle;
    cursor: pointer;
    margin: 0 5px;
  }
  .next-button {
    display: inline-block;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    background-color: blue;
    vertical-align: middle;
    cursor: pointer;
    margin: 0 5px;
  }

  .step-button {
    display: inline-block;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    background-color: red;
    vertical-align: middle;
    color: white;
    padding-top: 6px;
    cursor: pointer;
    margin: 0 2px;
  }
}


/*Downloaded from https://www.codeseek.co/007design/a-pen-by-daniel-hinds-bond-gKmdbQ */
    

Comments