Trump CSS

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; } } }
JAVASCRIPT
Expand for more options Login