tod
/
odin-admin-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Majority done

This commit is contained in:
NetMan 2024-01-26 20:57:36 +01:00
parent c0e46b2c60
commit 8041578af2
2 changed files with 374 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
index.html
View File

@ -6,8 +6,153 @@
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="container">
<div id="sidebar">
<span id="title">
<i class="fa-solid fa-house"></i>
<h1>Home</h1>
</span>
<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>
</ul>
<ul>
<li><i class="fa-solid fa-gear"></i> Settings</li>
<li><i class="fa-solid fa-circle-info"></i> Help</li>
</ul>
</div>
<div id="header">
<div id="search">
<label for="search-box"><i class="fa-solid fa-magnifying-glass"></i></label>
<input type="text" id="search-box">
</div>
<div id="profile">
<i class="fa-regular fa-bell"></i>
<img src="desired-result.png" alt="">
<span id="name">Tony Kowalski</span>
</div>
<div id="welcome">
<img src="desired-result.png" alt="">
<div id="text">
<span id="hi">Hi there,</span>
<span id="person">Tony Kowalski (@tkowal)</span>
</div>
</div>
<div id="actions">
<button type="button">New</button>
<button type="button">Upload</button>
<button type="button">Share</button>
</div>
</div>
<div id="main">
<div id="projects">
<div class="project">
<h3>Project 1</h3>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam soluta, voluptatum, asperiores deleniti dolores perferendis</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
<div class="project">
<h3>Project 2</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab voluptatem libero, sint vel aliquam</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
<div class="project">
<h3>Project 3</h3>
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque vel hic exercitationem alias.</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
<div class="project">
<h3>Project 4</h3>
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos minima at vero sint aspernatur</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
<div class="project">
<h3>Project 5</h3>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium pariatur nam molestiae eveniet</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
<div class="project">
<h3>Project 6</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero soluta nam consequuntur. Harum aspernatur</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
</div>
<div id="announcements">
<div class="announcement">
<h3>Announcement 1</h3>
<span id="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus dolorum accusantium.</span>
</div>
<div class="announcement">
<h3>Announcement 2</h3>
<span id="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus dolorum accusantium.</span>
</div>
<div class="announcement">
<h3>Announcement 3</h3>
<span id="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus dolorum accusantium.</span>
</div>
</div>
<div id="trending">
<div class="trend">
<img src="" alt="">
<div id="text">
<h4>@account</h4>
<span id="description">Very cool account page</span>
</div>
</div>
<div class="trend">
<img src="" alt="">
<div id="text">
<h4>@account</h4>
<span id="description">Very cool account page</span>
</div>
</div>
<div class="trend">
<img src="" alt="">
<div id="text">
<h4>@account</h4>
<span id="description">Very cool account page</span>
</div>
</div>
<div class="trend">
<img src="" alt="">
<div id="text">
<h4>@account</h4>
<span id="description">Very cool account page</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

228
style.css
View File

@ -0,0 +1,228 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
font-family: 'Roboto', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#container {
display: grid;
grid-template: 150px 6fr / 300px 5fr;
grid-template-areas: "sidebar header"
"sidebar main";
min-height: 100dvh;
& > * {
box-sizing: border-box;
}
#sidebar {
grid-area: sidebar;
background-color: #1d87d8;
z-index: 3;
color: #fff;
#title {
font-size: 2.2rem;
margin: 20px 0 0 20px;
display: inline-block;
cursor: pointer;
font-weight: bold;
h1 {
display: inline-block;
}
}
ul {
font-size: 1.5rem;
margin: 50px 30px;
font-weight: bold;
i {
position: relative;
bottom: -1px;
display: inline-block;
margin-right: 10px;
}
}
ul li {
margin: 25px 0;
cursor: pointer;
}
}
#header {
box-shadow: 0 0 6px -2px #000;
grid-area: header;
z-index: 2;
display: grid;
grid-template: 2fr 3fr / 3fr 2fr;
padding: 0 40px;
& > *:nth-child(2n) {
justify-self: end;
}
#search {
display: flex;
align-items: center;
gap: 10px;
i {
display: block;
position: relative;
top: -1px;
font-size: 1em;
}
#search-box {
width: 100%;
border: none;
outline: none;
background-color: #E2E7F1;
font-size: 1.2em;
padding: 8px 12px;
border-radius: 25px;
}
}
#profile {
display: flex;
/* align-items: center; */
gap: 28px;
position: relative;
align-items: center;
justify-content: flex-end;
i {
font-size: 1.2em;
}
img {
max-height: 50px;
border-radius: 50%;
aspect-ratio: 1/1;
max-width: 50px;
}
#name {
font-weight: bold;
}
}
#welcome {
display: flex;
gap: 12px;
img {
max-height: 80px;
aspect-ratio: 1/1;
display: block;
max-width: 80px;
border-radius: 50%;
}
#text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
font-weight: bold;
#hi {
font-size: 0.9em;
}
#person {
font-size: 1.4em;
}
}
}
#actions {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
gap: 15px;
button {
flex: 0 0 120px;
display: block;
background-color: #1D87D8;
color: #fff;
border: none;
outline: none;
font-size: 1em;
padding: 10px 7px;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
}
}
}
#main {
display: grid;
grid-template: 1fr 1fr / 5fr 2fr;
grid-template-areas: "projects announcements"
"projects trending";
background-color: #E2E7F1;
grid-area: main;
#projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 200px;
gap: 18px;
grid-area: projects;
.project {
border-left: 6px solid #F1BC00;
border-radius: 5px;
background-color: #fff;
box-shadow: 3px 3px 6px -5px #000;
padding: 20px 15px 15px 18px;
display: flex;
flex-direction: column;
box-sizing: border-box;
height:100%;
h3 {
font-weight: bold;
}
span {
flex: 1;
color: #545454;
}
.icons {
color: #333333;
display: flex;
justify-content: flex-end;
gap: 10px;
font-size: 1.2em;
justify-self: flex-end;
}
.icons > * {
cursor: pointer;
}
}
}
#announcements {
grid-area: announcements;
display: flex;
border-radius: 12px;
background-color: #fff;
box-shadow: 3px 3px 6px -5px #000;
padding: 20px 15px 15px 18px;
flex-direction: column;
height:100%;
box-sizing: border-box;
.announcement {
padding: 10px;
h3 {
font-weight: bold;
}
span {
/* flex: 1; */
color: #545454;
}
& + & {
border-top: 1px solid #dcdcdc;
}
}
}
#trending {
grid-area: trending;
display: flex;
border-radius: 12px;
background-color: #fff;
box-shadow: 3px 3px 6px -5px #000;
padding: 20px 15px 15px 18px;
flex-direction: column;
height:100%;
box-sizing: border-box;
.trend {
padding: 10px;
#description {
color: #545454;
}
}
}
}
}