<div class="main">
<div class="app-header">Header</div>
<div class="app">
<div class="sidebar-menu">
<div>Menu item 1</div>
<div>Menu item 2</div>
<div>Menu item 3</div>
<div>Menu item 4</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum dolores obcaecati quibusdam hic eos quod, praesentium consectetur reprehenderit facere iusto accusamus fugit quidem suscipit facilis voluptatem fuga maiores quo vel?
</div>
</div>
</div>
:root {
font-size: 62.5%;
body {
margin: 0;
// Body font size 16px
font-size: 1.6rem;
}
}
.main {
.app-header {
// Header font size 24px
font-size: 2.4rem;
// Header padding 8px
padding: 0.8rem;
background-color: lightblue;
text-align: center;
}
.app {
display: flex;
.sidebar-menu {
// Menu font-size 18px
font-size: 1.8rem;
// Menu padding 8px
padding: 0.8rem;
width: 20vw;
background-color: lightgreen;
}
.content {
// Content padding 8px
padding: 0.8rem;
background-color: pink;
width: 80vw;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.