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: card formatting and colors

Browse source
This commit is contained in:
Smigz 2023-11-15 20:48:07 -05:00
parent f776b33aa1
commit 42b67d64d8
2 changed files with 192 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,10 @@
:root {
--dark-bg: #222222;
--light-bg: #F3EEEA;
--dark-bg-color-2: #EBE3D5;
}
* {
margin: 0;
padding: 0;
@ -6,21 +13,49 @@
.container {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100vh;
}
.sidebar {
grid-row: 1 / 3;
background-color: var(--dark-bg);
color: var(--light-bg);
}
.navbar ul {
grid-column: 1 / 2;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(30px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(60px, 1fr));
justify-content: center;
gap: 20px;
}
.navbar ul>a>h1 {
display: flex;
align-items: center;
gap: 1.3rem;
font-size: 2rem;
}
.topbar-header > [class="material-symbols-outlined"] {
font-size: 40px;
}
.navbar ul>a>li {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.2rem;
padding: 5px;
margin-left: 10px;
}
.topbar {
grid-row: 1 / 2;
grid-column: 1 / 3;
grid-row: 1 / 1;
grid-column: 2 / 3;
min-height: 100px;
}
.topbar ul {
@ -28,17 +63,15 @@
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
.topbar h1 {
margin-bottom: 50px;
justify-self: center;
}
.content {
background-color: var(--dark-bg-color-2);
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(325px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(330px, 1fr));
gap: 5px;
padding: 20px;
}
@ -46,10 +79,23 @@
word-wrap: wrap;
width: 300px;
height: 300px;
padding: 20px;
}
.card h1 {
font-size: 1.5rem;
margin-bottom: 6px;
}
.card p {
font-size: 0.9rem;
padding: 8px;
}
.card-icons {
margin: 5px;
display: flex;
justify-content: flex-end;
}
@ -59,4 +105,11 @@ ul {
body {
font-size: 16px;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}

186
admin-dashboard/index.html
View file

@ -1,129 +1,203 @@
<!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="stylesheet" href="css/style.css">
<title>Admin Dashboard</title>
</head>
<body>
<div class="container">
<header>
<div class="topbar">
<ul>
<li>New</li>
<li>Upload</li>
<li>Share</li>
</ul>
</div>
</header>
<div class="sidebar">
<nav class="navbar">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
<li>History</li>
<li>Tasks</li>
<li>Settings</li>
<li>Support</li>
<li>Privacy</li>
<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>
<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="topbar">
<ul>
<h1 class="topbar-header">Dashboard</h1>
<li>New</li>
<li>Upload</li>
<li>Share</li>
</ul>
</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.
Proin tincidunt ornare tortor, vitae tincidunt quam tincidunt vel. Cras varius bibendum bibendum.
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.
Proin tincidunt ornare tortor, vitae tincidunt quam tincidunt vel. Cras varius bibendum bibendum.
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.
Proin tincidunt ornare tortor, vitae tincidunt quam tincidunt vel. Cras varius bibendum bibendum.
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.
Proin tincidunt ornare tortor, vitae tincidunt quam tincidunt vel. Cras varius bibendum bibendum.
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.
Proin tincidunt ornare tortor, vitae tincidunt quam tincidunt vel. Cras varius bibendum bibendum.
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.
Proin tincidunt ornare tortor, vitae tincidunt quam tincidunt vel. Cras varius bibendum bibendum.
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.
Proin tincidunt ornare tortor, vitae tincidunt quam tincidunt vel. Cras varius bibendum bibendum.
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.
Proin tincidunt ornare tortor, vitae tincidunt quam tincidunt vel. Cras varius bibendum bibendum.
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.
Proin tincidunt ornare tortor, vitae tincidunt quam tincidunt vel. Cras varius bibendum bibendum.
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.
Proin tincidunt ornare tortor, vitae tincidunt quam tincidunt vel. Cras varius bibendum bibendum.
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>
<script src="js/script.js"></script>
</body>
</html>