smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-25 14:10:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
odin-codespace/admin-dashboard/index.html
Smig eb98c77d0d
Admin dashboard (#5) 
* feat: base html/css

* feat: aligment and setting up grids

* fix: update titles

* feat: card formatting and colors

* feat: add bg colors/border radius

* feat: finished topbar
2023-11-17 09:16:25 -05:00

235 lines
No EOL
12 KiB
HTML
Raw Permalink Blame History

<!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>
Reference in a new issue View git blame Copy permalink