HTML/CSS practice // Design replication

 
Try to replicate the following designs in HTMl/CSS.

#1

Your markup should be like this:
<div>
	<h2></h2>
	<div class="box"></div>
</div>


#2

Your markup should be like this:
<div>

	<h2>Unfunctional Login</h2>
	
	<div>
		<input type="text" placeholder="Name">
		<input type="password" placeholder="Password">
		<input type="submit" class="button">
	</div>

</div>


#3

Your markup should be like this, but you should add better content:
<header>
	<h1>asdfasdf</h1>
</header>
	
<div>
	
	<div>
		<h2>Sections</h2>
		<div>
			<ul>
				<li><a href="#">One</a></li>
				<li><a href="#">Two</a></li>
				<li><a href="#">Three</a></li>
				<li><a href="#">Four</a></li>
				<li><a href="#">Five</a></li>
			</ul>
		</div>
	</div>

	<div>
		<h2>One</h2>
		<div>asdf</div>

		<h2>Two</h2>
		<div>asdfasdf</div>

		<h2>Three</h2>
		<div>asdfasdfasdf</div>

		<h2>Four</h2>
		<div>asdfasdfasdfasdf</div>

		<h2>Five</h2>
		<div>asdfasdfasdfasdfasdf</div>
	</div>

</div>