<div class="computer">
<div class="screen"></div>
<div class="foot"></div>
</div>
*{
margin:0;
}
body{
background: #cbbfa7;
width:100%;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.computer{
width:35vw;
background:#4a5362;
height:20vw;
position:relative;
border-radius:2vw 2vw 0 0;
display:flex;align-items:center; justify-content:center;
}
.computer::before{
content:'';
background: #fdfbe5;
width:100%;
position:absolute;
bottom:-5vw;
height:5vw;
border-radius:0 0 2vw 2vw;
}
.computer::after{
content:'';
background: #6e7b84;
width:1.5vw;
height:1.5vw;
position:absolute;
bottom:calc(-5vw / 2 - 1.5vw / 2);
left:50%;transform:translateX(-50%);
border-radius:2vw;
}
.screen{
background: #6e7b84;
width:32vw;
height:17vw;
position:relative;
overflow:hidden;
}
.screen::after{
content:'';
width:150%;
height:100%;
background:#626e7a;
position:absolute;
right:-75%;
top:0;
transform:rotate(45deg);
}
.foot{
position:absolute;
width:10vw;
height:5vw;
background:#6e7b84;
bottom:-10vw;
box-shadow:inset 0 1vw #626e7a;
}
.foot::before{
content:'';
background:#cbbfa7;
position:absolute;
bottom:1vw;
width:1.5vw;
height:4vw;
border-radius:0 0 1.5vw 0;
}
.foot::after{
content:'';
background:#cbbfa7;
position:absolute;
bottom:1vw;
right:0;
width:1.5vw;
height:4vw;
border-radius:0 0 0 1.5vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.