Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="wrapper">
  <h1 class="page-title"><small style="display:block;">Style Guide</small> Core Bank</h1>
<div class="pattern">
  <h2 class="pattern-head">Logo</h2>
  <div class="pattern-body">
    
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Colors</h2>
  <div class="pattern-body">
    <ul class="colors">
      <li class="swatch c-black-dark">@black-dark</li>
      <li class="swatch c-black">@black</li>
      <li class="swatch c-white">@white</li>
      <li class="swatch c-offwhite">@offwhite</li>
      <li class="swatch c-grey">@grey</li>
      <li class="swatch c-grey-dark">@grey-dark</li>
      <li class="swatch c-grey-light">@grey-light</li>
    </ul>
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Fonts</h2>
  <div class="pattern-body">
    <p>Primary font: 'Open Sans', 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif;</p>
    <p><em>Primary font italic: 'Open Sans', 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif;</em></p>
    <p><strong>Primary font bold: 'Open Sans', 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif;</strong></p>
    <p class="serif">Secondary font: Roboto Slab, Georgia, Times, "Times New Roman", serif;</p>
    <p class="serif"><em>Secondary font italic: Roboto Slab, Georgia, Times, "Times New Roman", serif;</em></p>
    <p class="serif"><strong>Secondary font bold; Roboto Slab, Georgia, Times, "Times New Roman", serif;</strong></p>
    <p class="script">Script font: 'Satisfy', cursive;</p>
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Typography</h2>
  <div class="pattern-body">
    <h1>Heading Level 1</h1>
    <h2>Heading Level 2</h2>
    <h3>Heading Level 3</h3>  
    <h4>Heading Level 4</h4>
    <h5>Heading Level 5</h5> 
    <h6>Heading Level 6</h6>
    
    <p class="big">This is a lead paragraph.</p>
    <p>This is an <b>ordinary paragraph</b> that is <i>long enough</i> to wrap to <u>multiple lines</u> so that you can see how the line spacing looks.</p>
    <p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
    <p><small>This is text in a small wrapper.</small></p>
    <p class="muted">Muted color paragraph.</p>
    <p class="meta">Meta Information.</p>
              
  </div>
</div>

<div class="pattern">
  <h2 class="pattern-head">Buttons</h2>
  <div class="pattern-body">
    <p><a href="">This is a Link</a></p>
							    <p><button>button</button></p>
							    <p><input class="btn" value="Input Button"/></p>
    <p><a href="#" class="btn">.btn</a></p>
    <p><a href="#" class="btn alt">.btn.alt</a></p>
    <p><a href="#" class="btn btn-border">.btn.btn-border</a></p>
    <p><a href="#" class="btn disabled">.btn.disabled</a></p>
							    <p><a href="#" class="btn btn-big">.btn.btn-big</a></p>
							    <p><a href="#" class="btn btn-small">.btn.btn-small</a></p>
  </div>
						</div>    
