<div class="container">
<div class="top"></div>
<div class="screen">
<div class="outer">
<div class="inner"></div>
<div class="power"></div>
</div>
</div>
<div class="controls">
<div class="dpad">
<div class="plus"></div>
<div class="middle"></div>
</div>
<div class="buttons"></div>
<div class="startselect"></div>
</div>
<div class="corner"></div>
<div class="speaker">
<div class="set"></div>
<div class="set"></div>
</div>
<div class="mic"></div>
</div>
@line: #787A79;
@screen: #AED483;
@darkgray: #BDBDBD;
@lightgray: #E0E2E1;
@superlightgray: #f5f5f5;
@red: #F3886B;
.container {
position: relative;
left: 50%;
transform: translate(-50%, 50px);
width: 200px;
height: 350px;
border: 3px solid @line;
border-radius: 10px;
border-bottom-right-radius: 50px;
}
.top {
width: 100%;
height: 25px;
background-color: @superlightgray;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom: 3px solid @line;
&:after {
content: ' ';
display: block;
position: relative;
top: 7px;
left: 20px;
width: 30px;
border: 5px solid @line;
border-radius: 5px;
}
}
.screen {
width: 170px;
height: 140px;
position: relative;
top: 12px;
left: 12px;
background: @darkgray;
border: 3px solid @line;
border-radius: 5px;
.inner {
width: 100px;
height: 100px;
position: relative;
top: 15px;
left: 50%;
transform: translate(-50%, 0%);
background: @screen;
border: 3px solid @line;
border-radius: 5px;
}
.power {
width: 8px;
height: 8px;
position: absolute;
top: calc(50% - 10px);
left: 8px;
background: @red;
border: 3px solid @line;
border-radius: 100%;
&:after {
content: ' ';
display: block;
width: 20px;
border-bottom: 2px solid @line;
position: relative;
top: 13px;
left: -6px;
}
}
}
.controls {
position: relative;
.dpad {
width: 70px;
height: 70px;
background: @lightgray;
border: 2px solid @line;
border-radius: 100%;
position: relative;
left: 10px;
top: 20px;
&,
*,
*:before,
*:after {
box-sizing: border-box;
}
.plus {
&:before, &:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: @darkgray;
border-radius: 3px;
box-shadow: 0 0 0 3px @line;
content: '';
display: block;
height: 15px;
width: 50px;
}
&:after {
transform: translate(-50%, -50%) rotate(90deg);
}
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: @darkgray;
width: 30px;
height: 15px;
&:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: @superlightgray;
border-radius: 50%;
border: 2px solid @line;
content: '';
height: 12px;
width: 12px;
}
}
}
.buttons {
position: absolute;
right: 10px;
top: 35px;
width: 75px;
height: 34px;
background-color: @lightgray;
border: 2px solid @line;
border-radius: 30px;
display: flex;
justify-content: space-between;
transform: rotate(-35deg);
&:before, &:after {
content: '';
display: block;
background-color: @red;
width: 24px;
height: 24px;
border: 2px solid @line;
border-radius: 100%;
margin: 3px;
}
}
.startselect {
position: absolute;
left: 50%;
transform: translate(-50%, 40px);
display: flex;
&:before, &:after {
content: '';
display: block;
background-color: @lightgray;
border: 2px solid @line;
border-radius: 8px;
margin: 0 4px;
width: 25px;
height: 8px;
transform: rotate(-35deg);
}
}
}
.corner {
position: absolute;
right: 0;
bottom: 0;
background-color: @superlightgray;
border-top-left-radius: 100%;
border-bottom-right-radius: 48px;
width: 80px;
height: 50px;
}
.speaker {
position: absolute;
bottom: 15px;
right: 20px;
transform: rotate(-35deg);
display: flex;
.set {
display: flex;
&:before, &:after {
content: '';
display: block;
background-color: @superlightgray;
border: 2px solid @darkgray;
margin: 3px;
width: 1px;
height: 35px;
}
}
}
.mic {
position: absolute;
bottom: 8px;
left: 50%;
transform: translate(-50%, 0);
width: 20px;
border: 3px solid @line;
border-radius: 3px;
&:before, &:after {
content: '';
display: block;
position: absolute;
top: 0;
background-color: @line;
width: 2px;
height: 11px;
}
&:before {
right: 2px;
}
&:after {
left: 2px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.