.card
$red: #944534;
$yel: #fd9e3a;
$gre: #babab4;
$grd: #453f3a;
$bla: #1e1d1b;
$whi: #f0efe5;
$pin: #fbc696;
$blu: #2986bb;
$bkg: #eef1e6;
body {
background: $bla;
}
.card {
display: block;
position: absolute;
top: calc(50% - 133px);
left: calc(50% - 97px);
width: 194px;
height: 266px;
border-radius: 14px;
background: $bkg;
&:before, &:after {
display: block;
content: "";
position: absolute;
width: 6px;
height: 6px;
--bs-red: #{$red};
--bs-yel: #{$yel};
--bs-gre: #{$gre};
--bs-grd: #{$grd};
--bs-bla: #{$bla};
--bs-whi: #{$whi};
--bs-pin: #{$pin};
--bs-blu: #{$blu};
--spread: 0px;
@extend %king;
background: $red;
}
&:before {
top: 16px;
left: 16px;
}
&:after {
top: 244px;
left: 172px;
transform: rotate(180deg);
}
}
%king {
box-shadow:
0px 0px var(--spread) var(--bs-red),
12px 0px var(--spread) var(--bs-red),
48px 0px var(--spread) var(--bs-yel),
72px 0px var(--spread) var(--bs-yel),
96px 0px var(--spread) var(--bs-yel),
120px 0px var(--spread) var(--bs-gre),
0px 6px var(--spread) var(--bs-red),
6px 6px var(--spread) var(--bs-red),
48px 6px var(--spread) var(--bs-yel),
54px 6px var(--spread) var(--bs-yel),
66px 6px var(--spread) var(--bs-yel),
72px 6px var(--spread) var(--bs-yel),
78px 6px var(--spread) var(--bs-yel),
90px 6px var(--spread) var(--bs-yel),
96px 6px var(--spread) var(--bs-yel),
114px 6px var(--spread) var(--bs-gre),
132px 6px var(--spread) var(--bs-yel),
138px 6px var(--spread) var(--bs-yel),
0px 12px var(--spread) var(--bs-red),
12px 12px var(--spread) var(--bs-red),
48px 12px var(--spread) var(--bs-bla),
54px 12px var(--spread) var(--bs-yel),
60px 12px var(--spread) var(--bs-yel),
66px 12px var(--spread) var(--bs-yel),
72px 12px var(--spread) var(--bs-yel),
78px 12px var(--spread) var(--bs-yel),
84px 12px var(--spread) var(--bs-yel),
90px 12px var(--spread) var(--bs-yel),
96px 12px var(--spread) var(--bs-yel),
114px 12px var(--spread) var(--bs-gre),
120px 12px var(--spread) var(--bs-gre),
132px 12px var(--spread) var(--bs-bla),
138px 12px var(--spread) var(--bs-bla),
0px 18px var(--spread) var(--bs-red),
12px 18px var(--spread) var(--bs-red),
24px 18px var(--spread) var(--bs-bla),
30px 18px var(--spread) var(--bs-bla),
36px 18px var(--spread) var(--bs-bla),
42px 18px var(--spread) var(--bs-bla),
48px 18px var(--spread) var(--bs-red),
54px 18px var(--spread) var(--bs-bla),
60px 18px var(--spread) var(--bs-yel),
66px 18px var(--spread) var(--bs-red),
72px 18px var(--spread) var(--bs-yel),
78px 18px var(--spread) var(--bs-red),
84px 18px var(--spread) var(--bs-yel),
90px 18px var(--spread) var(--bs-red),
96px 18px var(--spread) var(--bs-yel),
102px 18px var(--spread) var(--bs-bla),
108px 18px var(--spread) var(--bs-bla),
114px 18px var(--spread) var(--bs-gre),
120px 18px var(--spread) var(--bs-gre),
126px 18px var(--spread) var(--bs-gre),
132px 18px var(--spread) var(--bs-gre),
138px 18px var(--spread) var(--bs-gre),
24px 24px var(--spread) var(--bs-bla),
48px 24px var(--spread) var(--bs-bla),
54px 24px var(--spread) var(--bs-yel),
60px 24px var(--spread) var(--bs-yel),
66px 24px var(--spread) var(--bs-yel),
72px 24px var(--spread) var(--bs-yel),
78px 24px var(--spread) var(--bs-yel),
84px 24px var(--spread) var(--bs-yel),
90px 24px var(--spread) var(--bs-yel),
96px 24px var(--spread) var(--bs-yel),
114px 24px var(--spread) var(--bs-gre),
120px 24px var(--spread) var(--bs-gre),
132px 24px var(--spread) var(--bs-bla),
138px 24px var(--spread) var(--bs-bla),
6px 30px var(--spread) var(--bs-red),
24px 30px var(--spread) var(--bs-bla),
48px 30px var(--spread) var(--bs-pin),
54px 30px var(--spread) var(--bs-pin),
60px 30px var(--spread) var(--bs-pin),
66px 30px var(--spread) var(--bs-pin),
72px 30px var(--spread) var(--bs-bla),
78px 30px var(--spread) var(--bs-bla),
84px 30px var(--spread) var(--bs-bla),
90px 30px var(--spread) var(--bs-bla),
96px 30px var(--spread) var(--bs-bla),
114px 30px var(--spread) var(--bs-gre),
132px 30px var(--spread) var(--bs-gre),
138px 30px var(--spread) var(--bs-gre),
0px 36px var(--spread) var(--bs-red),
6px 36px var(--spread) var(--bs-red),
12px 36px var(--spread) var(--bs-red),
24px 36px var(--spread) var(--bs-bla),
48px 36px var(--spread) var(--bs-bla),
54px 36px var(--spread) var(--bs-bla),
60px 36px var(--spread) var(--bs-pin),
66px 36px var(--spread) var(--bs-pin),
72px 36px var(--spread) var(--bs-bla),
78px 36px var(--spread) var(--bs-bla),
84px 36px var(--spread) var(--bs-bla),
90px 36px var(--spread) var(--bs-bla),
96px 36px var(--spread) var(--bs-bla),
120px 36px var(--spread) var(--bs-gre),
132px 36px var(--spread) var(--bs-gre),
138px 36px var(--spread) var(--bs-gre),
0px 42px var(--spread) var(--bs-red),
6px 42px var(--spread) var(--bs-red),
12px 42px var(--spread) var(--bs-red),
24px 42px var(--spread) var(--bs-bla),
48px 42px var(--spread) var(--bs-pin),
54px 42px var(--spread) var(--bs-whi),
60px 42px var(--spread) var(--bs-pin),
66px 42px var(--spread) var(--bs-pin),
72px 42px var(--spread) var(--bs-bla),
78px 42px var(--spread) var(--bs-bla),
84px 42px var(--spread) var(--bs-bla),
90px 42px var(--spread) var(--bs-bla),
96px 42px var(--spread) var(--bs-bla),
102px 42px var(--spread) var(--bs-bla),
132px 42px var(--spread) var(--bs-gre),
138px 42px var(--spread) var(--bs-gre),
6px 48px var(--spread) var(--bs-red),
24px 48px var(--spread) var(--bs-bla),
48px 48px var(--spread) var(--bs-bla),
54px 48px var(--spread) var(--bs-bla),
60px 48px var(--spread) var(--bs-bla),
66px 48px var(--spread) var(--bs-pin),
72px 48px var(--spread) var(--bs-pin),
78px 48px var(--spread) var(--bs-bla),
84px 48px var(--spread) var(--bs-bla),
90px 48px var(--spread) var(--bs-bla),
96px 48px var(--spread) var(--bs-bla),
102px 48px var(--spread) var(--bs-bla),
132px 48px var(--spread) var(--bs-bla),
138px 48px var(--spread) var(--bs-bla),
24px 54px var(--spread) var(--bs-bla),
48px 54px var(--spread) var(--bs-pin),
54px 54px var(--spread) var(--bs-pin),
60px 54px var(--spread) var(--bs-bla),
66px 54px var(--spread) var(--bs-bla),
72px 54px var(--spread) var(--bs-pin),
78px 54px var(--spread) var(--bs-bla),
84px 54px var(--spread) var(--bs-bla),
90px 54px var(--spread) var(--bs-bla),
96px 54px var(--spread) var(--bs-bla),
102px 54px var(--spread) var(--bs-bla),
108px 54px var(--spread) var(--bs-bla),
132px 54px var(--spread) var(--bs-bla),
138px 54px var(--spread) var(--bs-bla),
24px 60px var(--spread) var(--bs-bla),
42px 60px var(--spread) var(--bs-bla),
48px 60px var(--spread) var(--bs-bla),
54px 60px var(--spread) var(--bs-pin),
60px 60px var(--spread) var(--bs-bla),
66px 60px var(--spread) var(--bs-bla),
72px 60px var(--spread) var(--bs-bla),
78px 60px var(--spread) var(--bs-bla),
84px 60px var(--spread) var(--bs-bla),
90px 60px var(--spread) var(--bs-whi),
96px 60px var(--spread) var(--bs-red),
102px 60px var(--spread) var(--bs-red),
108px 60px var(--spread) var(--bs-red),
114px 60px var(--spread) var(--bs-red),
120px 60px var(--spread) var(--bs-red),
132px 60px var(--spread) var(--bs-bla),
138px 60px var(--spread) var(--bs-bla),
24px 66px var(--spread) var(--bs-bla),
36px 66px var(--spread) var(--bs-red),
42px 66px var(--spread) var(--bs-bla),
48px 66px var(--spread) var(--bs-bla),
54px 66px var(--spread) var(--bs-bla),
60px 66px var(--spread) var(--bs-bla),
66px 66px var(--spread) var(--bs-bla),
72px 66px var(--spread) var(--bs-bla),
78px 66px var(--spread) var(--bs-bla),
84px 66px var(--spread) var(--bs-whi),
90px 66px var(--spread) var(--bs-whi),
96px 66px var(--spread) var(--bs-red),
102px 66px var(--spread) var(--bs-red),
108px 66px var(--spread) var(--bs-bla),
114px 66px var(--spread) var(--bs-bla),
120px 66px var(--spread) var(--bs-bla),
126px 66px var(--spread) var(--bs-bla),
132px 66px var(--spread) var(--bs-bla),
138px 66px var(--spread) var(--bs-bla),
24px 72px var(--spread) var(--bs-bla),
30px 72px var(--spread) var(--bs-bla),
36px 72px var(--spread) var(--bs-red),
42px 72px var(--spread) var(--bs-whi),
48px 72px var(--spread) var(--bs-whi),
54px 72px var(--spread) var(--bs-bla),
60px 72px var(--spread) var(--bs-bla),
66px 72px var(--spread) var(--bs-bla),
72px 72px var(--spread) var(--bs-bla),
78px 72px var(--spread) var(--bs-whi),
84px 72px var(--spread) var(--bs-whi),
90px 72px var(--spread) var(--bs-red),
96px 72px var(--spread) var(--bs-red),
102px 72px var(--spread) var(--bs-bla),
108px 72px var(--spread) var(--bs-bla),
114px 72px var(--spread) var(--bs-yel),
120px 72px var(--spread) var(--bs-yel),
126px 72px var(--spread) var(--bs-yel),
132px 72px var(--spread) var(--bs-bla),
138px 72px var(--spread) var(--bs-bla),
24px 78px var(--spread) var(--bs-bla),
30px 78px var(--spread) var(--bs-bla),
36px 78px var(--spread) var(--bs-red),
42px 78px var(--spread) var(--bs-red),
48px 78px var(--spread) var(--bs-whi),
54px 78px var(--spread) var(--bs-bla),
60px 78px var(--spread) var(--bs-blu),
66px 78px var(--spread) var(--bs-blu),
72px 78px var(--spread) var(--bs-bla),
78px 78px var(--spread) var(--bs-whi),
84px 78px var(--spread) var(--bs-red),
90px 78px var(--spread) var(--bs-red),
96px 78px var(--spread) var(--bs-red),
102px 78px var(--spread) var(--bs-bla),
108px 78px var(--spread) var(--bs-yel),
114px 78px var(--spread) var(--bs-bla),
120px 78px var(--spread) var(--bs-bla),
126px 78px var(--spread) var(--bs-bla),
132px 78px var(--spread) var(--bs-bla),
138px 78px var(--spread) var(--bs-bla),
18px 84px var(--spread) var(--bs-yel),
24px 84px var(--spread) var(--bs-yel),
30px 84px var(--spread) var(--bs-bla),
36px 84px var(--spread) var(--bs-bla),
42px 84px var(--spread) var(--bs-red),
48px 84px var(--spread) var(--bs-whi),
54px 84px var(--spread) var(--bs-bla),
60px 84px var(--spread) var(--bs-bla),
66px 84px var(--spread) var(--bs-bla),
72px 84px var(--spread) var(--bs-bla),
78px 84px var(--spread) var(--bs-whi),
84px 84px var(--spread) var(--bs-red),
90px 84px var(--spread) var(--bs-red),
96px 84px var(--spread) var(--bs-bla),
102px 84px var(--spread) var(--bs-bla),
108px 84px var(--spread) var(--bs-yel),
114px 84px var(--spread) var(--bs-bla),
120px 84px var(--spread) var(--bs-red),
126px 84px var(--spread) var(--bs-red),
132px 84px var(--spread) var(--bs-bla),
138px 84px var(--spread) var(--bs-bla),
18px 90px var(--spread) var(--bs-bla),
24px 90px var(--spread) var(--bs-bla),
30px 90px var(--spread) var(--bs-yel),
36px 90px var(--spread) var(--bs-bla),
42px 90px var(--spread) var(--bs-red),
48px 90px var(--spread) var(--bs-whi),
54px 90px var(--spread) var(--bs-bla),
60px 90px var(--spread) var(--bs-blu),
66px 90px var(--spread) var(--bs-blu),
72px 90px var(--spread) var(--bs-bla),
78px 90px var(--spread) var(--bs-whi),
84px 90px var(--spread) var(--bs-red),
90px 90px var(--spread) var(--bs-red),
96px 90px var(--spread) var(--bs-bla),
102px 90px var(--spread) var(--bs-yel),
108px 90px var(--spread) var(--bs-bla),
114px 90px var(--spread) var(--bs-bla),
120px 90px var(--spread) var(--bs-red),
126px 90px var(--spread) var(--bs-red),
132px 90px var(--spread) var(--bs-bla),
138px 90px var(--spread) var(--bs-bla),
12px 96px var(--spread) var(--bs-bla),
18px 96px var(--spread) var(--bs-bla),
24px 96px var(--spread) var(--bs-bla),
30px 96px var(--spread) var(--bs-bla),
36px 96px var(--spread) var(--bs-bla),
42px 96px var(--spread) var(--bs-red),
48px 96px var(--spread) var(--bs-whi),
54px 96px var(--spread) var(--bs-bla),
60px 96px var(--spread) var(--bs-bla),
66px 96px var(--spread) var(--bs-bla),
72px 96px var(--spread) var(--bs-bla),
78px 96px var(--spread) var(--bs-whi),
84px 96px var(--spread) var(--bs-red),
90px 96px var(--spread) var(--bs-red),
96px 96px var(--spread) var(--bs-bla),
102px 96px var(--spread) var(--bs-yel),
108px 96px var(--spread) var(--bs-bla),
114px 96px var(--spread) var(--bs-red),
120px 96px var(--spread) var(--bs-red),
126px 96px var(--spread) var(--bs-red),
132px 96px var(--spread) var(--bs-bla),
138px 96px var(--spread) var(--bs-bla),
12px 102px var(--spread) var(--bs-bla),
18px 102px var(--spread) var(--bs-grd),
24px 102px var(--spread) var(--bs-grd),
30px 102px var(--spread) var(--bs-bla),
36px 102px var(--spread) var(--bs-bla),
42px 102px var(--spread) var(--bs-red),
48px 102px var(--spread) var(--bs-whi),
54px 102px var(--spread) var(--bs-bla),
60px 102px var(--spread) var(--bs-blu),
66px 102px var(--spread) var(--bs-blu),
72px 102px var(--spread) var(--bs-bla),
78px 102px var(--spread) var(--bs-bla),
84px 102px var(--spread) var(--bs-bla),
90px 102px var(--spread) var(--bs-bla),
96px 102px var(--spread) var(--bs-bla),
102px 102px var(--spread) var(--bs-bla),
108px 102px var(--spread) var(--bs-bla),
114px 102px var(--spread) var(--bs-bla),
120px 102px var(--spread) var(--bs-bla),
126px 102px var(--spread) var(--bs-bla),
132px 102px var(--spread) var(--bs-bla),
138px 102px var(--spread) var(--bs-bla),
144px 102px var(--spread) var(--bs-bla),
12px 108px var(--spread) var(--bs-bla),
18px 108px var(--spread) var(--bs-bla),
24px 108px var(--spread) var(--bs-bla),
30px 108px var(--spread) var(--bs-bla),
36px 108px var(--spread) var(--bs-bla),
42px 108px var(--spread) var(--bs-red),
48px 108px var(--spread) var(--bs-whi),
54px 108px var(--spread) var(--bs-bla),
60px 108px var(--spread) var(--bs-bla),
66px 108px var(--spread) var(--bs-bla),
72px 108px var(--spread) var(--bs-bla),
78px 108px var(--spread) var(--bs-bla),
84px 108px var(--spread) var(--bs-yel),
90px 108px var(--spread) var(--bs-red),
96px 108px var(--spread) var(--bs-yel),
102px 108px var(--spread) var(--bs-red),
108px 108px var(--spread) var(--bs-yel),
114px 108px var(--spread) var(--bs-bla),
120px 108px var(--spread) var(--bs-pin),
126px 108px var(--spread) var(--bs-bla),
132px 108px var(--spread) var(--bs-pin),
138px 108px var(--spread) var(--bs-pin),
144px 108px var(--spread) var(--bs-bla),
12px 114px var(--spread) var(--bs-bla),
18px 114px var(--spread) var(--bs-pin),
24px 114px var(--spread) var(--bs-pin),
30px 114px var(--spread) var(--bs-bla),
36px 114px var(--spread) var(--bs-bla),
42px 114px var(--spread) var(--bs-bla),
48px 114px var(--spread) var(--bs-bla),
54px 114px var(--spread) var(--bs-bla),
60px 114px var(--spread) var(--bs-bla),
66px 114px var(--spread) var(--bs-bla),
72px 114px var(--spread) var(--bs-red),
78px 114px var(--spread) var(--bs-yel),
84px 114px var(--spread) var(--bs-red),
90px 114px var(--spread) var(--bs-bla),
96px 114px var(--spread) var(--bs-bla),
102px 114px var(--spread) var(--bs-bla),
108px 114px var(--spread) var(--bs-bla),
114px 114px var(--spread) var(--bs-bla),
120px 114px var(--spread) var(--bs-bla),
126px 114px var(--spread) var(--bs-bla),
132px 114px var(--spread) var(--bs-pin),
138px 114px var(--spread) var(--bs-pin),
144px 114px var(--spread) var(--bs-bla);
}
// Original Shot by
// Michael B. Myers Jr.
// https://dribbble.com/drawsgood
// https://dribbble.com/shots/6376259-Kings-8Bit-Deck
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.