<div class="dashboard">
<aside class="sidebar">
<div class="logo">
<img src="https://brandmark.io/logo-rank/random/beats.png" alt="">
</div>
<div class="menu-items">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</aside>
<div class="wrapper">
<div class="notifications">
</div>
<div class="container">
<div class="card">
<h4>Test</h4>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
height: 100%;
}
.dashboard {
display: flex;
height: 100%;
width: 100%;
background-color: #e6e6e6;
}
.sidebar {
height: 100%;
width: 200px;
display: flex;
background-color: #fff;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
}
.logo {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
}
.logo img {
width: 100px;
}
.wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
.notifications {
width: 100%;
height: 60px;
}
.container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.card {
width: 200px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.menu-items {
flex: 1;
display: flex;
flex-direction: column;
}
.menu-items ul {
list-style: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.