<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1, minimum-scale=1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
            <span class="token selector">body</span> <span class="token punctuation">{</span>
                <span class="token property">min-height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
                <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
                <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 200px 1fr<span class="token punctuation">;</span>
                <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">'appbar appbar'</span>
                                     <span class="token string">'navbar content'</span>
                                     <span class="token string">'footer footer'</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">body > *</span> <span class="token punctuation">{</span>
                <span class="token property">border</span><span class="token punctuation">:</span> solid 2px green<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">header</span> <span class="token punctuation">{</span>
                <span class="token property">grid-area</span><span class="token punctuation">:</span> appbar<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">nav</span> <span class="token punctuation">{</span>
                <span class="token property">grid-area</span><span class="token punctuation">:</span> navbar<span class="token punctuation">;</span>
                <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
                <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">nav a</span> <span class="token punctuation">{</span>
                <span class="token property">margin</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">main</span> <span class="token punctuation">{</span>
                <span class="token property">grid-area</span><span class="token punctuation">:</span> content<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">footer</span> <span class="token punctuation">{</span>
                <span class="token property">grid-area</span><span class="token punctuation">:</span> footer<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
                <span class="token selector">body</span> <span class="token punctuation">{</span>
                    <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr<span class="token punctuation">;</span>
                    <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">'appbar'</span>
                                         <span class="token string">'navbar'</span>
                                         <span class="token string">'content'</span>
                                         <span class="token string">'footer'</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">></span></span>My super cool responsive app<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About the developers<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Buy lootboxes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Upgrade to pro!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
                Capitalize on low hanging fruit to identify a ballpark value added activity
                to beta test. Override the digital divide with additional clickthroughs from
                DevOps. Nanotechnology immersion along the information highway will close the
                loop on focusing solely on the bottom line.
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
                Podcasting operational change management inside of workflows to establish a
                framework. Taking seamless key performance indicators offline to maximise
                the long tail. Keeping your eye on the ball while performing a deep dive on
                the start-up mentality to derive convergence on cross-platform integration.
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">></span></span>
            Copyright 2019. Every single right reserved. Don't try anything
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>