<pre class="brush:html hljs xml"><code><span class="hljs-tag"><<span class="hljs-title">section</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"section section–menu"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"Prospero"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">h2</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"section__title"</span>></span>Prospero<span class="hljs-tag"></<span class="hljs-title">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-title">nav</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu menu–prospero"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__list"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__item menu__item–current"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__link"</span>></span>Home<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__item"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__link"</span>></span>Who we are<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__item"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__link"</span>></span>What we offer<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__item"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__link"</span>></span>Our news<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__item"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"menu__link"</span>></span>Contact us<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-title">nav</span>></span>
<span class="hljs-tag"></<span class="hljs-title">section</span>></span></code></pre>
<pre class="brush:css hljs css"><code><span class="hljs-class">.menu</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">1</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span> auto <span class="hljs-number">3em</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.menu__list</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> relative</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> -webkit-flex</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> flex</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">-webkit-flex-wrap</span>:<span class="hljs-value"> wrap</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">flex-wrap</span>:<span class="hljs-value"> wrap</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">list-style</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.menu__item</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> block</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">1em</span> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.menu__link</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">1.05em</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-weight</span>:<span class="hljs-value"> bold</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> block</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">1em</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">cursor</span>:<span class="hljs-value"> pointer</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">-webkit-user-select</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">-moz-user-select</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">-ms-user-select</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">user-select</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">-webkit-touch-callout</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">-khtml-user-select</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">-webkit-tap-highlight-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>)</span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.menu__link</span><span class="hljs-pseudo">:hover</span>,
<span class="hljs-class">.menu__link</span><span class="hljs-pseudo">:focus</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">outline</span>:<span class="hljs-value"> none</span></span>;
<span class="hljs-rule">}</span></span></code></pre>
<pre class="brush:css hljs css"><code><span class="hljs-comment">/* Prospero */</span>
<span class="hljs-class">.menu–prospero</span> <span class="hljs-class">.menu__link</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> relative</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> block</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span> <span class="hljs-number">1.5em</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0.75em</span> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#b5b5b5</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transition</span>:<span class="hljs-value"> color <span class="hljs-number">0.3s</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.menu–prospero</span> <span class="hljs-class">.menu__link</span><span class="hljs-pseudo">:hover</span>,
<span class="hljs-class">.menu–prospero</span> <span class="hljs-class">.menu__link</span><span class="hljs-pseudo">:focus</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#929292</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.menu–prospero</span> <span class="hljs-class">.menu__item–current</span> <span class="hljs-class">.menu__link</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#d94f5c</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.menu–prospero</span> <span class="hljs-class">.menu__link</span><span class="hljs-pseudo">::before</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">content</span>:<span class="hljs-value"> <span class="hljs-string">''</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> absolute</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">bottom</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">4px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#d94f5c</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>)</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transition</span>:<span class="hljs-value"> transform <span class="hljs-number">0.1s</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-class">.menu–prospero</span> <span class="hljs-class">.menu__item–current</span> <span class="hljs-class">.menu__link</span><span class="hljs-pseudo">::before</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">scale3d</span>(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>)</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transition-timing-function</span>:<span class="hljs-value"> <span class="hljs-function">cubic-bezier</span>(<span class="hljs-number">0.4</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.2</span>, <span class="hljs-number">1</span>)</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">transition-duration</span>:<span class="hljs-value"> <span class="hljs-number">0.3s</span></span></span>;
<span class="hljs-rule">}</span></span></code></pre>
