<html>

<head>
  <title>SignUp</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
  <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="signUp.css">

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
  <script type="text/javascript" src="signUp.js"></script>
</head>

<body style="background-color: #300032;">
  <div class="ui centered  grid container">

    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>


    <div class="ui text container">


      <div class="three ui  buttons center aligned grid container" style="margin:20px;">


        <div class=" ui  big basic violet button" id="accountS">

          <div class="content " style="font-size:12px;color:white;">ACCOUNT SETUP</div>
        </div>


        <button class=" ui  big disabled blue basic button" id="socialP">
             <div class="content" style="font-size:12px;color:white;">SOCIAL PROFILE</div>
             </button>


        <button class=" disabled ui big orange basic button" id="details">

             <div class="content" style="font-size:12px;color:white;">PERSONAL DETAILS</div>
             </button>
      </div>


      <div class="row"></div>
      <div class="row"></div>


      <div id="account">


        <div class="ui center aligned  segment container " id="signUpBox" style="background-color: #F1F0FF;border-radius:5px;">


          <div class="ui centered header">
            <h1 class="font" style="color:#300032;">Create your account</h1>
          </div>

          <form class="ui form">
            <div class="field">
              <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" placeholder="Email-id">
              </div>
            </div>

            <div class="field">
              <div class="ui left icon input">
                <i class="lock icon"></i>
                <input type="password" placeholder="Password">
              </div>
            </div>

            <div class="field">
              <div class="ui left icon input">
                <i class="lock icon"></i>
                <input type="password" placeholder="Confirm Password">
              </div>
            </div>

            <div class="one ui buttons">
              <button class="ui  inverted violet  medium button next1 ">Next</button>
            </div>

          </form>


        </div>

      </div>


      <div id="social">


        <div class="ui center aligned  segment container " id="signUpBox" style="background-color: #F1F0FF;border-radius:5px;">


          <div class="ui centered header">
            <h1 class="font" style="color:rgb(50,153,153);">Social Profile</h1>
          </div>

          <form class="ui form">
            <div class="field">
              <div class="ui left icon input">
                <i class="twitter icon"></i>
                <input type="text" placeholder="twitter">
              </div>
            </div>

            <div class="field">
              <div class="ui left icon input">
                <i class="facebook icon"></i>
                <input type="text" placeholder="facebook">
              </div>
            </div>

            <div class="field">
              <div class="ui left icon input">
                <i class="github icon"></i>
                <input type="text" placeholder="github">
              </div>
            </div>

            <div class="two ui buttons">
              <button class="ui  inverted violet  medium button prev1">Previous</button>
              <button class="ui  inverted violet  medium button next2">Next</button>
            </div>

          </form>


        </div>

      </div>


      <div id="personal">


        <div class="ui center aligned  segment container " id="signUpBox" style="background-color: #F1F0FF;border-radius:5px;">


          <div class="ui centered header">
            <h1 class="font" style="color:orange;">Personal Details</h1>
          </div>

          <form class="ui form">
            <div class="field">


              <input type="text" placeholder="First Name">

            </div>

            <div class="field">


              <input type="text" placeholder="Last Name">

            </div>

            <div class="field">


              <input type="text" placeholder="Phone">

            </div>
            <div class="field">


              <input type="text" placeholder="Skills">

            </div>

            <div class="two ui buttons">
              <button class="ui  inverted violet  medium button prev2">Previous</button>
              <button class="ui  inverted violet  medium button submit">Submit</button>
            </div>

          </form>


        </div>

      </div>


    </div>
  </div>


</body>

</html>
.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 500ms !important;
}

.font{
    font-family: 'Lobster', cursive;
    font-weight:300;
    font-size:40px;
}
#social{
    display: none;
    padding:20px;
}

#personal{
    display:none;
    padding:20px;
}

#account{
    display: block;
    padding:20px;
}

.text.container{

    width:40%;

}


#logo{
    border:2px solid white;
    border-radius: 10px;
    color:white;
    padding:15px;
}
#logo:hover{
    box-shadow: 0px 0px 5px 5px white;
}





$(document).ready(function() {

  var ct = 0;

  $('.next1').one('click', function(e) {

    e.preventDefault();

    $('#account').animate('slow', function() {

      if (ct > 0) {
        $('#account').removeClass('transition visible');
        $('#account').addClass('transition hidden');

      }
      $('#account').css('display', 'none');

      $('#accountS').addClass('disabled');
      $('#socialP').removeClass('disabled');
      $("#social").transition('fly right');
      $('body').css('background-color', '#06000a');
      $('#social button').removeClass('inverted violet');
      $('#social button').addClass('inverted blue');
      ct++;

    });

  });

  $('.prev1').one('click', function(e) {

    e.preventDefault();
    $('#accountS').removeClass('disabled');
    $('#socialP').addClass('disabled');

    $('#social').animate('slow', function() {

      $('body').css('background-color', '#300032');
      $('#social').transition('hide');
      $("#account").transition('fly right');

    });

  });

  $('.next2').one('click', function(m) {

    m.preventDefault();

    $('#socialP').addClass('disabled');
    $('#details').removeClass('disabled');

    $('#social').animate('slow', function() {

      $('#personal button').removeClass("inverted violet");
      $('#personal button').addClass("inverted orange");
      $('body').css('background-color', '#251605');
      $('#social').transition('hide');

      $('#personal').transition('fly right');
    });

  });

  $('.prev2').one('click', function(m) {

    m.preventDefault();
    $('#details').addClass('disabled');
    $('#socialP').removeClass('disabled');

    $('#personal').animate('slow', function() {

      $('body').css('background-color', '#06000a');
      $('#personal').transition('hide');

      $('#social').transition('fly right');
    });

  });

  $('.submit').one('click', function(p) {

    p.preventDefault();

    $('#personal').stop();
  });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.