Skip to content

Instantly share code, notes, and snippets.

@dacur

dacur/simple_form.css

Created July 9, 2014 13:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dacur/63ad04c828d862230d8f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dacur/63ad04c828d862230d8f to your computer and use it in GitHub Desktop.
Download ZIP
Simple form layout with HTML and CSS. View here: http://codepen.io/dacur/pen/KJmxg
Raw
simple_form.css
.wrap {
width: 250px;
clear: both;
margin:0 auto;
}
.form-wrap input {
width: 100px;
clear: both;
}
label{
float: left;
display: inline-block;
width: 10%;
}
Raw
simple_form.html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up </title>
<link rel="stylesheet" href="normalize.css">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="form-wrap">
<form>
<h1> Sign Up </h1>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<br />
<label for="surname">Surname:</label>
<input type="text" id="surname" name="user_surname">
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="user_email">
<br />
<label for="pdw">Password:</label>
<input type="password" id="pdw" name="user_password">
<br />
<label for="rep-pdw">Repeat Password:</label>
<input type="password" id="rep-pdw" name="user_rep-pdw">
</form>
</div><!-- form-wrap -->
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment