Added README, modified icon spacing in sidebar, changed user pic
This commit is contained in:
parent
8041578af2
commit
204a5c2832
|
|
@ -0,0 +1,8 @@
|
|||
# odin-admin-dashboard
|
||||
|
||||
A generic dashboard made using grid and flex
|
||||
|
||||
This project uses [CSS Nesting](https://caniuse.com/?search=nesting)
|
||||
|
||||
# Outcome
|
||||
|
||||
58
index.html
58
index.html
|
|
@ -11,21 +11,51 @@
|
|||
<body>
|
||||
<div id="container">
|
||||
<div id="sidebar">
|
||||
<span id="title">
|
||||
<div id="title" class="split">
|
||||
<i class="fa-solid fa-house"></i>
|
||||
<h1>Home</h1>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li><i class="fa-solid fa-message"></i> Messages</li>
|
||||
<li><i class="fa-solid fa-list-check"></i> Tasks</li>
|
||||
<li><i class="fa-solid fa-person"></i> Profile</li>
|
||||
<li><i class="fa-solid fa-timeline"></i> History</li>
|
||||
<li>
|
||||
<div class="split">
|
||||
<i class="fa-solid fa-message"></i>
|
||||
<span class="text">Messages</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="split">
|
||||
<i class="fa-solid fa-list-check"></i>
|
||||
<span class="text">Tasks</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="split">
|
||||
<i class="fa-solid fa-user"></i>
|
||||
<span class="text">Profile</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="split">
|
||||
<i class="fa-solid fa-timeline"></i>
|
||||
<span class="text">History</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li><i class="fa-solid fa-gear"></i> Settings</li>
|
||||
<li><i class="fa-solid fa-circle-info"></i> Help</li>
|
||||
<li>
|
||||
<div class="split">
|
||||
<i class="fa-solid fa-gear"></i>
|
||||
<span class="text">Settings</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="split">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
<span class="text">Help</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="header">
|
||||
|
|
@ -35,11 +65,11 @@
|
|||
</div>
|
||||
<div id="profile">
|
||||
<i class="fa-regular fa-bell"></i>
|
||||
<img src="desired-result.png" alt="">
|
||||
<img src="user.svg" alt="">
|
||||
<span id="name">Tony Kowalski</span>
|
||||
</div>
|
||||
<div id="welcome">
|
||||
<img src="desired-result.png" alt="">
|
||||
<img src="user.svg" alt="">
|
||||
<div id="text">
|
||||
<span id="hi">Hi there,</span>
|
||||
<span id="person">Tony Kowalski (@tkowal)</span>
|
||||
|
|
@ -124,28 +154,28 @@
|
|||
</div>
|
||||
<div id="trending">
|
||||
<div class="trend">
|
||||
<img src="" alt="">
|
||||
<img src="user.svg" alt="">
|
||||
<div id="text">
|
||||
<h4>@account</h4>
|
||||
<span id="description">Very cool account page</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trend">
|
||||
<img src="" alt="">
|
||||
<img src="user.svg" alt="">
|
||||
<div id="text">
|
||||
<h4>@account</h4>
|
||||
<span id="description">Very cool account page</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trend">
|
||||
<img src="" alt="">
|
||||
<img src="user.svg" alt="">
|
||||
<div id="text">
|
||||
<h4>@account</h4>
|
||||
<span id="description">Very cool account page</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trend">
|
||||
<img src="" alt="">
|
||||
<img src="user.svg" alt="">
|
||||
<div id="text">
|
||||
<h4>@account</h4>
|
||||
<span id="description">Very cool account page</span>
|
||||
|
|
|
|||
73
style.css
73
style.css
|
|
@ -21,11 +21,16 @@
|
|||
#title {
|
||||
font-size: 2.2rem;
|
||||
margin: 20px 0 0 20px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
h1 {
|
||||
display: inline-block;
|
||||
&.split {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
i {
|
||||
flex: 0 0 50px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
|
|
@ -34,14 +39,23 @@
|
|||
font-weight: bold;
|
||||
i {
|
||||
position: relative;
|
||||
bottom: -1px;
|
||||
/* bottom: -1px; */
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
/* margin-right: 10px; */
|
||||
}
|
||||
li {
|
||||
margin: 25px 0;
|
||||
cursor: pointer;
|
||||
.split {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
i {
|
||||
flex: 0 0 50px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul li {
|
||||
margin: 25px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
#header {
|
||||
|
|
@ -50,7 +64,8 @@
|
|||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template: 2fr 3fr / 3fr 2fr;
|
||||
padding: 0 40px;
|
||||
padding: 10px 40px;
|
||||
gap: 10px;
|
||||
& > *:nth-child(2n) {
|
||||
justify-self: end;
|
||||
}
|
||||
|
|
@ -77,6 +92,7 @@
|
|||
#profile {
|
||||
display: flex;
|
||||
/* align-items: center; */
|
||||
width: 100%;
|
||||
gap: 28px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
|
@ -89,6 +105,8 @@
|
|||
border-radius: 50%;
|
||||
aspect-ratio: 1/1;
|
||||
max-width: 50px;
|
||||
border: 1px solid #454545;
|
||||
filter: invert(0.5);
|
||||
}
|
||||
#name {
|
||||
font-weight: bold;
|
||||
|
|
@ -98,11 +116,15 @@
|
|||
display: flex;
|
||||
gap: 12px;
|
||||
img {
|
||||
max-height: 80px;
|
||||
/* max-height: 100%; */
|
||||
max-width: 68px;
|
||||
align-self: stretch;
|
||||
aspect-ratio: 1/1;
|
||||
display: block;
|
||||
max-width: 80px;
|
||||
/* max-width: 70px; */
|
||||
border-radius: 50%;
|
||||
border: 1px solid #454545;
|
||||
filter: invert(0.5);
|
||||
}
|
||||
#text {
|
||||
display: flex;
|
||||
|
|
@ -142,15 +164,17 @@
|
|||
}
|
||||
#main {
|
||||
display: grid;
|
||||
grid-template: 1fr 1fr / 5fr 2fr;
|
||||
grid-template: 1fr 1fr / 6fr 2fr;
|
||||
grid-template-areas: "projects announcements"
|
||||
"projects trending";
|
||||
background-color: #E2E7F1;
|
||||
grid-area: main;
|
||||
gap: 20px;
|
||||
padding: 30px 18px;
|
||||
#projects {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-auto-rows: 200px;
|
||||
grid-auto-rows: calc(auto-fill);
|
||||
gap: 18px;
|
||||
grid-area: projects;
|
||||
.project {
|
||||
|
|
@ -189,12 +213,13 @@
|
|||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 3px 3px 6px -5px #000;
|
||||
padding: 20px 15px 15px 18px;
|
||||
padding: 15px 25px;
|
||||
flex-direction: column;
|
||||
height:100%;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
.announcement {
|
||||
padding: 10px;
|
||||
padding: 20px 10px;
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -213,12 +238,26 @@
|
|||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 3px 3px 6px -5px #000;
|
||||
padding: 20px 15px 15px 18px;
|
||||
padding: 8px;
|
||||
flex-direction: column;
|
||||
height:100%;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
.trend {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
img {
|
||||
max-height: 50px;
|
||||
aspect-ratio: 1/1;
|
||||
display: block;
|
||||
max-width: 50px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #454545;
|
||||
filter: invert(0.5);
|
||||
}
|
||||
#description {
|
||||
color: #545454;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
|
||||
|
After Width: | Height: | Size: 410 B |
Loading…
Reference in New Issue