smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-04-18 15:31:17 -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
Show stats Download patch file Download diff file Expand all files Collapse all files

83
admin-dashboard/css/style.css
View file

@ -1,8 +1,10 @@
:root {
--dark-bg: #222222;
--light-bg: #F3EEEA;
--dark-bg: #2C3639;
--light-bg: #DCD7C9;
--dark-bg-color-2: #EBE3D5;
--content-color: #FAF6F0;
--card-color: #B0A695;
}
* {
@ -13,7 +15,6 @@
.container {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100vh;
}
.sidebar {
@ -22,12 +23,12 @@
color: var(--light-bg);
}
.navbar ul {
.navbar {
grid-column: 1 / 2;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(60px, 1fr));
justify-content: center;
gap: 20px;
gap: 40px;
}
.navbar ul>a>h1 {
@ -37,6 +38,9 @@
font-size: 2rem;
}
.topbar-header {
margin: 12px 0;
}
.topbar-header > [class="material-symbols-outlined"] {
font-size: 40px;
@ -46,48 +50,83 @@
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.2rem;
font-size: 1.4rem;
padding: 5px;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
}
.topbar {
background-color: var(--dark-bg-color-2);
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
grid-row: 1 / 1;
grid-column: 2 / 3;
min-height: 100px;
margin: 20px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.topbar ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
padding: 20px;
display: flex;
justify-content: flex-start;
gap: 20px;
margin-left: 10px;
}
.topbar .user-info {
margin-right: 20px;
align-self: center;
}
.user-info {
display: flex;
justify-content: center;
gap: 20px;
}
.user-info img {
height: 2.2rem;
border: 2px #2C3639 solid;
border-radius: 50%;
}
.user-info span {
font-size: 2.2rem;
}
.content-header {
margin-left: 20px;
margin-top: 20px;
}
.content {
background-color: var(--dark-bg-color-2);
.cards {
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(330px, 1fr));
row-gap: 15px;
column-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
padding: 20px;
gap: 20px;
}
.card {
word-wrap: wrap;
width: 300px;
height: 300px;
min-width: 300px;
padding: 20px;
background-color: var(--light-bg);
border-radius: 5%;
border-radius: 2%;
background-color: var(--card-color);
}
.card h1 {
font-size: 1.5rem;
margin-bottom: 6px;
text-align: left;
padding: 8px;
}
.card p {
@ -107,12 +146,14 @@ ul {
}
body {
font-family: 'Fira Sans', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
background-color: var(--light-bg);
}
a {
text-decoration: none;
color: inherit;
}
}

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>

BIN
admin-dashboard/static/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 261 KiB