Login form

by Олексій Рачок

HTML

<nav>
		<ul>
			<li><i class="fa fa-map-marker"></i><a href="#">Check in<span class="count">3</span></a></li>
			<li><i class="fa fa-bell-o"></i><a href="#">Events</a></li>
			<li><i class="fa fa-user"></i><a href="#">Account</a></li>
			<li><i class="fa fa-cog"></i><a href="#">Settings</a></li>
		</ul>
	</nav>

	<div class="login">
		<div class="title">Login to tour account</div>
		<form action="">
			<span>Email</span>
			<div class="input">
				<div class="icon">
					<i class="fa fa-user"></i>
				</div>
				<input placeholder="Email" type="email" name="" id="">
			</div>
			<span>Password</span>
			<div class="input pass">
				<div class="icon">
					<i class="fa fa-lock"></i>
				</div>
				<input placeholder="Password" type="password" name="" id="">
			</div>
			<div class="submit">Sing In</div>
		</form>
		<a href="#">Fargot Username or Password?</a>
		<div class="fb"><i class="fa fa-facebook-square"></i>
Login with Facebook</div>
	</div>

SCSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,900,700,500);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
*{
	margin: 0;
	padding: 0;
}
html{
	height: 100%;
}
body{
	&:extend(html);
	background: radial-gradient(transparent 50%,rgba(0,0,0,.3) 100%),linear-gradient(#D77A6B,#d2c09c 60%,#876d54);
	font:16px 'Roboto', sans-serif;
	color: #8e8171;
}
.psevdo{
	content: '';
	position: absolute;
}


nav{

	ul{
		list-style: none;
		margin: 50px 0 0 10px;
		height: 65px;
		box-shadow: 0 0 15px rgba(0,0,0,.3);
		border-radius: 5px;
		width: 160px * 4;
		overflow: hidden;
	}

	li{
		background-color: #fff;
		width: 160px;
		text-align: center;
		display: inline-block;
		float: left;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
		border-right: 1px solid #f5f0ec;
		transition: all .3s;

		// &:first-child{
		// 	border-radius: 5px 0 0 5px;
		// }
		// &:last-child{
		// 	border: none;
		// 	border-radius: 0 5px 5px 0;
		// }
		&:before{
			.psevdo;
			background-color: #4daf7c;
			width: 100%;
			height: 0;
			left: 0;
			bottom: 0;
			transition: height .3s;
		}
		&:hover:before,
		&:focus:before{
			height: 3px;
		}
		&:hover,
		&:focus{
			background-color: #f8f3f0;
		}

		&:active{

		}
	}
	a{
		vertical-align: middle;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 700;
		color: #876b53;
		position: relative;
	}
	i.fa{
		font-size: 30px;
		line-height: 65px;
		vertical-align: middle;
		margin-right: 15px;
	}
	.count{
		height: 13px;
		width: 13px;
		font-size: 7px;
		color: #fff;
		background-color: #e35f39;
		border-radius: 50%;
		display: inline-block;
		line-height: 13px;
		position: absolute;
		top: -8px;
	}
}


.login{
	margin:30px auto;
	width: 300px;
	height: 420px;
	background: #fff;
	padding: 0 30px;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,.3);
	position: relative;
	overflow: hidden;


	.title{
		padding-top:...