Untitled

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ />
<title></title>

<link rel=”stylesheet” type=”text/css” href=”css/style.css” media=”all” />

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js”></script>
<script type=”text/javascript” src=”js/jquery.inputfocus-0.9.min.js”></script>
<script type=”text/javascript” src=”js/jquery.main.js”></script>
</head>
<body>

<div id=”container”>
<form action=”#” method=”post”>

<!– #first_step –>
<div id=”first_step”>
<h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

<div class=”form”>
<input type=”text” name=”username” id=”username” value=”username” />
<label for=”username”>At least 4 characters. Uppercase letters, lowercase letters and numbers only.</label>

<input type=”password” name=”password” id=”password” value=”password” />
<label for=”password”>At least 4 characters. Use a mix of upper and lowercase for a strong password.</label>

<input type=”password” name=”cpassword” id=”cpassword” value=”password” />
<label for=”cpassword”>If your passwords aren’t equal, you won’t be able to continue with signup.</label>
</div> <!– clearfix –><div class=”clear”></div><!– /clearfix –>
<input class=”submit” type=”submit” name=”submit_first” id=”submit_first” value=”” />
</div> <!– clearfix –><div class=”clear”></div><!– /clearfix –>

<!– #second_step –>
<div id=”second_step”>
<h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

<div class=”form”>
<input type=”text” name=”firstname” id=”firstname” value=”first name” />
<label for=”firstname”>Your First Name. </label>
<input type=”text” name=”lastname” id=”lastname” value=”last name” />
<label for=”lastname”>Your Last Name. </label>
<input type=”text” name=”email” id=”email” value=”email address” />
<label for=”email”>Your email address. We send important administration notices to this address. </label>
</div> <!– clearfix –><div class=”clear”></div><!– /clearfix –>
<input class=”submit” type=”submit” name=”submit_second” id=”submit_second” value=”” />
</div> <!– clearfix –><div class=”clear”></div><!– /clearfix –>

<!– #third_step –>
<div id=”third_step”>
<h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

<div class=”form”>
<select id=”age” name=”age”>
<option> 0 – 17</option>
<option>18 – 25</option>
<option>26 – 40</option>
<option>40+</option>
</select>
<label for=”age”>Your age range. </label> <!– clearfix –><div class=”clear”></div><!– /clearfix –>

<select id=”gender” name=”gender”>
<option>Male</option>
<option>Female</option>
</select>
<label for=”gender”>Your Gender. </label> <!– clearfix –><div class=”clear”></div><!– /clearfix –>

<select id=”country” name=”country”>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Serbia</option>
<option>Italy</option>
</select>
<label for=”country”>Your country. </label> <!– clearfix –><div class=”clear”></div><!– /clearfix –>

</div> <!– clearfix –><div class=”clear”></div><!– /clearfix –>
<input class=”submit” type=”submit” name=”submit_third” id=”submit_third” value=”” />

</div> <!– clearfix –><div class=”clear”></div><!– /clearfix –>

<!– #fourth_step –>
<div id=”fourth_step”>
<h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

<div class=”form”>
<h2>Summary</h2>

<table>
<tr><td>Username</td><td></td></tr>
<tr><td>Password</td><td></td></tr>
<tr><td>Email</td><td></td></tr>
<tr><td>Name</td><td></td></tr>
<tr><td>Age</td><td></td></tr>
<tr><td>Gender</td><td></td></tr>
<tr><td>Country</td><td></td></tr>
</table>
</div> <!– clearfix –><div class=”clear”></div><!– /clearfix –>
<input class=”send submit” type=”submit” name=”submit_fourth” id=”submit_fourth” value=”” />
</div>

</form>
</div>
<div id=”progress_bar”>
<div id=”progress”></div>
<div id=”progress_text”>0% Complete</div>
</div>

