CSS
html,
body {
font-family: "Roboto", sans-serif;
margin: 0;
background: #eee;
height: 100vh;
width: 100%;
position: relative;
}
.logo-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 280px;
}
.logo-container .bar {
height: 100px;
width: 200px;
position: absolute;
}
.logo-container .green {
background-color: #0BA25E;
transform: rotate(-60deg) skew(-30deg);
left: -20px;
top: 90px;
height: 100.5px;
z-index: 2;
box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.2);
}
.logo-container .yellow {
background-color: #FCCD48;
transform: rotate(60deg) skew(-30deg);
left: 108px;
top: 40px;
z-index: 3;
box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3);
}
.logo-container .blue {
background-color: #2A71E9;
transform: skew(-30deg) translate(0, -50%);
top: 227px;
left: 58.5px;
z-index: 1;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
