<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.