4 ui flat дизайн

In this example below you will see how to do a 4 ui flat дизайн with some HTML / CSS and Javascript

элементы навигации и формаи авторизации

Thumbnail
This awesome code was written by retyui, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright retyui ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>4 ui flat дизайн</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <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>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/retyui/4-ui-flat-andx434andx438andx437andx430andx439andx43d-pvvMyv */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,700,500);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background: radial-gradient(transparent 50%, rgba(0, 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, 0.3);
  border-radius: 5px;
  width: 640px;
  overflow: hidden;
}
nav 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;
}
nav li:before {
  content: '';
  position: absolute;
  background-color: #4daf7c;
  width: 100%;
  height: 0;
  left: 0;
  bottom: 0;
  transition: height .3s;
}
nav li:hover:before,
nav li:focus:before {
  height: 3px;
}
nav li:hover,
nav li:focus {
  background-color: #f8f3f0;
}
nav a {
  vertical-align: middle;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  color: #876b53;
  position: relative;
}
nav i.fa {
  font-size: 30px;
  line-height: 65px;
  vertical-align: middle;
  margin-right: 15px;
}
nav .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, 0.3);
  position: relative;
  overflow: hidden;
}
.login .title {
  padding-top: 40px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 18px;
  color: #8e8171;
}
.login form {
  margin-top: 30px;
  height: 255px;
}
.login form .submit {
  border: none;
  background: linear-gradient(#ea704b, #e75e34);
  width: 100%;
  height: 44px;
  font-size: 17px;
  text-align: center;
  line-height: 44px;
  border-radius: 3px;
  color: #fff;
  border-top: 1px solid #f2a690;
  box-shadow: 0 0 0 1px #d04318, 0 3px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  transition: color .1s;
  cursor: pointer;
}
.login form .submit:focus,
.login form .submit:hover {
  background: linear-gradient(#eb7754, #e8653d);
}
.login form .submit:active {
  border-top-color: transparent;
  background: #e2491a;
  color: #b93c16;
  text-shadow: 0 0.5px rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 1px #d04318, inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.login form .submit:active:before {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  background-color: #de481a;
}
.login form .submit:before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #e65326;
  top: 12px;
  left: 62px;
}
.login form .submit:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 5px solid #fff;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  left: 70px;
  top: 19.5px;
}
.login form span {
  margin-left: 5px;
}
.login form div.pass {
  margin-bottom: 40px;
}
.login form .input {
  border-radius: 5px;
  border: 1px solid #e5d4c2;
  height: 46px;
  overflow: hidden;
  margin-bottom: 20px;
}
.login form .input .icon {
  height: 46px;
  width: 46px;
  display: inline-block;
  background-color: #f9ece4;
  text-align: center;
}
.login form .input .icon i.fa {
  font-size: 18px;
  vertical-align: middle;
  line-height: 44px;
  color: #dfc5ae;
}
.login form .input input {
  border: none;
  border-left: 1px solid #e5d4c2;
  height: 100%;
  outline: none;
  padding-left: 16px;
  float: right;
  width: calc(100% - 63px);
}
.login form .input input:focus {
  border-left: 1px solid #e86740;
}
.login form .input input:focus .input {
  border: 1px solid #e86740;
}
.login form .input input:focus .icon {
  background-color: #f9ece4;
}
.login form .input input:focus i.fa {
  color: #eda58f;
}
.login a {
  text-align: center;
  font-size: 10px;
  margin-top: -5.5px;
  width: 100%;
  display: inline-block;
  background: #f8f3f0;
  box-shadow: 0 0 0 83px #f8f3f0;
}
.login .fb {
  height: 38px;
  width: 100%;
  left: 0;
  bottom: 0;
  position: absolute;
  text-align: center;
  background-color: #5f90b0;
  color: #fff;
  font-size: 10px;
  line-height: 38px;
  cursor: pointer;
}
.login .fb i.fa {
  font-size: 15px;
  vertical-align: middle;
}

Comments