Chunks
Editor's choice
Latest chunks
Popular
New chunk
Login
Register
Chunk options
CSS
JS
Share
Full page
Fork
Auto-run JS
Run
Save
×
Tags
3d
accordion
admin
admin dashboard
admin interface
ajax
alert
android
angularjs
animate
animated
animation
append
apple
audio
backbonejs
background
badges
blog
blur
bootstrap
border
box-shadow
button
buttons
calendar
canvas
caption
carousel
checkbox
checkout
chrome
clock
cloth
cms
color
contact
controls
css animation
css only
css3
d3js
demo
design
dribbble
dropdown
ecommerce
effect
emberjs
facebook
flat
flat design
flexbox
flip
footer
form
forms
gallery
game
gradient
grid
gsap
header
hover
html5
icon fonts
icons
image
image slider
images
input
ionic
ios7
iphone
jquery
jQuery plugin
keyframes
layout
layouts
light
lightbox
list
lists
loader
loading
login
logo
magnific-popup
maps
masonry
menu
messages
mobile
modal
mouse
nav
navbar
navigation
panel
parallax
particles
payment
physics
plugin
popup
profile
progress bar
pure css
radio
registration
responsive
rwd
scroll
search
select
shadow
shop
sidebar
signup
simple
slide
slider
slideshow
social
spinner
status
svg
switch
tabbable
table
tabs
text
thumbnails
toggle
toolbar
transform
transition
twitter
typography
ui
user
user interface
webkit
Description
CSS
Bootstrap 3.1.1
Bootstrap 3.0.1
Bootstrap 2.3.2
Foundation 5.2.2
Foundation 4.3.2
Font Awesome 4.0.3
Animate.css 3.1.0
Pure 0.4.2
Add external CSS library
JS
Jquery 2.1.0
Jquery 2.0.0
Jquery 1.11.0
Jquery 1.9.0
Jquery 1.8.0
Jquery 1.7.0
Jqueryui 1.10.4
Jqueryui 1.9.2
Jqueryui 1.8.24
Bootstrap 3.1.1
Bootstrap 3.0.0
Bootstrap 2.3.2
Foundation 5.2.2
Dojo 1.9.3
Dojo 1.8.6
Dojo 1.7.5
MooTools 1.4.5
MooTools 1.3.2
AngularJS 1.2.26
EmberJs 1.5.0
BackboneJs 1.1.2
Prototype 1.7.1.0
Prototype 1.6.1.0
ExtCore 3.1.0
Add external JS library
Share link
Full page
<form class="login"> <h1 class="login-title">Simple Login</h1> <input type="text" class="login-input" placeholder="Email Adress" autofocus> <input type="password" class="login-input" placeholder="Password"> <input type="submit" value="Lets Go" class="login-button"> <p class="login-lost"><a href="">Forgot Password?</a></p> </form>
HTML
body { background: #2d343d; } .login { margin: 20px auto; width: 300px; padding: 30px 25px; background: white; border: 1px solid #c4c4c4; } h1.login-title { margin: -28px -25px 25px; padding: 15px 25px; line-height: 30px; font-size: 25px; font-weight: 300; color: #ADADAD; text-align:center; background: #f7f7f7; } .login-input { width: 285px; height: 50px; margin-bottom: 25px; padding-left:10px; font-size: 15px; background: #fff; border: 1px solid #ccc; border-radius: 4px; } .login-input:focus { border-color:#6e8095; outline: none; } .login-button { width: 100%; height: 50px; padding: 0; font-size: 20px; color: #fff; text-align: center; background: #f0776c; border: 0; border-radius: 5px; cursor: pointer; outline:0; } .login-lost { text-align:center; margin-bottom:0px; } .login-lost a { color:#666; text-decoration:none; font-size:13px; }
CSS
JS
Loading....
Preview
×
Sign In
Register
Sign In
Login with Google
Sign In
Join CodeChunk
It's free.
Join with Google
