<html lang="pl">
<head>
  <meta charset="UTF-8" />
  <title>Homework</title>
</head>
<body>
  <div class="wrapper">
    <h1>Log in!</h1>
    <form action="">
      <input type="text" class="user"/>
      <input type="password" class="passwd"/>
      <input type="submit" value="Zaloguj" class="zaloguj" />
    </form>
  </div
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

*{padding:0;margin:0}
body{background: #333;}

.wrapper{
  width:500px;
  max-height:400px;
  background: #387497;
  margin:0 auto;
  position:relative;
  margin-top:100px;
  border-radius:5px;
  border-bottom:2px solid #eee;
  border-top:2px solid #06476D;
  padding-top:50px;
  padding-bottom:20px;
  animation: identifier 5s;
  -webkit-animation: identifier 3s;
}

.wrapper h1
{
  width:100%;
  background: #5B90AF;
  text-align:center;
  color:#fff;
  text-shadow: 1px 1px  black;
  font-family: 'Source Sans Pro', sans-serif;
  border-bottom: 2px dashed #fff;
  border-top: 2px dashed #fff;
  padding: 20px 0;
  margin-bottom:50px;
}

.wrapper input[type="text"], .wrapper input[type="password"], .wrapper input[type="submit"]{
  width:80%;
  border:none;
  padding: 10px 0;
  margin: 0 auto;
  display:block;
  margin-bottom:20px;
  border-radius:5px;
  border-bottom:2px solid #06476D;
  box-shadow: 2px 2px 0px #e0e0e0 inset;
  font-size: 22px;
  color:#333;
  text-shadow: 1px 0px #eee;
  font-weight:bold;
  font-family: 'Source Sans Pro', sans-serif;
  position:relative;

}

.wrapper input.user{
   background: rgba(255, 255, 255, 0.4) url(https://i.imgur.com/5QEjL7s.png) no-repeat 10px;
  padding-left:50px;
  box-sizing: border-box;
 
}

.wrapper input.passwd{
   background: rgba(255, 255, 255, 0.4) url(https://i.imgur.com/ygEuABP.png) no-repeat 18px;
   padding-left:50px;
   box-sizing: border-box;
   
  
}

.wrapper input[type="text"]:focus, .wrapper input[type="password"]:focus, .wrapper input[type="submit"]:focus{
  outline:none;
}

.wrapper input[type="submit"]
{
  background: #5B90AF;
  color:#fff;
  text-shadow: 1px 1px  black;
  cursor:pointer;
}
.wrapper input.zaloguj{
  transition-duration: .3s;
}
.wrapper input.zaloguj:hover
{
background: #387497;

}



@-webkit-keyframes identifier {
  from { transform:translateY(-100%); }
  to { transform:translateY(0); }
}
@-o-keyframes identifier {
  from { transform:translateY(-100%); }
  to { transform:translateY(0); }
}
@-moz-keyframes identifier {
  from { transform:translateY(-100%); }
  to { transform:translateY(0); }
}
@keyframes identifier {
  from { transform:translateY(-100%); }
  to { transform:translateY(0); }
}




Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.