<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <header>
    <img class="logo" src="https://images.unsplash.com/photo-1651772939278-42e1e1f0d4e2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzY3ODM&ixlib=rb-1.2.1&q=80&w=400" alt="logo">

    <nav class="nav">
      <div class="dropdown">
        <a href="#" class="link">Information</a>
        <div class="dropdown-menu">Dropdown Content</div>
      </div>
      <a href="#" class="link">Pricing</a>
      <a href="#" class="link">Login</a>
      <a href="#" class="link" id="signup">Sign Up</a>
    </nav>
  </header>
</body>
body {
  margin: 0;
}

header {
  background-color: rgb(212, 209, 209);
  display: flex;
  flex-wrap: wrap; /* so navbar will go under logo on small smartphones */
  align-items: baseline;
  padding: 16px 5%;
  justify-content: space-between;
}

.logo {
  width: 200px;
  cursor: pointer;
}

.nav {
  display: flex;
  flex-wrap: wrap; /* so 'Sign Up' will go under other navbar links on small smartphones */
  gap: 1rem;
}

.link {
  background: none;
  border: none;
  text-decoration: none;
  color: #777;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
}

.link:hover {
  color: black;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
}

@keyframes sign {
  0% {
    color: red;
  }
  49.99% {
    color: red;
  }
  50% {
    color: green;
    transform: translateY(-10px);
  }
  100% {
    color: green;
    transform: translateY(0px);
  }
}

#signup {
  animation: sign 2s infinite;
  font: bold 1.3rem sans-serif;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.