Example Block for "From Plebein Web User to Noble Web Artisan"

dabblet.css

/**
 * Example Block for "From Plebein Web User to Noble Web Artisan"  
 */
.example-block {
	border: 3px solid gold;
	border-radius: 5px;
	box-shadow: 0 0 15px maroon;
	padding: 15px;
	position: relative;
	width: 500px;
}
.example-block::after {
	bottom: 0;
	color: gold;
	content: '†';
	font-size: 64pt;
	position: absolute;
	right: 25px;
	transform: rotate(180deg);
    text-stroke: 1px #611;
}
.example-title {
	margin: 0;
}
.code-block {
	background-color: #314043;
	color: #FFFFFF;	
	margin: 0;
	overflow: auto;
}
.code-keyword {
	color: #EE5E91;
}
.code-attribute {
	color: #9AD74C;
}
.code-entity {
	color: #FCFCC4;
}
.code-value {
	color: #;
}

dabblet.html

<div class="example-block">
	<h4 class="example-title">A simple example of the usage of the paragraph and quote tags:</h4>
	<pre class="code-block">
&lt;<span class="code-keyword">p</span>&gt;
    Ozymandias:
    &lt;<span class="code-keyword">q</span>&gt;My name is Ozymandias, king of kings: Look on my works, ye Mighty, and despair!&lt;/<span class="code-keyword">q</span>&gt;
&lt;/<span class="code-keyword">p</span>&gt;
	</pre>
	<dl>
		<dt>Paragraph tag &lt;p&gt;</dt>
		<dd>Used to represent paragraphs</dd>
		<dt>Quote tag &lt;q&gt;</dt>
		<dd>Used to represent quotes</dd>
	</dl>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}