<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown Menu 01</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<span class="navigation__group">
<img class="icon" src="assets/message.svg" alt="Message">
<img class="icon" src="assets/notification.svg" alt="Notification">
<img class="profile" src="assets/joe-doe-profile.png" alt="Joe Doe Picture">
</span>
<div class="dropdown__wrapper hide dropdown__wrapper--fade-in none">
<div class="dropdown__group">
<div class="user-name">Joe Doe</div>
<div class="email">joe.doe@atheros.ai</div>
</div>
<hr class="divider">
<nav>
<ul>
<li>
<img src="assets/profile.svg" alt="Profile"> My Profile
</li>
<li>
<img src="assets/settings.svg" alt="Settings"> Settings
</li>
</ul>
<hr class="divider">
<ul>
<li>
<img src="assets/tutorials.svg" alt="Tutorials"> Tutorials
</li>
<li>
<img src="assets/help.svg" alt="Help"> Help Center
</li>
</ul>
<hr class="divider">
<ul>
<li>
<img src="assets/premium.svg" alt="Premium">Go Premium
</li>
<li style="color: #E3452F;">
<img src="assets/logout.svg" alt="Log Out">Log out
</li>
</ul>
</nav>
</div>
</header>
<script src="script.js"></script>
</body>
</html>