Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Software Development
Programming
Colourful Registration Forum
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="GageDodd" data-source="post: 369705" data-attributes="member: 52705"><p>Hello Devbest! I have coded this and i hope you love it! Well heres some screenshots</p><p>[SPOILER="Screenshot"]</p><p><a href="http://prntscr.com/aek3nv" target="_blank">http://prntscr.com/aek3nv</a></p><p>[/SPOILER]</p><p>[SPOILER="Codes"]</p><p>[HTML]<form class="sign-up"></p><p> <h1 class="sign-up-title">Sign up in seconds</h1></p><p> <input type="text" class="sign-up-input" placeholder="What's your username?" autofocus></p><p> <input type="password" class="sign-up-input" placeholder="Choose a password"></p><p> <input type="submit" value="Sign me up!" class="sign-up-button"></p><p></form>[/HTML]</p><p>[HTML]</p><p>body {</p><p> font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;</p><p> color: #333333;</p><p> background: #596778;</p><p>}</p><p></p><p>.sign-up {</p><p> position: relative;</p><p> margin: 50px auto;</p><p> width: 280px;</p><p> padding: 33px 25px 29px;</p><p> background: white;</p><p> border-bottom: 1px solid #c4c4c4;</p><p> border-radius: 5px;</p><p> -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);</p><p> box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);</p><p>}</p><p></p><p>.sign-up:before,</p><p>.sign-up:after {</p><p> content: '';</p><p> position: absolute;</p><p> bottom: 1px;</p><p> left: 0;</p><p> right: 0;</p><p> height: 10px;</p><p> background: inherit;</p><p> border-bottom: 1px solid #d2d2d2;</p><p> border-radius: 4px;</p><p>}</p><p></p><p>.sign-up:after {</p><p> bottom: 3px;</p><p> border-color: #dcdcdc;</p><p>}</p><p></p><p>.sign-up-title {</p><p> margin: -25px -25px 25px;</p><p> padding: 15px 25px;</p><p> line-height: 35px;</p><p> font-size: 26px;</p><p> font-weight: 300;</p><p> color: #777;</p><p> text-align: center;</p><p> text-shadow: 0 1px rgba(255, 255, 255, 0.75);</p><p> background: #f7f7f7;</p><p>}</p><p></p><p>.sign-up-title:before {</p><p> content: '';</p><p> position: absolute;</p><p> top: 0;</p><p> left: 0;</p><p> right: 0;</p><p> height: 8px;</p><p> background: #c4e17f;</p><p> border-radius: 5px 5px 0 0;</p><p> 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);</p><p> 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);</p><p> 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);</p><p> 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);</p><p>}</p><p></p><p>input {</p><p> font-family: inherit;</p><p> color: inherit;</p><p> -webkit-box-sizing: border-box;</p><p> -moz-box-sizing: border-box;</p><p> box-sizing: border-box;</p><p>}</p><p></p><p>.sign-up-input {</p><p> width: 100%;</p><p> height: 50px;</p><p> margin-bottom: 25px;</p><p> padding: 0 15px 2px;</p><p> font-size: 17px;</p><p> background: white;</p><p> border: 2px solid #ebebeb;</p><p> border-radius: 4px;</p><p> -webkit-box-shadow: inset 0 -2px #ebebeb;</p><p> box-shadow: inset 0 -2px #ebebeb;</p><p>}</p><p></p><p>.sign-up-input:focus {</p><p> border-color: #62c2e4;</p><p> outline: none;</p><p> -webkit-box-shadow: inset 0 -2px #62c2e4;</p><p> box-shadow: inset 0 -2px #62c2e4;</p><p>}</p><p></p><p>.lt-ie9 .sign-up-input {</p><p> line-height: 48px;</p><p>}</p><p></p><p>.sign-up-button {</p><p> position: relative;</p><p> vertical-align: top;</p><p> width: 100%;</p><p> height: 54px;</p><p> padding: 0;</p><p> font-size: 22px;</p><p> color: white;</p><p> text-align: center;</p><p> text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);</p><p> background: #f0776c;</p><p> border: 0;</p><p> border-bottom: 2px solid #d76b60;</p><p> border-radius: 5px;</p><p> cursor: pointer;</p><p> -webkit-box-shadow: inset 0 -2px #d76b60;</p><p> box-shadow: inset 0 -2px #d76b60;</p><p>}</p><p></p><p>.sign-up-button:active {</p><p> top: 1px;</p><p> outline: none;</p><p> -webkit-box-shadow: none;</p><p> box-shadow: none;</p><p>}</p><p></p><p>:-moz-placeholder {</p><p> color: #aaa;</p><p> font-weight: 300;</p><p>}</p><p></p><p>::-moz-placeholder {</p><p> color: #aaa;</p><p> opacity: 1;</p><p> font-weight: 300;</p><p>}</p><p></p><p>::-webkit-input-placeholder {</p><p> color: #aaa;</p><p> font-weight: 300;</p><p>}</p><p></p><p>:-ms-input-placeholder {</p><p> color: #aaa;</p><p> font-weight: 300;</p><p>}</p><p></p><p>::-moz-focus-inner {</p><p> border: 0;</p><p> padding: 0;</p><p>}</p><p>[/HTML]</p><p>[/SPOILER]</p><p>Well that's all fokes! xD</p><p>Please Dont Send hate comments</p><p>Thanks</p><p> -Gage</p></blockquote><p></p>
[QUOTE="GageDodd, post: 369705, member: 52705"] Hello Devbest! I have coded this and i hope you love it! Well heres some screenshots [SPOILER="Screenshot"] [URL]http://prntscr.com/aek3nv[/URL] [/SPOILER] [SPOILER="Codes"] [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] [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; } [/HTML] [/SPOILER] Well that's all fokes! xD Please Dont Send hate comments Thanks -Gage [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Software Development
Programming
Colourful Registration Forum
Top