%form.login-form
%input.login-input{placeholder: "E-mail"}
%input.login-input{placeholder: "Password"}
%input.login-submit{type: "submit", value: "Login" }
.cloud.cloud--1
%span.blobb
.cloud.cloud--2
%span.blobb
.cloud.cloud--3
%span.blobb
.cloud.cloud--4
%span.blobb
.cloud.cloud--5
%span.blobb
View Compiled
@import compass
*
margin: 0
padding: 0
@include box-sizing(border-box)
html
height: 100%
body
padding: 40px
font-size: 100%
background: #86b2e0
background: linear-gradient(#6897c9, #8db7e0)
overflow-x: hidden
@keyframes hover
0%
margin-top: 0px
50%
margin-top: -5px
100%
margin-top: 0px
.login-form
margin: 0 auto
padding: 15px
max-width: 400px
background: #fff
border-radius: 5px
box-shadow: 0 2px 5px rgba(0,0,0,0.3)
animation-name: hover
animation-iteration-count: infinite
animation-duration: 3s
.login-input
display: block
margin: 0 0 15px
width: 100%
padding: 10px 12px
color: #3c3c3c
font-size: 1em
border: 1px solid #ccc
border-radius: 5px
box-shadow: inset 0 2px 4px -1px rgba(black, .2)
&::-webkit-input-placeholder
color: #bbb
&:-moz-placeholder
color: #bbb
&:-ms-input-placeholder
color: #bbb
&:focus
outline: 0
border: 1px solid darken(#ccc, 20%)
box-shadow: inset 0 2px 4px -1px rgba(black, .3)
.login-submit
padding: 8px 12px
color: #fff
font-size: 1em
background: #60a163
@include background(linear-gradient(#7ccb80, #60a163))
box-shadow: inset 0 1px 0 rgba(white,.6)
border-radius: 5px
border: 1px solid #427c44
&:hover, &:focus
cursor: pointer
background: #549056
@include background(linear-gradient(#7ccb80, #549056))
/* Clouds */
@keyframes fly
0%
left: -200px
100%
left: 120%
.cloud
position: absolute
width: 120px
height: 60px
left: -200px
color: #000
background: #fff
box-shadow: 0 0 7px rgba(0,0,0,0.4)
animation-name: fly
animation-iteration-count: infinite
animation-timing-function: linear
animation-duration: 60s
opacity: 0.9
&:before, &:after
content: ''
position: absolute
top: 0
background: #fff
border-radius: 50%
&:before
left: -30px
width: 60px
height: 60px
&:after
right: -30px
width: 60px
height: 60px
.blobb
position: absolute
top: -50px
right: -5px
background: #fff
width: 100px
height: 100px
border-radius: 50%
&:before
content: ''
position: absolute
left: -30px
top: 30px
width: 40px
height: 40px
background: #fff
border-radius: 50%
.cloud--1
top: 270px
animation-duration: 50s
.cloud--2
top: 320px
animation-delay: 4s
animation-timing-function: ease-in-out
.cloud--3
top: 350px
animation-delay: 20s
.cloud--4
top: 300px
animation-delay: 40s
animation-timing-function: ease-in-out
.cloud--5
top: 250px
animation-delay: 55s
animation-duration: 50s
/* END Clouds */
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.