GageDodd
Member
- Sep 30, 2014
- 225
- 57
Hello Devbest! I have coded this and i hope you love it! Well heres some screenshots
Well that's all fokes! xD
Please Dont Send hate comments
Thanks
-Gage
You must be registered for see links
HTML:
<form class="sign-up">
<h1 class="sign-up-title">Sign up in seconds</h1>
<input type="text" class="sign-up-input" placeholder="What's your username?" autofocus>
<input type="password" class="sign-up-input" placeholder="Choose a password">
<input type="submit" value="Sign me up!" class="sign-up-button">
</form>
HTML:
body {
font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333333;
background: #596778;
}
.sign-up {
position: relative;
margin: 50px auto;
width: 280px;
padding: 33px 25px 29px;
background: white;
border-bottom: 1px solid #c4c4c4;
border-radius: 5px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.sign-up:before,
.sign-up:after {
content: '';
position: absolute;
bottom: 1px;
left: 0;
right: 0;
height: 10px;
background: inherit;
border-bottom: 1px solid #d2d2d2;
border-radius: 4px;
}
.sign-up:after {
bottom: 3px;
border-color: #dcdcdc;
}
.sign-up-title {
margin: -25px -25px 25px;
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 300;
color: #777;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.75);
background: #f7f7f7;
}
.sign-up-title:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: #c4e17f;
border-radius: 5px 5px 0 0;
background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
input {
font-family: inherit;
color: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sign-up-input {
width: 100%;
height: 50px;
margin-bottom: 25px;
padding: 0 15px 2px;
font-size: 17px;
background: white;
border: 2px solid #ebebeb;
border-radius: 4px;
-webkit-box-shadow: inset 0 -2px #ebebeb;
box-shadow: inset 0 -2px #ebebeb;
}
.sign-up-input:focus {
border-color: #62c2e4;
outline: none;
-webkit-box-shadow: inset 0 -2px #62c2e4;
box-shadow: inset 0 -2px #62c2e4;
}
.lt-ie9 .sign-up-input {
line-height: 48px;
}
.sign-up-button {
position: relative;
vertical-align: top;
width: 100%;
height: 54px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f0776c;
border: 0;
border-bottom: 2px solid #d76b60;
border-radius: 5px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #d76b60;
box-shadow: inset 0 -2px #d76b60;
}
.sign-up-button:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
:-moz-placeholder {
color: #aaa;
font-weight: 300;
}
::-moz-placeholder {
color: #aaa;
opacity: 1;
font-weight: 300;
}
::-webkit-input-placeholder {
color: #aaa;
font-weight: 300;
}
:-ms-input-placeholder {
color: #aaa;
font-weight: 300;
}
::-moz-focus-inner {
border: 0;
padding: 0;
}Please Dont Send hate comments
Thanks
-Gage
