Ajax Loader
HTML
<dl class="window-body code">
1
<dl class="window-body code">
2
  <dt>Pretty-Print Code Snippets</dt>
3
  <dd class="nano">
4
<pre class="prettyprint" style="border:none;margin-top:-20px;"><code>
5
&lt;!DOCTYPE html&gt;
6
&lt;head&gt;
7
  &lt;meta charset="utf-8"&gt;
8
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
9
  &lt;title&gt;Notepad&lt;/title&gt;
10
  &lt;!--[if lt IE 9]&gt;&lt;script src="//html5shim.googlecode.com/svn/trunk/html5.js"&gt;
11
&lt;/script&gt;&lt;![endif]--&gt;
12
&lt;/head&gt;
13
&lt;body&gt;
14
  &lt;div class="notepad"&gt;
15
    &lt;div class="notepad-heading"&gt;
16
      &lt;h1&gt;Code Snippest&lt;/h1&gt;
17
    &lt;/div&gt;
18
    &lt;blockquote&gt;
19
      The essence of the independent mind lies not in what it thinks, 
20
but in how it thinks.
21
    &lt;/blockquote&gt;
22
 
23
  &lt;/div&gt;
24
&lt;/body&gt;
25
&lt;/html&gt;
26
</code></pre>
27
  </dd>
28
</dl>
29
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
30
 
 
CSS
dl, dt, dd{margin: 0;
1
dl, dt, dd{margin: 0;
2
  padding: 0;
3
  border: 0;
4
  font-size: 100%;
5
  /* font: inherit; */
6
  vertical-align: baseline;
7
}
8
.window-body { 
9
  font-family: 'Roboto', sans-serif;
10
  color: #FFF;
11
  font-weight: bold;
12
  text-shadow: 0 0 1px rgba(0,0,0,0.5);
13
  margin: 20px;
14
  overflow: hidden;
15
  box-shadow: 4px 6px 10px 0 rgba(0,0,0,0.5);
16
  border-top-left-radius:0.5em;
17
  border-top-right-radius:0.5em;
18
}
19
.window-body dt {
20
  font-size: 18pt;
21
  padding: 8px 12px;
22
  margin-bottom: 8px;
23
  background-color: rgba(0,0,0,0.1);
24
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
25
}
26
.window-body dd {
27
  font-size: 8pt;
28
  line-height: 1.8em;
29
  padding: 0 15px 15px;
30
}
31
.window-body.code { 
32
  color:#000;
33
  background-color: #10618F;
34
  background: url('data:image/jpeg;base64,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') no-repeat ;
35
  background-position:center center;
36
}
37
.window-body.code dt { font-size: 15pt; }
38
.window-body.code dd { overflow: auto;font-size: 10pt; }
39
.window-body.code pre { font-weight: normal; }
 

Stylish - Google Code Prettify

CSSDeck G+