Responsive login form using CSS3

Responsive Login Forms is a simple and professional Form that strikes a balance between simplicity and elegance.CSS3 Forms kit is simple, clean and fresh modern form.

responsive-login

Features

1) Flexible and responsive
2) Clean consistent form UI design
3) Pure HTML5 + CSS3 (No images, no icon dependency)
4) Cross-Browser IE8+, Firefox, Safari, Chrome (Android + IOS)
5)Multiple color themes and combinations
6) Easy to implement, customize and style
7) Login Form’s
8) Input Elements normal, focus, disabled, and validation states
9)Beautiful form buttons
10) 361 Vector Font Awesome Icons
11) Google web fonts

Html Code

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Responsive Login form</title>
	
	<!-- Stylesheets -->
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet'>
	<link rel="stylesheet" href="css/style.css">

	<!-- Optimize for mobile devices -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
</head>
<body>
	<!-- HEADER -->
	<div id="header">
		
		<div class="page-full-width cf">
	
			<div id="login-intro" class="fl">
			
				<h1>Responsive Login form</h1>
				<h5>Enter your credentials below</h5>
			
			</div> <!-- login-intro -->
			
			
		</div> <!-- end full-width -->	

	</div> <!-- end header -->
	
	<!-- MAIN CONTENT -->
	<div id="content">
	
		<form action="#" method="POST" id="login-form">
		
			<fieldset>

				<p>
					<label for="login-username">username</label>
					<input type="text" id="login-username" class="round full-width-input" autofocus />
				</p>

				<p>
					<label for="login-password">password</label>
					<input type="password" id="login-password" class="round full-width-input" />
				</p>
				
				<p>I've <a href="#">forgotten my password</a>.</p>
				
				<a href="#" class="button round blue image-right ic-right-arrow">LOG IN</a>

			</fieldset>

		</form>
		
	</div> <!-- end content -->
</body>
</html>

<head>

<title>Responsive Login form</title>

</head>

<body>

<h1>Responsive Login form</h1>

<h5>Enter your credentials below</h5>

</div>

</div>

</div>

<p>

<label for="login-username">username</label>

</p>

<p>

<label for="login-password">password</label>

</p>

<p>I've <a href="#">forgotten my password</a>.</p>

</fieldset>

</form>

</div>

</body>

</html>

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Responsive login form using CSS3

Features

Html Code

Recommended Posts:

webmentor