cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

azrmoB

A Pen By Captain Anonymous

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- All files can be found here:
   https://gist.github.com/ben-z/02ac210d73b6e90ba6a1
-->
<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>
            
          
!
            
              // 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('data:image/svg+xml;utf8,<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>user</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, -50.000000)">
            <g id="user" sketch:type="MSLayerGroup" transform="translate(27.000000, 50.000000)">
                <path d="M17.5,31 C24.9558441,31 31,24.9558441 31,17.5 C31,10.0441559 24.9558441,4 17.5,4 C10.0441559,4 4,10.0441559 4,17.5 C4,24.9558441 10.0441559,31 17.5,31 Z" id="Oval-1" stroke="#FEFEFE" stroke-width="2" sketch:type="MSShapeGroup"></path>
                <circle id="Oval-2" stroke="#FEFEFE" fill="#FEFEFE" sketch:type="MSShapeGroup" cx="18" cy="12" r="4"></circle>
                <path d="M16.4929889,17 C13.4592949,17 11,19.4686147 11,22.5 L11,28 L25,28 L25,22.5 C25,19.4624339 22.5293078,17 19.5070111,17 L16.4929889,17 Z" id="Rectangle-1" fill="#FEFEFE" sketch:type="MSShapeGroup"></path>
                <rect id="Rectangle-3" stroke="transparent" sketch:type="MSShapeGroup" x="0" y="0" width="34" height="34"></rect>
            </g>
        </g>
    </g>
</svg>');
    }
    // Code Pen doesn't allow me to embed external svg files, but they can be found on the gist: https://gist.github.com/ben-z/02ac210d73b6e90ba6a1
    .key-icon {
        @include icon('data:image/svg+xml;utf8,<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>');
    }
    // -----------------------------
    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(darken(white,20%));
        &:focus{
            outline-width: 0;
          @include placeholder-color(white);
        }
    }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console