My First Navbar using Flexbox

wild-web-dev's photo
wild-web-dev

I learnt flexbox and this is navbar I have created. looks alright however, will keep improving.

<style>
* {
  box-sizing: border-box;
}
body {
  font-size: 22px;
  color: white;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  /* justify-content: center; */
  background-color: black;
  width: 100%;
  margin-top: 20px;
  color: white;
}

ul li a {
  text-decoration: none;
  color: #fff;
  /* cursor:pointer; */
  padding: 10px 15px;
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.2em;
  background: #222;
}
ul li a:hover {
  background: #444;
}

@media only screen and (max-width: 760px) {
  ul {
    flex-direction: column;
  }
}
</style>
<body>
    <header>
    <!-- <h2><a href="#">Wild-Web-Dev</a></h2> -->
    <nav>
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    </nav>
</header>
</body>
css flexboxCSS