Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Monokai skin</title>
- <link rel="stylesheet" href="./task-2.css">
- </head>
- <body>
- <main class="container">
- <nav class="navigation">
- <ul class="nav-tabs">
- <li class="nav-item show-nav">Files</li>
- <li class="nav-item file-html">index.html</li>
- <li class="nav-item file-css">main.css</li>
- <li class="nav-item file-sass">main.scss</li>
- <li class="nav-item file-html">about.html</li>
- <li class="nav-item file-html">help.html</li>
- </ul>
- </nav>
- <code class="file-content">
- <ol class="code-lines">
- <li><span class="selector">#root</span> <span class="punctuation">{</span></li>
- <li><span class="property">width</span><span class="punctuation">:</span> <span class="value">960</span><span class="measure">px</span><span class="punctuation">;</span></li>
- <li><span class="property">margin</span><span class="punctuation">:</span> <span class="value">0</span> auto<span class="punctuation">;</span></li>
- <li><span class="property">font-size</span><span class="punctuation">:</span> <span class="value">18</span><span class="measure">px</span><span class="punctuation">;</span></li>
- <li><span class="property">background-color</span><span class="punctuation">:</span> #ccc<span class="punctuation">;</span></li>
- <li><span class="property">padding</span><span class="punctuation">:</span> <span class="value">15</span><span class="measure">px</span> <span class="value">0 0 0</span><span class="punctuation">;</span></li>
- <li><span class="punctuation">}</span></li>
- <li><span class="selector">.header</span> <span class="punctuation">{</span></li>
- <li><span class="property">font-size</span><span class="punctuation">:</span> <span class="value">1.7</span><span class="measure">em</span><span class="punctuation">;</span></li>
- <li><span class="property">text-align</span><span class="punctuation">:</span> center<span class="punctuation">;</span></li>
- <li><span class="punctuation">}</span></li>
- <li><span class="selector">.description</span> <span class="punctuation">{</span></li>
- <li><span class="property">margin</span><span class="punctuation">:</span> <span class="value">15</span><span class="measure">px</span> <span class="value">45</span><span class="measure">px</span><span class="punctuation">;</span></li>
- <li><span class="property">background-color</span><span class="punctuation">:</span> <span class="function">rgba</span><span class="punctuation">(</span><span class="value">102,102,102,0.8</span><span class="punctuation">)</span><span class="punctuation">;</span></li>
- <li><span class="property">padding</span><span class="punctuation">:</span> <span class="value">25</span><span class="measure">px</span> <span class="value">55</span><span class="measure">px</span><span class="punctuation">;</span></li>
- <li><span class="property">border-radius</span><span class="punctuation">:</span> <span class="value">15</span><span class="measure">px</span><span class="punctuation">;</span></li>
- <li><span class="property">border</span><span class="punctuation">:</span> <span class="value">3</span><span class="measure">px</span> solid #fff<span class="punctuation">;</span></li>
- <li><span class="punctuation">}</span></li>
- <li><span class="selector">.remark</span> <span class="punctuation">{</span></li>
- <li><span class="property">text-align</span><span class="punctuation">:</span> center<span class="punctuation">;</span></li>
- <li><span class="punctuation">}</span></li>
- <li><span class="selector">.container</span> <span class="punctuation">{</span></li>
- <li><span class="property">padding</span><span class="punctuation">:</span> <span class="value">15</span><span class="measure">px</span><span class="punctuation">;</span></li>
- <li><span class="punctuation">}</span></li>
- <li><span class="selector">.heroes-list</span> <span class="punctuation">{</span></li>
- <li><span class="property">list-style-type</span><span class="punctuation">:</span> none<span class="punctuation">;</span></li>
- <li><span class="punctuation">}</span></li>
- <li><span class="selector">.heroes-list .hero-item</span> <span class="punctuation">{</span></li>
- <li><span class="property">display</span><span class="punctuation">:</span> inline-block<span class="punctuation">;</span></li>
- <li><span class="property">width</span><span class="punctuation">:</span> <span class="value">24</span><span class="measure">%</span><span class="punctuation">;</span></li>
- <li><span class="punctuation">}</span></li>
- <li><span class="selector">.heroes-list .hero-item h2</span> <span class="punctuation">{</span></li>
- <li><span class="property">font-size</span><span class="punctuation">:</span> <span class="value">1.1</span><span class="measure">em</span><span class="punctuation">;</span></li>
- <li><span class="property">text-align</span><span class="punctuation">:</span> center<span class="punctuation">;</span></li>
- <li><span class="punctuation">}</span></li>
- </ol>
- </code>
- </main>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement