Last active
August 29, 2015 14:18
-
-
Save ben-z/02ac210d73b6e90ba6a1 to your computer and use it in GitHub Desktop.
Simple Log In Form with css. Preview on Codepen: http://codepen.io/anon/pen/azrmoB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | |
| <meta name="author" content="http://github.com/ben-z/"> | |
| <meta name="license" content="ISC"> | |
| <title>Log In</title> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <form class="login"> | |
| <i class="user-icon"></i><input type="text" placeholder="Username" /> | |
| <br /> | |
| <i class="key-icon"></i><input type="password" placeholder="Password" /> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> | |
| <svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> | |
| <!-- Generator: Sketch 3.1.1 (8761) - http://www.bohemiancoding.com/sketch --> | |
| <title>key</title> | |
| <desc>Created with Sketch.</desc> | |
| <defs></defs> | |
| <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> | |
| <g id="Mobile-Portrait" sketch:type="MSArtboardGroup" transform="translate(-27.000000, -113.000000)"> | |
| <g id="key" sketch:type="MSLayerGroup" transform="translate(27.000000, 113.000000)"> | |
| <path d="M9,4.71899414 L9,9.60040019 L12.625,12.0993652 L12.625,16.2545578 L13.7441406,17.5993652 L13.7441406,31.0999439 L16.8691406,33.9743652 L20.5827637,30.8364258 L20.5827637,17.5993652 L21.7121582,16.2545586 L21.7121582,12.0993652 L25.2150879,9.60039997 L25.2150879,4.71899414 L19.1525879,-5.55111512e-17 L17.329834,-5.55111512e-17 L15.267334,-5.55111512e-17 L9,4.71899414 Z M17,3.43774414 L18.5131438,4.32830811 L18.5131438,6.10943604 L17,7 L15.4868562,6.10943604 L15.4868562,4.32830811 L17,3.43774414 Z" id="Path-2" fill="#FEFEFE" sketch:type="MSShapeGroup"></path> | |
| <rect id="Rectangle-2" stroke="transparent" sketch:type="MSShapeGroup" x="0" y="0" width="34" height="34"></rect> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Mixins are like functions, | |
| // they are used throughout the code | |
| @mixin placeholder-color($color) { | |
| &::-webkit-input-placeholder { | |
| @include font-attr($color); | |
| } | |
| &:-moz-placeholder { /* Firefox 18- */ | |
| @include font-attr($color); | |
| } | |
| &::-moz-placeholder { /* Firefox 19+ */ | |
| @include font-attr($color); | |
| } | |
| &:-ms-input-placeholder { | |
| @include font-attr($color); | |
| } | |
| } | |
| @mixin font-attr($color){ | |
| color: $color; | |
| font-family: HelveticaNeue; | |
| font-size: 15px; | |
| line-height: 34px; | |
| vertical-align: bottom; | |
| } | |
| @mixin icon($url){ | |
| display: inline-block; | |
| content: url($url); | |
| height: 34px; | |
| width: 34px; | |
| vertical-align: text-top; | |
| } | |
| // ----------------------------- | |
| body { | |
| background-color: black; | |
| } | |
| input{ | |
| letter-spacing: 1px; | |
| } | |
| #content{ | |
| text-align: center; | |
| } | |
| form.login { | |
| // Optional: Just to make the form | |
| // look nicer on the empty webpage | |
| display: inline-block; | |
| margin-top: 50px; | |
| text-align: left; | |
| border: 1px solid white; | |
| padding: 5px 30px 30px 30px; | |
| // ----------------------------- | |
| // Custom icons I traced | |
| .user-icon { | |
| @include icon('assets/user.svg'); | |
| } | |
| .key-icon { | |
| @include icon('assets/key.svg'); | |
| } | |
| // ----------------------------- | |
| input{ | |
| display:inline-block; | |
| background: none; | |
| border: none; | |
| border-bottom: 1px solid white; | |
| margin: 25px 0 0 7px; | |
| padding: 0 0 0 5px; | |
| @include font-attr(white); | |
| // here you can change the placeholder color | |
| // try changing 'white' to 'darken(white, 20%)' | |
| @include placeholder-color(white); | |
| &:focus{ | |
| outline-width: 0; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment