<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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=Fira+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Admin Dashboard</title>
</head>
<body>
<div class="container">
<header>
<div class="topbar">
<div class="links">
<ul>
<li>New</li>
<li>Upload</li>
<li>Share</li>
</ul>
</div>
<div class="user-info">
<span class="material-symbols-outlined">
notifications_unread
</span>
<img src="static/logo.png" alt="">
</div>
</div>
</header>
<div class="sidebar">
<nav class="navbar">
<ul>
<a href="#">
<h1 class="topbar-header"><span class="material-symbols-outlined">dashboard</span>Dashboard</h1>
</a>
<a href="#">
<li><span class="material-symbols-outlined">home</span>Home</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">shield_locked</span>Profile</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">chat</span>Messages</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">manage_history</span>History</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">task</span>Tasks</li>
</a>
</ul>
<ul>
<a href="#">
<li><span class="material-symbols-outlined">settings</span> Settings</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">help</span>Support</li>
</a>
<a href="#">
<li><span class="material-symbols-outlined">security</span>Privacy</li>
</a>
</ul>
</nav>
</div>
<div class="content">
<h1 class="content-header">User stories</h1>
<div class="cards">
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
<div class="card">
<h1 class=title>Some important Stuff!</h1>
<p class="text">
Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec
nec
ante dictum, hendrerit dui id, mattis arcu.
In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum
mauris at,
placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="card-icons">
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">more_vert</span>
</div>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>