<div class="pattern">
  <h2 class="pattern-head">Elements</h2>
  <div class="pattern-body">
    <hr />
    <hr class="big"/>
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Forms</h2>
  <div class="pattern-body">
    <form action="" method="post" class="wpcf7-form" novalidate="novalidate">
    <div class="field-wrapper">
      <label for="yourname" class="float-label">Name</label>
      <span class="your-name"><input type="text" name="your-name" value="" size="40" class="" id="yourname" aria-required="true" aria-invalid="false" placeholder="Name"></span> 
    </div>
    <div class="field-wrapper">
      <label for="youremail" class="float-label">Email</label>
      <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" id="youremail" aria-required="true" aria-invalid="false" placeholder="Email"></span> </div>
    <div class="field-wrapper">
      <label for="yourmessage" class="float-label">Message</label>
      <span class="your-message"><textarea name="your-message" cols="40" rows="10" id="yourmessage" aria-invalid="false" placeholder="Message"></textarea></span>
    </div>
    <div class="field-wrapper">
      <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit">
    </div>
  </form>
  <form class="topLabel">  
    <span class="field-wrapper">
      <input id="Field1_0" name="Field1" type="radio" class="field radio" value="Fantasty" checked="checked" />
      <label class="choice" for="Field1_0" >
      Radio Option 1
      </label>
    </span>
    <span class="field-wrapper">
      <input id="Field1_1" name="Field1" type="radio" class="field radio" value="Sci-Fi" />
      <label class="choice" for="Field1_1" >
      Radio Option 2
      </label>
    </span>
    <span class="field-wrapper">
      <input id="Field1_2" name="Field1" type="radio" class="field radio" value="Don&#039;t make me choose!" />
      <label class="choice" for="Field1_2" >
      Radio Option 3
      </label> 
    </span>

    <span class="field-wrapper">
      <input type="checkbox"  checked="checked" value="" id="checkbox1" />           <label class="checkbox" for="checkbox1">
      Checkbox Option 1
      </label>
    </span>
    <span class="field-wrapper">

      <input type="checkbox" value="" id="checkbox2" />
      <label class="checkbox" for="checkbox2">
        Checkbox Option 2
      </label>
    </span>
    <span class="field-wrapper">

      <input type="checkbox" value="" id="checkbox3" />
      <label class="checkbox" for="checkbox3">
        Checkbox Option 3
      </label>
    </span>
  </form>
    
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Navigation</h2>
  <div class="pattern-body">
    <nav id="nav" class="nav">
      <ul class="nav-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Icons</h2>
  <div class="pattern-body">
    
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Pagination</h2>
  <div class="pattern-body">
    <div class="pagination">
      <ul class="page-numbers">
      <li><a class="prev page-numbers" href="#">«</a></li>
      <li><a class="page-numbers" href="#">1</a></li>
      <li><span class="page-numbers current">2</span></li>
      <li><a class="page-numbers" href="#">3</a></li>
      <li><a class="page-numbers" href="#">4</a></li>
      <li><a class="next page-numbers" href="#">»</a></li>
    </ul>
    </div>
    
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Comment Form</h2>
  <div class="pattern-body">
    <form role="form" action="" method="post" id="commentform">
      <ul class="formlist">
        <label for="author" class="float-label">Name</label>
        <li><input type="text" name="author" placeholder="Name*" id="author" tabindex="1" aria-required="true"></li>
        <label for="email"  class="float-label">Name</label>
        <li><input type="text" name="email" placeholder="Email*" id="email" tabindex="2" aria-required="true"></li>
        <label for="url"  class="float-label">Name</label>
        <li><input type="text" name="url" placeholder="Website" id="url" tabindex="3"></li>
         <label for="comment" class="float-label">Name</label>
        <li><textarea name="comment" placeholder="Comment" id="comment" cols="70%" rows="10" tabindex="4" value="Enter comment here."></textarea></li>
        <li class="submitbutton"><input name="submit" type="submit" id="submit" tabindex="5" value="Submit"></li>
        <input type="hidden" name="comment_post_ID" value="489">
        <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="8c64e93eaa"></p>	</ul>
    </form>
    
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Comments</h2>
  <div class="pattern-body">
    
  </div>
</div>
<div class="pattern">
  						<h2 class="pattern-head">Inline Elements</h2>
  						<div class="pattern-body">
    <p><a href="#">This is a text link</a></p>

    <p><strong>Strong is used to indicate strong importance</strong></p>

    <p><em>This text has added emphasis</em></p>

    <p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

    <p>The <i>i element</i> is text that is set off from the normal text</p>

    <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

    <p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

    <p><s>This text has a strikethrough</s></p>

    <p>Superscript<sup>®</sup></p>

    <p>Subscript for things like H<sub>2</sub>O</p>

    <p><small>This small text is small for for fine print, etc.</small></p>

    <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

    <p>Keybord input: <kbd>Cmd</kbd></p>

    <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

    <p><cite>This is a citation</cite>

    </p><p>The <dfn>dfn element</dfn> indicates a definition.</p>

    <p>The <mark>mark element</mark> indicates a highlight</p>

    <p><code>This is what inline code looks like.</code></p>

    <p><samp>This is sample output from a computer program</samp></p>

    <p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
  						</div>
					</div>
<div class="pattern">
  <h2 class="pattern-head">Backgrounds</h2>
  <div class="pattern-body">
    <div class="bg-red">
      <h1>Heading Level 1</h1>
      <h2>Heading Level 2</h2>
      <h3>Heading Level 3</h3>  
      <h4>Heading Level 4</h4>
      <h5>Heading Level 5</h5> 
      <h6>Heading Level 6</h6>

      <p class="big">This is a lead paragraph.</p>
      <p>This is an <b>ordinary paragraph</b> that is <i>long enough</i> to wrap to <u>multiple lines</u> so that you can see how the line spacing looks.</p>
      <p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
      <p><small>This is text in a small wrapper.</small></p>
      <p class="muted">Muted color paragraph.</p>
      <p class="meta">Meta Information.</p>
    </div>
    
    <div class="bg-black">
      <h1>Heading Level 1</h1>
      <h2>Heading Level 2</h2>
      <h3>Heading Level 3</h3>  
      <h4>Heading Level 4</h4>
      <h5>Heading Level 5</h5> 
      <h6>Heading Level 6</h6>

      <p class="big">This is a lead paragraph.</p>
      <p>This is an <b>ordinary paragraph</b> that is <i>long enough</i> to wrap to <u>multiple lines</u> so that you can see how the line spacing looks.</p>
      <p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
      <p><small>This is text in a small wrapper.</small></p>
      <p class="muted">Muted color paragraph.</p>
      <p class="meta">Meta Information.</p>
    </div>
    
    <div class="bg-grey">
      <h1>Heading Level 1</h1>
      <h2>Heading Level 2</h2>
      <h3>Heading Level 3</h3>  
      <h4>Heading Level 4</h4>
      <h5>Heading Level 5</h5> 
      <h6>Heading Level 6</h6>

      <p class="big">This is a lead paragraph.</p>
      <p>This is an <b>ordinary paragraph</b> that is <i>long enough</i> to wrap to <u>multiple lines</u> so that you can see how the line spacing looks.</p>
      <p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
      <p><small>This is text in a small wrapper.</small></p>
      <p class="muted">Muted color paragraph.</p>
      <p class="meta">Meta Information.</p>
    </div>
    
    
  </div>
