<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown Menu 02</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>
<div class="navigation__group">
<div class="icon-wrapper">
<img class="icon" src="assets/message.svg" alt="Message">
</div>
<div class="icon-wrapper notifications">
<img class="icon" src="assets/notification.svg" alt="Notification">
<div class="notification-mark notification-mark--pulsing"></div>
</div>
<img class="profile" src="assets/joe-doe-profile.png" alt="Joe Doe Picture">
</div>
<div class="dropdown__wrapper hide dropdown__wrapper--fade-in none">
<div class="notifications-top">
<h2>Notifications</h2>
</div>
<div class="notification-items">
<div class="notification-item notification-item--recent">
<div class="avatar-wrapper">
<img class="avatar" src="assets/jason.jpg" alt="Jason Alexander">
<div class="notification-mark"></div>
</div>
<div class="notification-item__body">
<div>
<strong>Jason Alexander</strong> completed <strong>Issue 131</strong>
</div>
<time>
6 min ago
</time>
</div>
<div class="border"></div>
</div>
<div class="notification-item notification-item--recent">
<div class="avatar-wrapper">
<img class="avatar" src="assets/michelle.jpg" alt="Michelle Claude">
<div class="notification-mark"></div>
</div>
<div class="notification-item__body">
<div>
<strong>Michelle Claude</strong> opened a new <strong>Issue 152</strong>
</div>
<time>
8 min ago
</time>
</div>
</div>
<div class="notification-item">
<div class="avatar-wrapper">
<img class="avatar" src="assets/ricahrd_taylor.jpg" alt="Richard Taylor">
</div>
<div class="notification-item__body">
<div>
<strong>Richard Taylor</strong> edited <strong>Road Map 2023</strong>
</div>
<time>
1 week ago
</time>
</div>
</div>
<div class="notification-item">
<div class="avatar-wrapper">
<img class="avatar" src="assets/jennifer.jpg" alt="Jennifer Floyd">
</div>
<div class="notification-item__body">
<div>
<strong>Jennifer Floyd</strong> created <strong>Road Map 2023</strong>
</div>
<time>
1 week
</time>
</div>
</div>
</div>
</div>
</header>
<script src="script.js"></script>
</body>
</html>