<div id="app">
<main>
<div class="layout-grid">
<section>
<div class="info-card">
<div class="info-card__inner">
<div class="info-card__display">
<svg viewBox="0 0 36 36" class="pie-chart">
<path class="pie-chart__1"
stroke-dasharray="100, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="pie-chart__2"
stroke-dasharray="60, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
</div>
<div class="info-card__details">
<span v-for="index in 4" :key="index"/>
</div>
</div>
</div>
</section>
<aside>
<span :key="index" v-for="index in 6"/>
</aside>
</div>
</main>
</div>
* {
box-sizing: border-box;
}
body {
background: #FAFAFA;
}
main {
padding: 50px;
}
.layout-grid {
display: flex;
gap: 60px;
section {
flex-grow: 1;
}
aside {
width: 30%;
span {
display: block;
height: 30px;
background: #DBDBDB;
margin-bottom: 20px;
border-radius: 1000px;
}
}
@media screen and (max-width: 800px) {
flex-direction: column;
aside {
width: 100%;
}
}
}
.info-card {
width: 100%;
container-type: inline-size;
container-name: info-card;
border-radius: 5px;
overflow: hidden;
&__inner {
display: flex;
@container info-card (max-width: 500px) {
flex-direction: column;
}
}
&__display {
width: 100%;
min-height: 300px;
background: #504b4b;
border: 2px solid #1c1c1c;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
&__details {
background: #FFF;
width: 100%;
border: 2px solid #D8D8D8;
min-height: 300px;
padding: 40px;
display: flex;
flex-direction: column;
span {
width: 100%;
height: 15px;
background: #DBDBDB;
margin-bottom: 8px;
border-radius: 1000px;
&:first-of-type {
background: #707070;
margin-bottom: 20px;
width: 60%;
height: 20px;
}
&:last-of-type {
width: 70%;
}
}
}
}
.pie-chart {
display: block;
width: 100%;
height: 10em;
font-size: 1em;
&__1 {
stroke: #777;
fill: none;
stroke-width: 2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}
&__2 {
stroke: #EEE;
fill: none;
stroke-width: 2;
}
}
View Compiled
let app = new Vue({
el: '#app',
})
This Pen doesn't use any external CSS resources.