</body>
</html>
<script>$(function(){
//original field values
var field_values = {
//id : value
‘username’ : ‘username’,
‘password’ : ‘password’,
‘cpassword’ : ‘password’,
‘firstname’ : ‘first name’,
‘lastname’ : ‘last name’,
’email’ : ’email address’
};

//inputfocus
$(‘input#username’).inputfocus({ value: field_values[‘username’] });
$(‘input#password’).inputfocus({ value: field_values[‘password’] });
$(‘input#cpassword’).inputfocus({ value: field_values[‘cpassword’] });
$(‘input#lastname’).inputfocus({ value: field_values[‘lastname’] });
$(‘input#firstname’).inputfocus({ value: field_values[‘firstname’] });
$(‘input#email’).inputfocus({ value: field_values[’email’] });

//reset progress bar
$(‘#progress’).css(‘width’,’0′);
$(‘#progress_text’).html(‘0% Complete’);

//first_step
$(‘form’).submit(function(){ return false; });
$(‘#submit_first’).click(function(){
//remove classes
$(‘#first_step input’).removeClass(‘error’).removeClass(‘valid’);

//ckeck if inputs aren’t empty
var fields = $(‘#first_step input[type=text], #first_step input[type=password]’);
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<4 || value==field_values[$(this).attr(‘id’)] ) {
$(this).addClass(‘error’);
$(this).effect(“shake”, { times:3 }, 50);

error++;
} else {
$(this).addClass(‘valid’);
}
});

if(!error) {
if( $(‘#password’).val() != $(‘#cpassword’).val() ) {
$(‘#first_step input[type=password]’).each(function(){
$(this).removeClass(‘valid’).addClass(‘error’);
$(this).effect(“shake”, { times:3 }, 50);
});

return false;
} else {
//update progress bar
$(‘#progress_text’).html(‘33% Complete’);
$(‘#progress’).css(‘width’,’113px’);

//slide steps
$(‘#first_step’).slideUp();
$(‘#second_step’).slideDown();
}
} else return false;
});

$(‘#submit_second’).click(function(){
//remove classes
$(‘#second_step input’).removeClass(‘error’).removeClass(‘valid’);

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields = $(‘#second_step input[type=text]’);
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr(‘id’)] || ( $(this).attr(‘id’)==’email’ && !emailPattern.test(value) ) ) {
$(this).addClass(‘error’);
$(this).effect(“shake”, { times:3 }, 50);

error++;
} else {
$(this).addClass(‘valid’);
}
});

if(!error) {
//update progress bar
$(‘#progress_text’).html(‘66% Complete’);
$(‘#progress’).css(‘width’,’226px’);

//slide steps
$(‘#second_step’).slideUp();
$(‘#third_step’).slideDown();
} else return false;

});

$(‘#submit_third’).click(function(){
//update progress bar
$(‘#progress_text’).html(‘100% Complete’);
$(‘#progress’).css(‘width’,’339px’);

//prepare the fourth step
var fields = new Array(
$(‘#username’).val(),
$(‘#password’).val(),
$(‘#email’).val(),
$(‘#firstname’).val() + ‘ ‘ + $(‘#lastname’).val(),
$(‘#age’).val(),
$(‘#gender’).val(),
$(‘#country’).val()
);
var tr = $(‘#fourth_step tr’);
tr.each(function(){
//alert( fields[$(this).index()] )
$(this).children(‘td:nth-child(2)’).html(fields[$(this).index()]);
});

//slide steps
$(‘#third_step’).slideUp();
$(‘#fourth_step’).slideDown();
});

$(‘#submit_fourth’).click(function(){
//send information to server
alert(‘Data sent’);
});

});</script>
<script>
$.fn.inputfocus=function(params){params=$.extend({focus_class:”focus”,value:””},params);this.each(function(){$(this).focus(function(){$(this).addClass(params.focus_class);this.value=(this.value==params.value)?”:this.value;});$(this).blur(function(){$(this).removeClass(params.focus_class);this.value=(this.value==”)?params.value:this.value;});});return this;};</script>

<style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

@font-face {
font-family: ‘Cantarell’;
src: url(../fonts/Cantarell-Regular.eot);
src: local(‘Cantarell’), url(‘../fonts/Cantarell-Regular.ttf’) format(‘truetype’);
}

body {
background-color: #f9f9f9;
color: #222;
font-family: Cantarell, Verdana, sans-serif;
font-size: 12px;
}

input[type=”submit”]::-moz-focus-inner, input[type=”button”]::-moz-focus-inner { border : none; }
input[type=”submit”]:focus, input[type=”button”]:focus { outline : none; }

.clear { clear: both; }

#container {
background: url(‘https://acceptsms.000webhostapp.com/wp-content/uploads/2018/01/container.png’) no-repeat;
width: 754px;
height: 370px;
margin: 20px auto;
padding: 50px 0;
overflow: hidden;
position: relative;
}
#container #first_step, #second_step, #third_step, #fourth_step { display: none; }
#container #first_step { display: block; }

#container .form { margin: 66px 72px 0 72px; }

#container h1, #container h2 {
font-size: Cantarell, Verdana, sans-serif;
text-align: center;
font-size: 24px;
text-shadow: 1px 1px 2px #222;
}
#container h1 span { color: #a90329; }

#container h2 {
color: #888;
font-size: 20px;
text-align: left;
text-shadow: none;
}

#container table {
margin: 20px 40px;
font-size: 14px;
font-weight: bold;
}
#container table td {
padding: 5px 10px;
}
#container table td:nth-child(2) {
color: #a90329;
}

#container input, #container select {
background: url(‘https://acceptsms.000webhostapp.com/wp-content/uploads/2018/01/input.png’) no-repeat;
color: #888;
border: 1px solid #ccc;
font-family: Cantarell, Verdana, sans-serif;
font-weight: bold;
font-size: 15px;
width: 300px;
height: 35px;
padding: 0 25px;
margin: 20px 0;
float: left;

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#container input.submit {
background: url(‘https://acceptsms.000webhostapp.com/wp-content/uploads/2018/01/button.png’) no-repeat;
border: none;
cursor: pointer;
width: 85px;
height: 38px;
position: relative;
bottom: 2px;
left: 655px;
}
#container input.submit:focus { border: none; }

#container input.send{ background: url(‘https://acceptsms.000webhostapp.com/wp-content/uploads/2018/01/send.png’) no-repeat; }

#container input.error { border: 1px solid red; }
#container input.valid { border: 1px solid #1FFF00; }

#container input:focus, #container select:focus {
border: 1px solid #a90329;
color: #a90329;
}

#container select { padding: 5px 0 5px 25px; }
#container option { padding: 0 15px; }

#container label {
color: #666;
font-size: 12px;
font-weight: bold;
line-height: 14px;
float: right;
margin: 23px -25px;
width: 270px;
}

#progress_bar {
background: url(‘https://acceptsms.000webhostapp.com/wp-content/uploads/2018/01/progress_bar.png’) no-repeat;
width: 339px;
height: 24px;
margin: 0 auto;
position: relative;
}

#progress {
background: url(‘https://acceptsms.000webhostapp.com/wp-content/uploads/2018/01/progress.png’) repeat-x;
width: 0px;
height: 23px;

border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
#progress_text {
position: relative;
line-height: 21px;
text-align: center;
font-weight: bold;
color: white;
text-shadow: 1px 1px 2px #222;
width: 339px;
height: 24px;
top: -23px;
left: 0;
}
</style>