A CodePen by Tim Pietrusky. coderwall Logo - Just the [coderwall.com](http://coderwall.com) logo. The font used in the original Logo is **ITC Avant Garde Gothic bold** but this font is not available as a free webfont. So I used some font-familys which are close to the real font. 2012 by Tim Pietrusky [timpietrusky.com](http://timpietrusky.com)

index.html

<h1>coderwall</h1>

script.js

/**
  coderwall Logo
  
  # What? #
  Just the coderwall.com logo.


  # 2012 by Tim Pietrusky
  # timpietrusky.com
**/

style.css

body {
  background:#343131;
  margin:5em 0;
}

h1 {
  position:relative;
  color:#fff;
  font:bold 4em  "Avant Garde", "URW Gothic L", "Century Gothic", sans serif;
  letter-spacing: -.01em;
  text-shadow: 0 -.015em .05em rgba(0, 0, 0, .7);
  
  width:50px;
  height:5px;
  margin:0 auto;
  padding:0 2.25em 0 0;
}

h1:before {
  position:absolute;
  top:-.3em;
  left:-1.95em;
  
  width:3em;
  height:2em;
  content:'';
  background:
    /* 
     * blue dots 
     */
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    
    /*
     * shadow dots
     */
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%),
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%),
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%),
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%),
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%),
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%)  
;
  
  background-size:1em 1em;
  background-repeat:no-repeat;
  
  background-position:
    /*
     * blue dots
     */
    /* right */
    1em 1em,
    1em .5em,
    1em 0,
    
    /* middle */
    .5em .5em,
    .5em 0,
    
    /* left */
    0 0,
    
    
    /*
     * shadow dots
     */ 
    /* right */
    1em .985em,
    1em .485em,
    1em -.025em,
    
    /* middle */
    .5em .485em,
    .5em -.025em,
    
    /* left */
    0 -.025em
  ;
}