</div>
</div><!--*end wrapper*-->
              
            
!

CSS

              
                * {
  box-sizing: border-box;
}
.wrapper {
  width: 80%;
  margin: 0 auto;
}

h1.page-title {
  font-size: 2.75em;
  
  small {
    font-size: .5em;
    font-weight: normal;
    color: @grey;
  }
}

.pattern {
  margin-bottom: 2em;
  position: relative;
}

.pattern-head {
  margin: 2em 0;
  font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  font-size: 70%;
  font-weight: normal;
  padding: 1em 0;
  color: @grey;
  border-bottom: 1px solid @grey-light;
}

/*COLORS *
-----------------------------------------------*/
@richblack: #000;
@black-dark: #0a0a0a;
@black: #1a1a1a;
@white: #fff;
@offwhite: #f2f2f2;
@grey: #adafb2;
@grey-dark: #848484;
@grey-light: #e6e6e6;

@red: #ff5656;
@blue: #46c4d7;

.colors {
  padding: 0;
  
  li {
    list-style: none;
  }
}

.colors li {
  display: inline-block;
  height: 100px;
  width: 100px;
  text-align: center;
  margin-right: 30px;
  padding-top: 2em;
  border-radius: 500px;
  vertical-align: middle;
  position: relative;
  border: 5px solid white;
  box-shadow: 0 0 1px @grey/2;
}

.c-black {
  background-color: @black;
  color: @white;
}

.c-black-dark {
  background-color: @black-dark;
  color: @white;
}

.c-white {
  background-color: @white;
  color: @black;
}

.c-offwhite {
  background-color: @offwhite;
  color: @black;
}

.c-grey {
  background-color: @grey;
  color: @black;
}

.c-grey-dark {
  background-color: @grey-dark;
  color: @white;
}

.c-grey-light {
  background-color: @grey-light;
  color: @black;
}

/*FONTS *
-----------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
@import url(https://fonts.googleapis.com/css?family=Satisfy);

body {
  .sans;
}

.sans {
  font-family: 'Open Sans', "HelveticaNeue", "Helvetica", "Arial", sans-serif;
}

.serif {
  font-family:'Roboto Slab', Georgia, Times, "Times New Roman", serif;
}

.script {
  font-family: 'Satisfy', cursive;
}

/*TYPOGRAPHY *
-----------------------------------------------*/
p {
  margin: 0 0 1em 0;
}

.big {
  font-size: 1.25em;
}

.muted {
  color: #999;
}

.meta {
  font-size: 80%;
  .muted;
}

/*BUTTONS *
-----------------------------------------------*/

a {
  color: @black;
  text-decoration: none;
  outline: 0;
}

.btn,
button {
  display: inline-block;
  background: @blue;
  color: white;
  line-height: 1;
  padding: 1em;
  padding: 0.4em 0.7em 0.4em 0.7em;
  border: 0;
  text-align: center;
  .transition;
  .border-radius;
  //box-shadow: 0 3px 0 @blue/1.2;
  
  &:hover, 
  &:focus {
    background: @grey;
    color: white;
  }
}

.btn.alt {
  background: @red;
  
  &:hover, 
  &:focus {
    background: @grey;
  }
}

.btn-border {
  background: none;
  border: 1px solid @blue;
  color: @blue;
  
  &:hover {
    background: @grey;
    border-color: @grey;
    color: @white;
  }
}

.btn-big {
  font-size: 1.5em;
}

.btn-small {
  font-size: .8em;
}

/*ELEMENTS *
-----------------------------------------------*/
.border-radius {
  border-radius: 3px;
}

.transition {
  	transition: all ease-out 300ms;	
}

hr {
  border: none;
  border-bottom: 3px solid @grey;
}

hr.big {
  border: none;
  border-bottom: 10px solid @grey;
}

