<body>
<div class="container">
<div class="switch-container">
<div class="switch">
<div class="joycon-blue">
<div class="select-btn"></div>
<div class="joystick"></div>
<div class="button-group">
<div class="button left"></div>
<div class="button right"></div>
<div class="button up"></div>
<div class="button down"></div>
</div>
<div class="capture-btn"></div>
<div class="shoulder left"></div>
</div>
<div class="screen">
<div class="game-video">
<video width="475" height="280" autoplay playsinline muted loop>
<source src="https://assets.codepen.io/2792757/Animal+Crossing+New+Horizons+-+Introduction.mp4" type="video/mp4" />
</video>
</div>
<div class="glass-overlay"></div>
</div>
<div class="joycon-red">
<div class="start-btn"></div>
<div class="joystick"></div>
<div class="button-group">
<div class="button x"></div>
<div class="button a"></div>
<div class="button b"></div>
<div class="button y"></div>
</div>
<div class="home-btn"></div>
<div class="shoulder right"></div>
</div>
</div>
</div>
</div>
</body>
</html>
$bg: paleturquoise;
$switch-blue: #00c3e3;
$switch-red: #ff4554;
$switch-btn: #414548;
$switch-btn-light: #989898;
$switch-border-radius: 75px;
$switch-width: 750px;
$switch-height: 320px;
$switch-joycon-width: 15%;
@mixin center {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
@mixin button {
position: absolute;
width: 45%;
height: 45%;
background-color: $switch-btn;
border-radius: 100%;
box-shadow: inset 0 -0.0625em 0.125em rgba(black, 0.75),
inset 0 0.125em 0.125em -0.0625em rgba(white, 0.4),
0 0 0.03125em 0.0625em rgba(black, 0.6),
0 0.0625em 0.25em 0.03125em rgba(black, 0.5);
color: rgba(white, 0.5);
transform: scale(1.1);
}
@mixin joystick {
position: relative;
width: 50px;
height: 50px;
background-color: $switch-btn;
left: calc(50% - 25px);
border-radius: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 0.14em 100%, 100% 0.14em, 100%;
background-image: linear-gradient(to bottom, #222, #111),
linear-gradient(to bottom, #222, #333),
linear-gradient(to bottom, #777, #111);
box-shadow: inset 0 -0.06em 0.125em black,
inset 0 0.125em 0.125em -0.0325em rgba(black, 0.2),
inset 0 0.18em 0.125em -0.0625em rgba(white, 0.3),
0 0 0.09em 0.0625em rgba(black, 0.75),
0 0.375em 1em 0.0625em rgba(black, 0.4);
&:before,
&:after {
content: "";
position: absolute;
width: 75%;
height: 75%;
border-radius: 100%;
left: 12%;
top: 12%;
background-repeat: no-repeat;
background-position: center;
background-image: linear-gradient(to bottom, #555, #222);
}
&:before {
width: 85%;
height: 85%;
left: 7%;
top: 7%;
background-size: 0.14em 100%, 100% 0.14em, 100%;
background-image: linear-gradient(to bottom, #444, #111),
linear-gradient(to bottom, #222, #333),
linear-gradient(to bottom, #222, #666);
}
}
@mixin shoulder {
position: absolute;
z-index: -1;
top: -0.25em;
width: 6.5em;
height: 4.5em;
background-color: #414548;
}
html,
body {
width: 100%;
height: 100%;
background-color: $bg;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
@include center;
}
// .switch-container {
// width: 100%;
// height: 100%;
// overflow: hidden;
// display: grid;
// place-content: center;
// transform-origin: center;
// transform: rotate(20deg) skewX(-35deg) scale(0.8);
// perspective: 800px;
// }
.switch {
@include center;
width: $switch-width;
height: $switch-height;
border-radius: $switch-border-radius;
display: grid;
grid-template-columns: $switch-joycon-width 1fr $switch-joycon-width;
> * {
position: relative;
}
.joycon-blue > div,
.joycon-red > div {
position: relative;
}
.joycon-blue {
height: 100%;
background-color: $switch-blue;
box-shadow: inset 0.125em -0.125em 0.3em rgba(#444, 0.4),
inset -0.3em 0 0.0625em -0.25em rgba(#222, 0.5),
inset 0.4em 0.5em 0.5em -0.25em rgba(#fff, 0.6),
0.04em 0.25em 0 -0.3em #333;
border-top-left-radius: $switch-border-radius;
border-bottom-left-radius: $switch-border-radius;
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
.select-btn {
width: 20px;
height: 6px;
background-color: $switch-btn;
left: 72%;
top: 10%;
border-radius: 0.0675em;
box-shadow: inset 0 -0.03125em 0.0625em rgba(black, 0.5),
inset 0 0.03125em rgba(white, 0.2),
0 0 0.03125em 0.03125em rgba(black, 0.5),
0 0.09125em 0.125em -0.03125em rgba(black, 0.4);
}
.joystick {
top: 18%;
@include joystick();
}
.button-group {
width: 45px;
height: 45px;
left: calc(50% - 32.5px);
top: 26%;
.button {
@include button;
&:after {
content: "";
}
&.up {
top: 0;
left: 50%;
&:after {
@include center;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-bottom: 8px solid #222;
}
}
&.down {
top: 100%;
left: 50%;
&:after {
@include center;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top: 8px solid #222;
}
}
&.left {
top: 50%;
left: 0;
&:after {
@include center;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-right: 8px solid #222;
}
}
&.right {
top: 50%;
left: 100%;
&:after {
@include center;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 8px solid #222;
}
}
}
}
.capture-btn {
position: absolute;
width: 20px;
height: 20px;
background-color: $switch-btn;
bottom: 22%;
left: 60%;
border-radius: 0.125em;
box-shadow: inset 0 0.25em 0.5em -0.0625em rgba(white, 0.1),
inset 0 0.015em 0.03125em rgba(white, 0.4),
inset 0 0 0.03125em 0.03125em black,
0 0.015em 0 0.03125em rgba(black, 0.75),
0 0.015em 0.05em 0.0625em rgba(black, 0.5);
&:after {
content: "";
width: 14px;
height: 14px;
position: absolute;
@include center;
border-radius: 100%;
background-image: linear-gradient(to bottom, #222, #333);
box-shadow: inset 0 0.0125em 0 0.03125em rgba(black, 0.6),
inset 0 -0.0125em 0 0.06125em rgba(white, 0.4),
0.015em -0.03125em 0.0125em rgba(black, 0.7);
}
}
.shoulder.left {
@include shoulder;
left: -0.25em;
border-radius: 6em 1em 0 0;
}
}
.screen {
background-color: $switch-btn;
border-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: inset 0 -1.25em 0.5em -1em rgba(black, 0.5),
inset 0.125em 0 rgba(white, 0.2), inset -0.125em 0 rgba(white, 0.2);
&:before,
&:after {
content: "";
position: absolute;
width: 100%;
}
&:before {
height: 15px;
background-image: linear-gradient(
to bottom,
$switch-btn,
rgba($switch-btn-light, 0.4),
$switch-btn
);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: inset 0.125em 0 rgba(white, 0.2),
inset -0.125em 0 rgba(white, 0.2);
}
}
.game-video {
width: 88%;
height: 85%;
// background-image: url("https://media.discordapp.net/attachments/506231578855473153/758132879309668373/IMG_94f9127d-00d7-4f83-b456-d6649e25a73c.png");
// background-size: cover;
@include center;
border-radius: 10px;
video {
position: absolute;
top: 0;
}
}
.glass-overlay {
@include center;
$dark-blue: darken($bg, 10%);
$alpha: 0.3;
box-sizing: border-box;
width: 93%;
height: 92%;
// background-color: $bg;
border-top: 25px solid black;
border-bottom: 25px solid black;
border-left: 35px solid black;
border-right: 35px solid black;
border-radius: 10px;
overflow: hidden;
background-size: 420px 100%, 100px 100px, 10px 100%;
background-repeat: no-repeat;
background-position: 0 0, 50% 50%, 50% 0;
background-image: linear-gradient(
120deg,
transparent 20%,
rgba($dark-blue, $alpha) 20%,
25%,
transparent 25%,
30%,
rgba(white, $alpha) 30%,
40%,
transparent 40%,
rgba(darken($bg, 10%), $alpha) 40%,
45%,
rgba(white, $alpha) 45%,
48%,
transparent 48%,
50%,
rgba(white, $alpha) 50%,
rgba(white, $alpha) 70%,
rgba($dark-blue, $alpha) 70%,
75%,
transparent 75%
);
}
.joycon-red {
height: 100%;
background-color: $switch-red;
border-top-right-radius: $switch-border-radius;
border-bottom-right-radius: $switch-border-radius;
border-top-left-radius: 10px;
border-bottom-left-radius: 5px;
box-shadow: inset -0.125em 0.125em 0.3em rgba(#444, 0.4),
inset 0.3em 0 0.0625em -0.25em rgba(#222, 0.5),
inset -0.4em 0.5em 0.5em -0.25em rgba(#fff, 0.6),
-0.04em 0.25em 0 -0.3em #333;
.start-btn {
width: 7px;
height: 20px;
background-color: $switch-btn;
top: 8%;
left: 15%;
box-shadow: 0 0 0.03125em rgba(black, 0.6),
0 0.09375em 0.125em -0.03125em rgba(black, 0.5);
&:before,
&:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: $switch-btn;
border-radius: 0.0675em;
}
&:before {
height: 7px;
width: 20px;
box-shadow: inset 0 -0.03125em 0.0625em rgba(black, 0.5),
inset 0 0.03125em rgba(white, 0.2),
0 0 0.03125em 0.03125em rgba(black, 0.6),
0 0.09375em 0.125em -0.03125em rgba(black, 0.4);
}
&:after {
width: 7px;
height: 20px;
box-shadow: inset 0 -0.09375em 0.0625em -0.0624em rgba(black, 0.5),
inset 0 0.03125em rgba(white, 0.2);
}
}
.button-group {
width: 45px;
height: 45px;
left: calc(50% - 32.5px);
top: -3%;
.button {
@include button;
&:after {
font-family: "Arial";
font-size: 0.7em;
}
&.x {
top: 0;
left: 50%;
&:after {
@include center;
content: "X";
}
}
&.a {
top: 100%;
left: 50%;
&:after {
@include center;
content: "A";
}
}
&.b {
top: 50%;
left: 0;
&:after {
@include center;
content: "B";
}
}
&.y {
top: 50%;
left: 100%;
&:after {
@include center;
content: "Y";
}
}
}
}
.joystick {
top: 40%;
@include joystick();
}
.home-btn {
position: absolute;
bottom: 22%;
width: 20px;
height: 20px;
left: 20%;
background-color: #444;
border-radius: 100%;
box-shadow: inset 0 0 0 0.09em #9b9b9b,
inset 0 0.25em 0.5em rgba(white, 0.2),
inset 0 0 0.03125em rgba(black, 1),
0 0.0155em 0.03125em 0.0625em rgba(black, 0.6);
&:before,
&:after {
content: "";
position: absolute;
transform: translate(-50%, -50%) scale(1.15);
top: 50%;
left: 50%;
display: block;
box-sizing: border-box;
}
&:before {
height: 6px;
width: 7px;
background-color: #444;
border: 0.025em solid #111;
box-shadow: inset 0 0 0 0.1em #111, inset 0.12em 0 0 #111,
inset -0.12em 0 0 #111, 0 0.0625em 0 -0.03125em rgba(white, 0.1);
}
&:after {
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 4px solid #111;
top: 30%;
}
}
.shoulder.right {
@include shoulder;
right: -0.25em;
border-radius: 1em 6em 0 0;
}
}
}
View Compiled
// Special thanks to @joshbadder on Codepen: https://codepen.io/joshbader/pen/mjZzGM
// Checkout my YouTube and Instagram for more contnet!
// YouTube: https://youtube.com/c/Cybercountess
// Instagram: https://instagram.com/cybercountess
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.