HTML
<img src="https://goo.gl/FHsYM7" class="trump" alt="trump" />
<pre class="code">
<span class="ln slector">.body {</span> <span class="property">color</span>: <span class="value">orange</span>;<span> }</span>
<span class="ln"></span>
<span class="ln slector">#usa {</span> <span class="property">border-bottom</span>: <span class="value">16000px solid grey</span>;<span> }</span>
<span class="ln"></span>
<span class="ln slector">.muslims {</span> <span class="property">display</span>: <span class="value">none <span class="important">!important</span></span>;<span > }</span>
<span class="ln"></span>
<span class="ln slector">.women {</span> <span class="property">font-size</span>: <span class="value">xx-small</span>;<span> }</span>
<span class="ln"></span>
<span class="ln slector">.migrants--undocumented {</span>
<span class="ln property">position</span>: <span class="value">relative</span>;
<span class="ln property">bottom</span>: <span class="value">-2000000px</span>;
<span class="ln">}</span>
<span class="ln"></span>
<span class="ln slector">.press {</span> <span class="property">speak</span>: <span class="value">none</span>;<span> }</span>
<span class="ln"></span>
<span class="ln slector">.policies {</span> <span class="property">perspective</span>: <span class="value">none</span>;<span> }</span>
<span class="ln"></span>
<span class="ln slector">#usa:after {</span> <span class="property">content</span>: <span class="value">'absolutely ruined'</span>;<span> }</span>
</pre>
SCSS
// Colors
$bg-color: #333;
$selector-color: #c7d3de;
$property-color: #f39c12;
$value-color: #1abc9c;
$important: #e74c3c;
$bg: linear-gradient(to left, #DE6262 , #FFB88C);
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: $bg;
}
.trump { height: 340px; }
.important { color: $important; }
.selector { color: $selector-color; }
.property { color: $property-color; }
.value { color: $value-color; }
.code {
background: $bg-color;
border-radius: 3px;
box-shadow: 0 10px 20px rgba(0,0,0,0.4);
border-left: 6px solid lighten($bg-color, 20%);
width: 700px;
margin: 0;
white-space: pre-wrap;
padding: 20px 20px 20px 50px;
color: $selector-color;
counter-reset: step;
counter-increment: step 0;
position: relative;
.ln {
line-height: 1.2em;
&:before {
color: lighten($bg-color, 20%);
position: absolute;
left: 15px;
content: counter(step);
counter-increment: step;
}
}
}
1 Response