/*FORMS *
-----------------------------------------------*/
form {
  margin-bottom: 1em;
  .border-radius;
  max-width: 400px;
  //margin: 0 auto;
  
  ul {
    margin: 0;
    padding: 0;
  }
  
  li {
    list-style: none;
  }
}

.field-wrapper {
  display: block;
  position:relative;
  margin-bottom: 0.25em;
}

::-webkit-input-placeholder {
   color: @grey;  
}

label.float-label {
    position:absolute;
    top:-13px;
    left:0;
    font-size:12px;
    color: @grey;
    .transition;
    opacity:0;
    font-weight:bold;
}

label.float-label.on {
  	color: @grey-dark;
}

label.float-label.show {
    top: -15px;
    opacity: 1;
}

select, textarea, input[type="text"], input[type="password"], input[type="file"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, .faux-file {
  display: inline-block;
  padding: 0 .4em 0 .4em;
  padding: .5em;
  vertical-align: middle;
  .border-radius;
  min-width: 50px;
  max-width: 550px;
  .transition;
}

textarea, input[type="text"], input[type="password"], input[type="file"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, .faux-file {
  width: 100%;
  min-height: 36px;
  border: 3px solid @grey;
  margin: 0 0 1em 0;
  
   &:hover {
    border: 3px solid @grey-dark;
  }

  &:focus {
    border: 3px solid @blue;
    outline: none;
  }
}

input, 
textarea {
  -webkit-appearance:none;
  curser: pointer;
}

textarea{
  	height: 150px;
}

input[type=submit] {
    .btn;
    .btn-big;
    border: none;
    cursor: pointer;
}

/*RADIO/CHECKBOX*/
input[type="radio"] + label,
input[type="checkbox"] + label {
  color: @black;   
  font-size: 1em;
  curser: pointer;
}

input[type="radio"],
input[type="checkbox"] {
  position:absolute;
  opacity:0;
  curser: pointer;
  .transition;

  &:hover, &:focus, &:hover + label, &:focus + label {
    border-color: @grey;
    color: @grey;
  }

  &:checked + label {
    color: black;
    position:relative;
  }
}

input[type="radio"] + label::before {
  content: '';
  width: 1em;
  height: 1em;
  margin-right: 0.125em;
  position: relative;
  top: 0.4em;
  display: inline-block;
  background-color: transparent;
  border-radius: 2em;
  border: 4px solid @grey;
}

input[type="checkbox"] + label::before {
  content: '';
  width: 20px;
  height: 20px;
  margin-right: 0.125em;
  position: relative;
  top: 0.25em;
  display: inline-block;
  background-color: @grey;
  border-radius: 5px;
}

input[type="checkbox"]:checked + label::after {
  content: '✔';
  	display: block;
  	position: absolute;
  	top: 0;
  	left: 4px;
  	width: 10px;
  	height: 10px;
  	color: #fff;
}

input[type="radio"]:checked + label::before {
  border-color: @grey;
}

input[type="radio"]:checked + label::after {
  content: '';
  width: .75em;
  height: .75em;
  position: absolute;
  top: .35em;
  left:.4em;
  display: inline-block;
  background-color: @grey;
  border-radius: 2em;
}

/*PAGINATION *
-----------------------------------------------*/
ul.page-numbers {
  margin: 0;
  padding: 0;
}

.pagination .page-numbers li {
  display: inline-block;
  width: 24px;
  height: 24px;
}

.pagination a, 
.pagination span {
  color: @white;
  background: @grey;
  display: inline-block;
  text-align: center;
  padding: 1px;
  width: 24px;
  height: 24px;
}

.pagination span.current, 
.pagination .active_page {
  background: @red;
}

.pagination a:hover, 
.page_navigation a:hover {
  background: @grey-light;
}

/*BACKGROUNDS *
-----------------------------------------------*/
[class*='bg-'] {
  padding: 2em;
}

.bg-red {
  background: @red;
  color: @white;
}

.bg-black {
  background: @black;
  color: @white;
}

.bg-grey {
  background: @grey-light;
}
              
            
!

JS

              
                //FLOAT LABEL FORM
$(function(){
	var onClass = "on";
	var showClass = "show";
	
	$("input,textarea").bind("checkval",function(){
		var label = $(this).parent().prev("label");
		if(this.value !== ""){
			label.addClass(showClass);
		} else {
			label.removeClass(showClass);
		}
	}).on("keyup",function(){
		$(this).trigger("checkval");
	}).on("focus",function(){
		$(this).parent().prev("label").addClass(onClass);
	}).on("blur",function(){
			$(this).parent().prev("label").removeClass(onClass);
	}).trigger("checkval");
});
              
            
!
999px

Console