<div class="board">
<nav class="nav">
<button arial-label="dashboard" data-active>
<svg id="icon-dashboard" viewBox="0 0 24 24">
<path d="M12.984 3h8.016v6h-8.016v-6zM12.984 21v-9.984h8.016v9.984h-8.016zM3 21v-6h8.016v6h-8.016zM3 12.984v-9.984h8.016v9.984h-8.016z"></path>
</svg>
</button>
<button arial-label="analytics">
<svg id="icon-pie_chart" viewBox="0 0 24 24">
<path d="M13.031 13.031h8.953q-0.328 3.563-2.859 6.094t-6.094 2.859v-8.953zM13.031 2.016q3.563 0.328 6.094 2.859t2.859 6.094h-8.953v-8.953zM11.016 2.016v19.969q-3.797-0.375-6.398-3.234t-2.602-6.75 2.602-6.75 6.398-3.234z"></path>
</svg>
</button>
<button arial-label="wallet">
<svg id="icon-account_balance_wallet" viewBox="0 0 24 24">
<path d="M15.984 13.5q0.609 0 1.055-0.422t0.445-1.078-0.445-1.078-1.055-0.422-1.055 0.422-0.445 1.078 0.445 1.078 1.055 0.422zM12 15.984v-7.969h9.984v7.969h-9.984zM21 18v0.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h13.969q0.797 0 1.406 0.609t0.609 1.406v0.984h-9q-0.844 0-1.43 0.586t-0.586 1.43v7.969q0 0.844 0.586 1.43t1.43 0.586h9z"></path>
</svg>
</button>
</nav>
<header>
<div class="logo">
<h1>YOUR<span>COMPANY</span></h1>
</div>
<div class="account">
<h4>Gabrielle Union</h4>
<img src="https://picsum.photos/20" alt="avatar">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 28">
<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
</svg>
</div>
</header>
<main>
<section class="financial">
<h2>Financial</h2>
<div class="grid">
<ul>
<li>104</li>
<li>102</li>
<li>100</li>
<li>98</li>
</ul>
</div>
</section>
<section>
<h2>Wallets</h2>
</section>
<section class="investments">
<div class="head">
<h2>Investments</h2>
<h4>All</h4>
</div>
<ul>
<li>
<span>Active</span>
<span>Trailing</span>
<span>Closing</span>
<span>Closed</span>
</li>
<li>
<span>4</span>
<span>1</span>
<span>0</span>
<span>35</span>
<span>0.492059 $</span>
</li>
<li>
<span>5</span>
<span>0</span>
<span>2</span>
<span>46</span>
<span>0.492059 $</span>
</li>
<li>
<span>4</span>
<span>0</span>
<span>1</span>
<span>24</span>
<span>0.492059 $</span>
</li>
</ul>
</section>
<section class="profits">
<div class="head">
<h2>Profit Earned</h2>
<svg id="icon-update" viewBox="0 0 24 24">
<path d="M12.516 8.016v4.219l3.469 2.109-0.703 1.219-4.266-2.578v-4.969h1.5zM21 10.125h-6.797l2.766-2.813q-2.063-2.063-4.945-2.086t-4.945 1.992q-0.844 0.844-1.453 2.273t-0.609 2.602 0.609 2.602 1.453 2.273 2.297 1.453 2.625 0.609 2.648-0.609 2.32-1.453q2.016-2.016 2.016-4.875h2.016q0 3.703-2.625 6.281-2.625 2.625-6.375 2.625t-6.375-2.625q-2.625-2.578-2.625-6.258t2.625-6.305q1.078-1.078 2.93-1.852t3.398-0.773 3.398 0.773 2.93 1.852l2.719-2.813v7.125z"></path>
</svg>
</div>
<ul>
<li>
<div>
<h4>23 September, 2019</h4>
<time>17:56AM</time>
</div>
<output>0.00000233 $</output>
</li>
<li>
<div>
<h4>22 September, 2019</h4>
<time>17:56AM</time>
</div>
<output>0.09140881 $</output>
</li>
<li>
<div>
<h4>20 September, 2019</h4>
<time>17:56AM</time>
</div>
<output>0.31086229 $</output>
</li>
</ul>
</section>
</main>
</div>
<div class="credit">
<a href="https://dribbble.com/shots/7865604-Adobe-XD-Dashboard-User-interface">Dribble</a> by <a href="https://dribbble.com/uixninja">uixninja</a>
</div>$color-1: #364670;
$color-2: #242E4C;
$color-3: #455584;
$color-4: #334266;
$color-5: #2D3A5E;
$color-6: #232531;
$color-7: #a2aacd;
$color-8: #5b70c3;
$color-9: #444663;
*{
box-sizing: border-box;
}
html{
--grid: #1c233b;
--radius: 5px;
--shadow-1: -10px 15px 10px 2px rgba(0, 0, 0, .3);
--shadow-2: -25px 260px 20px 28px rgba(0, 0, 0, .15);
display: grid;
height: 100%;
}
body{
margin: auto;
background: linear-gradient(to left, $color-1, lighten($color-1, 20%));
}
h1, h2, h3, h4{
margin: 0;
}
svg{
vertical-align: middle;
width: 20px;
height: 20px;
fill: $color-7;
}
.board{
width: 80vw;
height: 80vh;
padding: 10px;
background: $color-2;
border-left: solid 3px $color-5;
border-bottom: solid 3px $color-6;
border-radius: var(--radius);
box-shadow: var(--shadow-1), var(--shadow-2);
transform: perspective(1000px) rotateX(30deg) rotateY(25deg) rotateZ(-20deg) translateY(-80px);
transform-style: preserve-3d;
}
.nav{
display: flex;
flex-direction: column;
position: absolute;
width: 50px;
height: 160px;
background: $color-3;
transform: translate3d(-20px, 220px, 20px);
border-radius: var(--radius);
box-shadow: var(--shadow);
border-left: solid 3px $color-4;
border-bottom: solid 3px $color-4;
overflow: hidden;
button{
flex: 1;
display: block;
background: transparent;
border: 0;
border-bottom: solid thin $color-4;
&:focus{
outline-width: thin;
}
&[data-active]{
background: darken($color-3, 8%);
svg{
fill: #eee;
}
}
}
}
header, main{
width: 75%;
margin: 40px auto;
}
header, .head{
display: flex;
justify-content: space-between;
}
.head h4{
color: $color-8;
}
main{
display: grid;
height: 80%;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 50px;
}
h2{
color: #fff;
font-size: 16px;
}
.logo{
h1{
font-size: 14px;
color: #eee;
}
span{
color: #6484d5;
}
}
.account{
display: flex;
align-items: center;
color: $color-7;
> *{
margin-left: 10px;
}
h4{
font-size: 10px;
}
img{
width: 20px;
height: 20px;
border-radius: 50%;
}
}
.profits{
ul{
position: relative;
list-style: none;
padding: 0;
&::before{
content: '';
position: absolute;
width: 100%;
height: 55px;
border: solid thin $color-7;
border-radius: 4px;
opacity: .3;
will-change: transform;
animation: scroll-list 5s infinite;
animation-timing-function: step(3, end);
}
}
li{
display: flex;
justify-content: space-between;
padding: 15px 25px;
color: #eee;
}
h4, output{
font-size: 12px;
}
time{
font-size: 10px;
font-weight: bold;
color: $color-7;
}
output{
font-weight: bold;
}
}
.investments {
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
display: flex;
justify-content: space-around;
font-size: 11px;
padding: 20px;
color: #eee;
&:first-of-type{
padding: 10px;
color: darken($color-7, 35%);
}
&:nth-of-type(3) {
border-radius: 4px;
background: linear-gradient(to left, $color-2, lighten($color-2, 10%));
background-clip: border-box;
box-shadow: -10px 10px 5px rgba(0, 0, 0, .2);
border-left: solid 4px rgba(white, .08);
}
}
}
.grid{
--size-1: 49px;
--size-2: 48px;
position: relative;
height: 80%;
margin: 20px 0 0 25px;
background-image: repeating-linear-gradient(0deg, transparent, transparent var(--size-2), var(--grid) var(--size-2), var(--grid) var(--size-1)), repeating-linear-gradient(-90deg, transparent, transparent var(--size-2), var(--grid) var(--size-2), var(--grid) var(--size-1));
background-size: var(--size-1) var(--size-1);
> ul{
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
left: -25px;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
font-size: 10px;
font-weight: bold;
color: darken($color-7, 35%);
}
}
.credit{
position: absolute;
bottom: 10px;
right: 10px;
color: $color-7;
a{
color: darken($color-7, 18%);
text-decoration: none;
}
}
@keyframes scroll-list{
33%{
transform: translate3d(0, 62px, 10px);
}
66%{
transform: translate3d(0, 124px, 10px);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.