smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-06-30 16:29:08 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: finished topbar

Browse source
This commit is contained in:
Smigz 2023-11-17 00:20:44 -05:00
parent 444638cf6c
commit 1e20f93a68
3 changed files with 235 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

314
admin-dashboard/index.html
View file

@ -5,6 +5,13 @@
<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>
@ -13,11 +20,19 @@
<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">
@ -41,6 +56,9 @@
<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>
@ -53,148 +71,162 @@
</ul>
</nav>
</div>
<div class="content">
<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 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>