<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--STYLES-->
        <link rel="stylesheet" href="styles.css">
        <!--RESPONSIVE-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--JAVASCRIPT-->
        <script defer src="script.js"></script>
    </head>
    <body>
        <header>
            <img src="images/header.jpg" width="100%" height="150px">
        </header>
            <nav class="menu">
                <button class="button" hidden onclick="toggle()"><img src="images/list.png"></img></button>
                <ul class="menu_list">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About me</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
      </body>
</html>
* {
  box-sizing: border-box;
}

body
{
  font-family: Verdana;
  margin: 0;
}
input, select, textarea, button
{
  font-family: inherit;
}

header
{
  margin: -3px;
}

.menu
{
    display: flex;
  }
ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li
{
  display: inline;
  margin: -3.5px;
}

a:link, a:visited {
  background-color: #353839;
  color: white;
  padding: 14px 97.9px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #555d50;
  font-size: 16px;

}
a:hover, a:active {
  background-color: #006400;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.