<div class="inner">
<nav id="nav">
<div class="nav__container--logo">
<div class="logo">W</div>
<h1>WasteBank</h1>
</div>
<ul class="nav-links">
<li>Dashboard</li>
<li>Customer</li>
<li>Category</li>
<li>Transaction</li>
<li>Pick-up</li>
<li>Stock</li>
<li>Financial</li>
<li>Raport</li>
</ul>
</nav>
<div class="menu">
<div class="line"></div>
</div>
<main>
<div class="main__col--1">
<h2>Overview</h2>
</div>
<div class="main__col--2">
<div class="box box--1">
<div class="box--logo">
<span
class="iconify"
data-inline="false"
data-icon="fluent:people-32-filled"
style="color: #ffffff; font-size: 40px"
></span>
</div>
<div class="box--content">
<p class="box--title">Customer</p>
<p class="box--number">1,300</p>
</div>
</div>
<div class="box box--2">
<div class="box--logo">
<span
class="iconify"
data-inline="false"
data-icon="clarity:group-line"
style="color: #ffffff; font-size: 40px"
></span>
</div>
<div class="box--content">
<p class="box--title">Employees</p>
<p class="box--number">42</p>
</div>
</div>
<div class="box box--3">
<div class="box--logo">
<span
class="iconify"
data-inline="false"
data-icon="ant-design:cloud-download-outlined"
style="color: #ffffff; font-size: 40px"
></span>
</div>
<div class="box--content">
<p class="box--title">Request</p>
<p class="box--number">128</p>
</div>
</div>
</div>
<div class="main__col--3">
<div class="graphic--container">
<h3>Customer based region</h3>
<img src="https://i.ibb.co/gd1vQTz/img.png" alt="illustration" />
</div>
<div class="recap--number">
<h5>Total category waste</h5>
<span>20</span>
<h5>Total waste in</h5>
<span>564 kg</span>
<h5>Total waste out</h5>
<span>1205 kg</span>
</div>
</div>
</main>
<aside>
<div class="card--container">
<div class="card--container-up">
<p class="number-card">ID 122 887 552</p>
</div>
<div class="card--container-down">
<p>Your balance</p>
<span class="balance">$ 2,920</span>
</div>
</div>
<div class="transaction--container">
<h3>Last Transaction</h3>
<div class="transaction">
<div class="logo-grow">
<span
class="iconify"
data-inline="false"
data-icon="akar-icons:arrow-up-left"
style="color: #ffffff; font-size: 24px"
></span>
</div>
<div class="transaction--infos">
<h6>Deposit Waste</h6>
<p>Hotel Garden</p>
</div>
</div>
<div class="transaction translate">
<div class="logo-grow">
<span
class="iconify"
data-inline="false"
data-icon="akar-icons:arrow-up-left"
style="color: #ffffff; font-size: 24px"
></span>
</div>
<div class="transaction--infos">
<h6>Deposit Waste</h6>
<p>Plastic Factory</p>
</div>
</div>
<div class="transaction">
<div class="logo-grow">
<span
class="iconify"
data-inline="false"
data-icon="akar-icons:arrow-up-left"
style="color: #ffffff; font-size: 24px"
></span>
</div>
<div class="transaction--infos">
<h6>Deposit Waste</h6>
<p>Hotel Garden</p>
</div>
</div>
</div>
</aside>
</div>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Roboto", sans-serif;
}
.inner {
display: grid;
grid-template-columns: 250px 1fr 355px;
height: 100%;
}
li {
list-style: none;
}
/* SIDE BAR */
#nav {
display: grid;
grid-template-rows: 100px 1fr;
background: #202443;
}
#nav.active {
display: grid;
}
.nav__container--logo {
display: flex;
align-items: center;
justify-self: center;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
width: 31px;
height: 31px;
border-radius: 7px;
color: #fff;
background-color: #6f32ff;
}
.nav__container--logo h1 {
font-size: 22px;
color: white;
padding-left: 10px;
}
.nav-links {
display: grid;
grid-template-rows: repeat(auto-fit, 50px);
align-content: center;
}
.nav-links li {
justify-self: center;
align-self: center;
color: #fff;
cursor: pointer;
}
.nav-links li:not(:nth-child(1)) {
color: #5b607e;
}
.menu {
display: none;
position: absolute;
top: 30px;
left: 40px;
justify-content: center;
align-items: center;
height: 23px;
width: 30px;
cursor: pointer;
}
.menu .line {
height: 3px;
width: 100%;
background: #f1f1f1;
border-radius: 4px;
}
.menu::before {
content: "";
display: block;
position: absolute;
border-radius: 4px;
top: 0;
height: 3px;
width: 100%;
background: #f1f1f1;
}
.menu::after {
content: "";
display: block;
position: absolute;
border-radius: 4px;
bottom: 0;
height: 3px;
width: 100%;
background: #f1f1f1;
}
/* Main */
main {
display: grid;
grid-template-rows: 100px max-content max-content 1fr;
background-color: #252849;
padding: 0 20px;
}
/* Main col 1 */
.main__col--1 {
align-self: center;
}
.main__col--1 h2 {
font-weight: bold;
font-size: 23px;
color: #fff;
}
/* Main col 2 */
.main__col--2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
}
.box {
display: flex;
background-color: #2e325c;
border-radius: 27px;
padding: 20px;
box-shadow: 0 3px 19px rgb(0 0 0 / 3%);
cursor: pointer;
transition: all 0.2s ease;
}
.box:hover {
transform: translateY(-5px);
}
.box--logo {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #9f32ff;
border-radius: 9px;
}
.box--2 .box--logo {
background-color: #ff9416;
}
.box--3 .box--logo {
background-color: #f730ee;
}
.box--content {
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding-left: 10px;
}
.box--title {
color: #5b607e;
font-size: 13px;
}
.box--number {
font-size: 18px;
font-weight: bold;
color: white;
}
/* Main col 3 */
.main__col--3 {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 30px;
margin: 50px 0;
height: auto;
}
.graphic--container {
padding: 20px;
border-radius: 9px;
background-color: #2e325c;
}
.graphic--container h3 {
color: #fff;
font-weight: bold;
}
.graphic--container img {
width: 350px;
}
.recap--number {
padding: 25px 20px;
border-radius: 9px;
background: rgb(81, 129, 238);
background: linear-gradient(
115deg,
rgba(81, 129, 238, 1) 24%,
rgba(82, 130, 239, 1) 74%
);
color: white;
}
.recap--number h5 {
font-size: 13px;
font-weight: lighter;
}
.recap--number span {
display: block;
font-weight: bold;
font-size: 18px;
margin: 20px 0;
}
/* ASIDE */
aside {
padding: 0 20px;
background: #202443;
}
.card--container {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 9px;
background: rgb(253, 173, 175);
background: linear-gradient(
115deg,
rgba(253, 173, 175, 1) 13%,
rgba(247, 149, 173, 1) 30%,
rgba(167, 152, 230, 1) 74%
);
color: #fff;
padding: 25px;
margin: 30px 0;
height: 190px;
max-width: 350px;
}
.card--container p {
font-size: 14px;
font-weight: lighter;
}
.balance {
font-size: 35px;
font-weight: bold;
}
.transaction--container h3 {
color: white;
font-size: 22px;
font-weight: bold;
}
.transaction {
display: flex;
margin: 20px 0;
cursor: pointer;
}
.transaction.translate {
background: #2e325c;
padding: 10px;
border-radius: 9px;
transform: rotate(-3deg);
box-shadow: 0 3px 19px rgb(0 0 0 / 3%);
}
.logo-grow {
display: flex;
justify-content: center;
align-items: center;
border-radius: 999px;
background: rgb(81, 129, 238);
background: linear-gradient(
115deg,
rgba(81, 129, 238, 1) 24%,
rgba(82, 130, 239, 1) 74%
);
height: 50px;
width: 50px;
}
.transaction--infos {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin-left: 20px;
}
.transaction--infos h6 {
color: white;
font-weight: bold;
font-size: 16px;
}
.transaction--infos p {
color: #595d7c;
font-size: 13px;
}
/* Responsive */
@media screen and (max-width: 1213px) {
#nav {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
}
.menu {
display: flex;
z-index: 10000;
}
.inner {
grid-template-columns: 2fr 1fr;
}
.main__col--1 h2 {
text-align: center;
}
}
@media screen and (max-width: 860px) {
.inner {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 595px) {
.main__col--2,
.main__col--3 {
grid-template-columns: 1fr;
}
}
const nav = document.querySelector("#nav");
const btnMenu = document.querySelector(".menu");
btnMenu.addEventListener("click", () => {
nav.classList.toggle("active");
});
This Pen doesn't use any external CSS resources.