Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
    body{
      margin: 0%;
    }
    .topnav {
    background-color: whitesmoke;
    overflow: hidden;
    }
    .topnav a {
    float: right;
    color: green;
    text-align: center;
    padding: 15px 18px;
    text-decoration: none;
    font-size: 17px;
    }
    .topnav a:hover {
      background-color: aquamarine;
      color: black;
    }
    .topnav a.active {
    background-color: whitesmoke;
    color:green;
    }
    form {
      background-color:black;
      width: 200px;
      height: 44px;
      border-radius: 5px;
      display: right;
      flex-direction: row;
      align-items: center;
    }
    input {
    all: unset;
    font: 16px;
    color: #fff;
    height: 100%;
    width: 100%;
    padding: 6px 10px;
    }
    ::placeholder {
      color: #fff;
      opacity: 0.7;
    }
    button {
      color: #fff;
      cursor: pointer;
      width: 24px;
      height: 24px;
      padding: 10px;
    }
    </style>
  </head>
  <body>
    <div class="topnav">
      <a class="active"
       href="#Quiz">Quiz</a>
        <a href="#Contact">Contact</a>
        <a href="#Shop">Shop</a>
        <a href="#Blog">Blog</a> 
        <h2>nathairdiva</h2>
      </div>
      <form id="form" role="search">
        <input type="search" id="query" name="q"
        placeholder="search..." aria-label="search through content">
        <button>search</button>
      </form>
  </body>
</html>
Editor is loading...