<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Menu styling</title>
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="menu-wrapper">
   <header>
      <h1>Menu styling</h1>
      <p>Same structure different styling</p>
   </header>


   <h3>Menu 1</h3>
   <nav class="menu1">
      <ul>
         <li class="active"><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>




   <br>




   <h3>Menu 2</h3>
   <nav class="menu2">
      <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li class="active"><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>
   <br>






   <h3>Menu 3</h3>
   <nav class="menu3">
      <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li class="active"><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>



   <br>

   <h3>Menu 4</h3>
   <nav class="menu4">
      <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li class="active"><a href="">Contact</a></li>
      </ul>
   </nav>


   <br>




   <h3>Menu 5</h3>
   <nav class="menu5">
      <ul>
         <li><a href="">Home</a></li>
         <li class="active"><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>




   <br>

   
   <h3>Menu 6</h3>
   <nav class="menu6">
      <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li class="active"><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>




<br>


   <h3>Menu 7</h3>
   <nav class="menu7">
      <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li class="active"><a href="">Contact</a></li>
      </ul>
   </nav>

<br>




   <h3>Menu 8</h3>
   <nav class="menu8">
      <ul>
         <li class="active"><a href="">Home</a></li>
         <li><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>



   <br>




   <h3>Menu 9</h3>
   <nav class="menu9">
      <ul>
         <li><a href="">Home</a></li>
         <li class="active"><a href="">Articles</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
      </ul>
   </nav>



   <br>

   <h3>Menu 10</h3>
   <nav class="menu10">
      <ul>
         <li class="active1"><a href="">Home</a></li>
         <li class="active2"><a href="">Articles</a></li>
         <li class="active3"><a href="">About</a></li>
         <li class="active4"><a href="">Contact</a></li>
      </ul>
   </nav>


   <br>
   

   <h3>Menu 11</h3>
   <nav class="menu11">
      <ul>
         <li><a href=""><img src="materialer-til-menu-styling/icon_home.png" alt=""></a></li>
         <li><a href=""><img src="materialer-til-menu-styling/icon_articles.png" alt=""></a></a></li>
         <li><a href=""><img src="materialer-til-menu-styling/icon_about.png" alt=""></a></a></li>
         <li><a href=""><img src="materialer-til-menu-styling/icon_contact.png" alt=""></a></a></li>
      </ul>
   </nav>   
</div>
   
</body>
</html>