Getting initial to work at the top of the code?

HTML & CSS
174

Ignoring the empty links I would start with html that looks like this.

<div class="wrap">
  <h1 class="title">Links</h1>
  <ul class="nav">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
  <audio></audio>
  <div class="playButtone" data-audio="http://hi5.1980s.fm/;"> 
   <svg class="playe" focusable="false" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      <title>PLAY</title>
    </path>
    </svg> <svg class="pausee hidee" focusable="false" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      <title>PAUSE</title>
    </path>
    </svg> 
   </div>
</div>

The h1.title assumes this is just the only one on the page otherwise a heading of suitable rank would need to be used.

CSS to follow in a minute:

Of course the JS will also need to be refactored to account for the changes.

1 Like