we will code the Login Form that you can find in Futurico UI Pro made by Vladimir Kudinov. To create it we will use CSS3 and jQuery.

Step 1 – HTML Markup

Let’s start creating the HTML markup. Create a form with four inputs (for username, password, checkbox and submit) and wrap the checkbox input and label in a span tag, we will use the span tag to style the checkbox. To finish wrap the form and the title with a div tag and give it the class of “login-form”.

<div>

	<h1>Login Form</h1>

	<form action="#">

		<input type="text" name="username" placeholder="username">

		<input type="password" name="password" placeholder="password">

		<span>
			<input type="checkbox" name="checkbox">
			<label for="checkbox">remember</label>
		</span>

		<input type="submit" value="log in">

	</form>

</div>

Step 2 – General CSS Styles

First we will remove all the margins, paddings, borders, etc. from the elements that we will use.

.login-form,
.login-form h1,
.login-form span,
.login-form input,
.login-form label {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

.login-form {
	position: relative;
	width: 200px;
	height: 200px;
	padding: 15px 25px 0 25px;
	margin-top: 15px;
	cursor: default;

	background-color: #141517;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
	-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
	box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
}