90s Boombox Design using CSS & Html


A simple css boombox design made using pure CSS and HTML. The Boom box is made by Sonal Shah.

The codes are separated in two parts, so copy all two parts combine them and after that run the code. You can use two separate files for HTML, CSS & Js or you can just use one index.html file.

Html Code

Here is the Html Code.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - 90s Boombox</title>
</head>
<body>
  <body>
	<div class="juke-box"></div>
	<div class="speaker-small"></div>
	<div class="speaker-small-two"></div>
	<div class="speaker-large"></div>
	<div class="speaker-large-two"></div>
	<div class="speaker-large-inner"></div>
	<div class="speaker-large-inner-two"></div>
	<div class="jukebox-label"></div>
	<div class="jukebox-cassette-block"></div>
	<div class="jukebox-cassette-holder"></div>
	<div class="jukebox-top-label"></div>
	<div class="label-detail"></div>
	<div class="top-box"></div>
	<div class="top-inner-box"></div>
	<div class="hz-line"></div>
	<div class="hz-line-two"></div>
	<div class="hz-line-three"></div>
	<div class="hz-line-four"></div>
	<div class="green-cube"></div>
	<div class="green-cube-two"></div>
	<div class="green-cube-three"></div>
	<div class="green-cube-four"></div>
	<div class="green-cube-five"></div>
	<div class="green-cube-six"></div>
	<div class="red-cube-seven"></div>
	<div class="green-cube-eight"></div>
	<div class="green-cube-nine"></div>
	<div class="green-cube-ten"></div>
	<div class="green-cube-eleven"></div>
	<div class="green-cube-twelve"></div>
	<div class="green-cube-thirteen"></div>
	<div class="green-cube-fourteen"></div>
	<div class="green-cube-fifteen"></div>
	<div class="green-cube-sixteen"></div>
	<div class="red-cube-seventeen"></div>
	<div class="green-cube-eightteen"></div>
	<div class="green-cube-nineteen"></div>
	<div class="green-cube-twenty"></div>
	<div class="green-cube-twenty-one"></div>
	<div class="red-cube-twenty-two"></div>
	<div class="green-cube-twenty-three"></div>
	<div class="green-cube-twenty-four"></div>
	<div class="red-line"></div>
	<div class="panel-hz-line"></div>
	<div class="cover-box"></div>
	<div class="hidden-box"></div>
	<div class="audio-btn"></div>
	<div class="audio-btn-two"></div>
	<div class="audio-btn-three"></div>
	<div class="audio-btn-four"></div>
	<div class="audio-cube-btn"></div>
	<div class="audio-cube-btn-two"></div>
	<div class="audio-cube-btn-three"></div>
	<div class="audio-cube-btn-four"></div>
	<div class="audio-cube-btn-five"></div>
	<div class="audio-cube-btn-six"></div>
	<div class="audio-cube-btn-seven"></div>
	<div class="cassette-detail"></div>
	<div class="cassette-detail-two"></div>
	<div class="light-box"></div>
	<div class="detail"></div>
	<div class="detail-two"></div>
	<div class="detail-three"></div>
	<div class="detail-four"></div>
	<div class="detail-five"></div>
	<div class="detail-six"></div>
	<div class="detail-seven"></div>
	<div class="detail-small"></div>
	<div class="detail-small-two"></div>
	<div class="detail-small-three"></div>
	<div class="detail-small-four"></div>
	<div class="detail-small-five"></div>
	<div class="detail-small-six"></div>
	<div class="detail-small-seven"></div>
	<div class="detail-small-eight"></div>
	<div class="detail-small-nine"></div>
	<div class="detail-small-ten"></div>
	<div class="detail-small-eleven"></div>
	<div class="detail-small-twelve"></div>
	<div class="detail-small-thirteen"></div>
	<div class="detail-small-fourteen"></div>
	<div class="handle-detail"></div>
	<div class="handle-detail-two"></div>
	<div class="handle-detail-three"></div>
	<div class="handle-detail-four"></div>
	<div class="handle-detail-five"></div>
	<div class="volume-knob"></div>
	<div class="volume-knob-detail"></div>
</body>
</html>

CSS Code

Here is the CSS Code

@import url("https://fonts.googleapis.com/css2?family=Montserrat:[email protected];700&display=swap");

*,
*:before,
*:after {
	box-sizing: border-box;
}

:root {
	--montserrat-font: "Montserrat", sans-serif;
	--system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--primary-background: #f5f5dc;
	--juke-box-primary-bg: #8f8c7f;
	--juke-box-border: #79776c;
	--small-font: 2;
	--med-font: 3;
	--large-font: 5;
	--border-small: 0.4;
	--border-med: 0.5;
	--border-large: 1;
	--juke-box-h: 30.5;
	--juke-box-w: 68;
	--speaker-small-w: 5;
	--speaker-small-h: 5;
	--speaker-large-w: 21.5;
	--speaker-large-h: 21.5;
	--speaker-lg-inner-w: 5;
	--speaker-lg-inner-h: 5;
	--juke-box-label-w: 16;
	--juke-box-label-h: 7;
	--box-top-h: 7.25;
	--top-inner-box-h: 4.75;
	--top-inner-box-w: 56;
	--hz-line-w: 0.3;
	--cube-w: 0.68;
	--cube-h: 0.68;
	--red-line-w: 0.3;
	--red-line-h: 4.1;
	--panel-line-w: 39;
	--panel-line-h: 0.4;
	--bar-h: 7;
	--bar-w: 1.75;
	--cross-bar-w: 54;
	--cross-bar-h: 2.25;
	--audio-btn-w: 3.5;
	--audio-btn-h: 1.35;
	--audio-cube-btn-w: 2.25;
	--audio-cube-btn-h: 1.75;
	--cassette-detail-s: 2;
	--light-box-w: 2.75;
	--light-box-h: 1.85;
	--detail-w: 10;
	--detail-h: 1;
	--volume-knob-h: 6.8;
	--volume-knob-w: 1.9;
}

body {
	margin: 0;
	padding: 0;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--primary-background);
}

.juke-box {
	height: calc(var(--juke-box-h) * 1vmin);
	width: calc(var(--juke-box-w) * 1vmin);
	background: linear-gradient(
		to bottom,
		#b6b3a2 13%,
		var(--juke-box-primary-bg) 13%
	);
	background: linear-gradient(
		to bottom,
		#a8a597 13%,
		var(--juke-box-primary-bg) 13%
	);
	border-radius: 0.3rem;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
}

.speaker-small,
.speaker-small-two {
	position: fixed;
	height: calc(var(--speaker-small-h) * 1vmin);
	width: calc(var(--speaker-small-w) * 1vmin);
	background: hsl(0, 0%, 20%);
	border-radius: 50%;
	box-shadow: 0px 0px 0px calc(var(--border-med) * 1vmin) #ecf0f1;
}

.speaker-small {
	top: 5%;
	left: 2%;
}

.speaker-small-two {
	top: 5%;
	right: 2%;
}

.speaker-large,
.speaker-large-two {
	position: fixed;
	height: calc(var(--speaker-large-h) * 1vmin);
	width: calc(var(--speaker-large-w) * 1vmin);
	border-radius: 50%;
	top: 19%;
	background: hsl(0, 0%, 20%);
	box-shadow: 0 0 0 calc(var(--border-large) * 1vmin) #ecf0f1;
}

.speaker-large {
	left: 3%;
}

.speaker-large-two {
	right: 3%;
}

.speaker-large-inner,
.speaker-large-inner-two {
	position: fixed;
	width: calc(var(--speaker-lg-inner-w) * 1vmin);
	height: calc(var(--speaker-lg-inner-h) * 1vmin);
	top: 45%;
	border-radius: 50%;
	background: hsl(0, 0%, 20%);
	box-shadow: 0 0 0 calc(var(--border-med) * 1vmin) #555;
}

.speaker-large-inner {
	left: 15%;
}

.speaker-large-inner-two {
	right: 15%;
}

.jukebox-label {
	position: fixed;
	top: 68%;
	left: 38.3%;
	background: transparent;
	border-radius: 0.25rem;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	width: calc(var(--juke-box-label-w) * 1vmin);
	height: calc(var(--juke-box-label-h) * 1vmin);
}

.jukebox-cassette-block {
	position: fixed;
	top: 20%;
	left: 38.3%;
	border-radius: 0.25rem;
	background: rgb(220, 220, 220);
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	width: calc(var(--juke-box-label-w) * 1vmin);
	height: calc(var(--juke-box-label-h) * 1.85 * 1vmin);
}

.jukebox-top-label {
	position: fixed;
	top: 7%;
	left: 38.3%;
	font-family: var(--system-font);
	font-family: var(--montserrat-font);
	line-height: 1;
	word-spacing: -4px;
	font-size: calc(var(--font-small) * 1vmin);
	text-align: center;
	border-radius: calc(var(--border-small) * 1vmin);
	background: rgb(220, 220, 220);
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	width: calc(var(--juke-box-label-w) * 1vmin);
	height: calc(var(--juke-box-label-h) / 2.3 * 1vmin);
}

.jukebox-cassette-holder {
	width: calc(var(--juke-box-label-w) / 1.15 * 1vmin);
	height: calc(var(--juke-box-label-h) * 1.3 * 1vmin);
	background: hsl(0, 0%, 20%);
	position: fixed;
	top: 25%;
	left: 39.95%;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
}

.top-box {
	width: calc(var(--juke-box-w) * 1vmin);
	height: calc(var(--box-top-h) * 1.075 * 1vmin);
	position: fixed;
	top: -22%;
	top: -24%;
	background: rgb(230, 230, 230);
	border-radius: calc(var(--border-small) * 1.5 * 1vmin);
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	filter: brightness(105%);
}

.top-inner-box {
	height: calc(var(--top-inner-box-h) * 1vmin);
	width: calc(var(--top-inner-box-w) * 1vmin);
	background: #333;
	position: fixed;
	top: -18.5%;
	left: 8.75%;
	border: calc(var(--border-small) / 1.1 * 1vmin) solid
		var(--juke-box-primary-bg);
	border-radius: calc(var(--border-small) * 1.5 * 1vmin);
	z-index: 999;
}

.hz-line,
.hz-line-two,
.hz-line-three,
.hz-line-four {
	position: fixed;
	height: calc(var(--hz-line-w) * 1vmin);
	width: calc(var(--juke-box-w) / 1.01 * 1vmin);
	background: hsl(0, 0%, 15%);
	background: var(--juke-box-border);
	z-index: 99;
	left: 0.5%;
}

.hz-line {
	top: -8%;
}

.hz-line-two {
	top: -10%;
}

.hz-line-three {
	top: -12%;
}

.hz-line-four {
	top: -14.4%;
}

.green-cube,
.green-cube-two,
.green-cube-three,
.green-cube-four,
.green-cube-five,
.green-cube-six,
.red-cube-seven,
.green-cube-eight,
.green-cube-nine,
.green-cube-ten,
.green-cube-eleven,
.green-cube-twelve,
.green-cube-thirteen,
.green-cube-fourteen,
.green-cube-fifteen,
.green-cube-sixteen,
.red-cube-seventeen,
.green-cube-eightteen,
.green-cube-nineteen,
.green-cube-twenty,
.green-cube-twenty-one,
.red-cube-twenty-two,
.green-cube-twenty-three,
.green-cube-twenty-four {
	background: #82e0aa;
	position: fixed;
	height: calc(var(--cube-h) * 1vmin);
	width: calc(var(--cube-w) * 1vmin);
	border-radius: calc(var(--border-small) / 2.5 * 1vmin);
	z-index: 999;
}

/* Row 1 */
.green-cube,
.green-cube-two,
.green-cube-three,
.green-cube-eight,
.green-cube-nine,
.green-cube-ten,
.green-cube-eleven,
.green-cube-twelve,
.green-cube-nineteen,
.green-cube-twenty-three {
	top: -7%;
}

.green-cube {
	left: 15.25%;
}

.green-cube-two {
	left: 16.5%;
}

.green-cube-three {
	left: 17.8%;
}

.green-cube-eight {
	left: 19.03%;
}

.green-cube-nine {
	left: 20.25%;
}

.green-cube-ten {
	left: 21.5%;
}

.green-cube-eleven {
	left: 22.9%;
}

.green-cube-twelve {
	left: 24.12%;
}

.green-cube-nineteen {
	left: 25.35%;
}

.green-cube-twenty-three {
	left: 26.75%;
}

/* Row 2 */

.green-cube-four,
.green-cube-five,
.green-cube-thirteen,
.green-cube-fourteen,
.green-cube-fifteen,
.green-cube-eightteen,
.green-cube-twenty-four {
	top: -9.79%;
}

.green-cube-four {
	left: 16.5%;
}

.green-cube-five {
	left: 17.8%;
}

.green-cube-thirteen {
	left: 25.35%;
}

.green-cube-fourteen {
	left: 20.25%;
}

.green-cube-fifteen {
	left: 21.5%;
}

.green-cube-eightteen {
	left: 22.9%;
}

.green-cube-twenty-four {
	left: 26.75%;
}

/* Row 3 */
.green-cube-six,
.green-cube-sixteen,
.green-cube-twenty,
.green-cube-twenty-one {
	top: -12.5%;
}
.green-cube-six {
	left: 17.8%;
}
.green-cube-sixteen {
	left: 20.25%;
}

.green-cube-twenty {
	left: 22.9%;
}

.green-cube-twenty-one {
	left: 25.35%;
}

/* Row 4 */
.red-cube-seven,
.red-cube-seventeen,
.red-cube-twenty-two {
	top: -15.21%;
	background: #e74c3c;
	background: #ec7063;
}

.red-cube-seven {
	left: 17.8%;
}

.red-cube-seventeen {
	left: 20.25%;
}

.red-cube-twenty-two {
	left: 25.35%;
}

.red-line {
	position: fixed;
	top: -17.5%;
	left: 69%;
	background: #ec7063;
	height: calc(var(--red-line-h) * 1vmin);
	width: calc(var(--red-line-w) * 1vmin);
	z-index: 1000;
}

.panel-hz-line {
	position: fixed;
	height: calc(var(--panel-line-h) * 1vmin);
	width: calc(var(--panel-line-w) * 1vmin);
	left: 31%;
	top: -11.5%;
	background: var(--juke-box-primary-bg);
	border-radius: calc(var(--border-small) * 1vmin);
	z-index: 999;
}

.cover-box {
	position: fixed;
	height: calc(var(--cross-bar-h) * 4 * 1vmin);
	width: calc(var(--cross-bar-w) * 1vmin);
	background: linear-gradient(
		to right,
		rgb(240, 240, 240) 6%,
		hsl(0, 0%, 25%) 6%,
		hsl(0, 0%, 25%) 94%,
		rgb(240, 240, 240) 6%
	);
	/*   background: rgb(240, 240, 240); */
	top: -51.5%;
	top: -53.5%;
	left: 10%;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	border-bottom: 0;
	border-top-left-radius: calc(var(--border-small) * 2 * 1vmin);
	border-top-right-radius: calc(var(--border-small) * 2 * 1vmin);
	z-index: 99;
	filter: brightness(97%);
}

.hidden-box {
	position: fixed;
	height: calc(var(--cross-bar-h) * 3 * 1vmin);
	width: calc(var(--cross-bar-w) / 1.06 * 1vmin);
	background: var(--primary-background);
	top: -44%;
	top: -46.2%;
	left: 16.75%;
	left: 12.35%;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	border-bottom: calc(var(--border-small) * 2 * 1vmin);
	border-top-right-radius: calc(var(--border-small) * 2 * 1vmin);
	border-top-left-radius: calc(var(--border-small) * 2 * 1vmin);
	z-index: 1000;
}

.audio-btn,
.audio-btn-two,
.audio-btn-three,
.audio-btn-four {
	position: fixed;
	background: hsl(0, 0%, 25%);
	width: calc(var(--audio-btn-w) * 1vmin);
	height: calc(var(--audio-btn-h) * 1vmin);
	border-top-right-radius: calc(var(--border-small) * 1vmin);
	border-top-left-radius: calc(var(--border-small) * 1vmin);
	top: -26.2%;
	top: -28.5%;
	z-index: 1100;
}

.audio-btn {
	left: 15.5%;
}

.audio-btn-two {
	left: 21.175%;
}

.audio-btn-three {
	left: 26.8%;
}

.audio-btn-four {
	right: 18%;
}

.audio-cube-btn,
.audio-cube-btn-two,
.audio-cube-btn-three,
.audio-cube-btn-four,
.audio-cube-btn-five,
.audio-cube-btn-six,
.audio-cube-btn-seven {
	position: fixed;
	top: -27.5%;
	top: -29.75%;
	width: calc(var(--audio-cube-btn-w) * 1vmin);
	height: calc(var(--audio-cube-btn-h) * 1vmin);
	background: hsl(0, 0%, 25%);
	border-top-right-radius: calc(var(--border-small) * 1vmin);
	border-top-left-radius: calc(var(--border-small) * 1vmin);
	z-index: 1100;
}

.audio-cube-btn {
	left: 40%;
}

.audio-cube-btn-two {
	left: 43.8%;
}

.audio-cube-btn-three {
	left: 47.65%;
}

.audio-cube-btn-four {
	left: 51.35%;
}

.audio-cube-btn-five {
	left: 55%;
}

.audio-cube-btn-six {
	left: 58.75%;
}

.audio-cube-btn-seven {
	left: 62.5%;
}

.cassette-detail,
.cassette-detail-two {
	position: fixed;
	background: hsl(0, 0%, 13%);
	height: calc(var(--cassette-detail-s) * 1vmin);
	width: calc(var(--cassette-detail-s) * 1vmin);
	border-radius: calc(var(--border-small) * 3 * 1vmin);
	top: 36%;
	z-index: 1000;
}

.cassette-detail {
	left: 44.05%;
}

.cassette-detail-two {
	left: 53%;
}

.light-box {
	position: fixed;
	top: 36.4%;
	left: 48%;
	background: var(--juke-box-primary-bg);
	opacity: 0.45;
	height: calc(var(--light-box-h) * 1vmin);
	width: calc(var(--light-box-w) * 1vmin);
	border-radius: calc(var(--border-small) * 1.1 * 1vmin);
	z-index: 1000;
}

.detail,
.detail-two,
.detail-three,
.detail-four,
.detail-five,
.detail-six,
.detail-seven {
	position: fixed;
	background: #9e9b8d;
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	z-index: 1100;
}

.detail {
	top: 94.5%;
	left: 2%;
	height: calc(var(--detail-h) / 1.45 * 1vmin);
	width: calc(var(--detail-w) / 1.25 * 1vmin);
}

.detail-two {
	top: 85%;
	left: 49%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-w) / 1.5 * 1vmin);
}

.detail-three {
	top: 94.5%;
	right: 4%;
	height: calc(var(--detail-h) / 1.45 * 1vmin);
	width: calc(var(--detail-w) / 1.3 * 1vmin);
}

.detail-four {
	top: 6%;
	right: 13%;
	height: calc(var(--detail-h) / 1.45 * 1vmin);
	width: calc(var(--detail-w) * 1.1 * 1vmin);
	background: #c2bfb0;
	background: #c5c2b0;
}

.detail-five {
	top: 6%;
	left: 16%;
	height: calc(var(--detail-h) / 1.45 * 1vmin);
	width: calc(var(--detail-w) * 1.3 * 1vmin);
	background: #c2bfb0;
	background: #c5c2b0;
}

.detail-six {
	top: 71%;
	left: 42.5%;
	height: calc(var(--detail-h) / 1.515 * 1vmin);
	width: calc(var(--detail-w) / 1.3 * 1vmin);
}

.detail-seven {
	top: 27.7%;
	left: 47%;
	height: calc(var(--detail-h) / 1.515 * 1vmin);
	width: calc(var(--detail-w) / 1.3 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
}

.detail-small {
	position: fixed;
	top: 94.25%;
	right: 1%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #9e9b8d;
}

.detail-small-two {
	position: fixed;
	top: 70.75%;
	right: 40%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #9e9b8d;
}

.detail-small-three {
	position: fixed;
	top: 70.9%;
	left: 39.75%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #9e9b8d;
}

.detail-small-four {
	position: fixed;
	top: 27.5%;
	left: 44.5%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
}

.detail-small-five {
	position: fixed;
	top: -16%;
	left: 10%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
	z-index: 1100;
}

.detail-small-six {
	position: fixed;
	top: -8%;
	right: 11.5%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
	z-index: 1100;
}

.detail-small-seven {
	position: fixed;
	top: -16.25%;
	right: 50%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
	z-index: 1100;
}

.detail-small-eight {
	position: fixed;
	top: 6%;
	left: 13.5%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #c5c2b0;
	z-index: 1100;
}

.detail-small-nine {
	position: fixed;
	top: 6%;
	right: 30%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #c5c2b0;
	z-index: 1100;
}

.detail-small-ten {
	position: fixed;
	top: 55.5%;
	right: 39.75%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #fff;
	z-index: 1100;
}

.detail-small-eleven {
	position: fixed;
	top: 55.5%;
	left: 39.75%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #fff;
	z-index: 1100;
}

.detail-small-twelve {
	position: fixed;
	top: 56.25%;
	left: 53%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 3.5 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #fff;
	z-index: 1100;
}

.detail-small-thirteen {
	position: fixed;
	top: -15.8%;
	left: 36%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 8 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	z-index: 1100;
	opacity: 0.4;
}

.detail-small-fourteen {
	position: fixed;
	top: -8%;
	right: 14%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 4 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	z-index: 1100;
	opacity: 0.4;
}

.handle-detail {
	position: fixed;
	top: -48.45%;
	top: -50.75%;
	left: 20%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 8 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	z-index: 1100;
	opacity: 0.4;
}

.handle-detail-two {
	position: fixed;
	top: -48.45%;
	top: -50.75%;
	left: 34%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 2 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	z-index: 1100;
	opacity: 0.4;
}

.handle-detail-three {
	position: fixed;
	top: -48.45%;
	top: -50.75%;
	left: 12.3%;
	height: calc(var(--detail-h) / 1.2 * 1vmin);
	width: calc(var(--detail-h) * 1.5 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #fff;
	z-index: 1100;
}

.handle-detail-four {
	position: fixed;
	top: -48.45%;
	top: -50.75%;
	right: 12%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1.9 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #fff;
	z-index: 1100;
}

.handle-detail-five {
	position: fixed;
	top: -48.45%;
	top: -50.75%;
	right: 17%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1.3 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
	z-index: 1100;
}

.volume-knob {
	position: fixed;
	top: -7.7%;
	right: -2.075%;
	height: calc(var(--volume-knob-h) * 1vmin);
	width: calc(var(--volume-knob-w) * 1vmin);
	background: hsl(0, 0%, 20%);
	border-radius: calc(var(--border-small) / 1.1 * 1vmin);
	z-index: -1;
}

.volume-knob-detail {
	position: fixed;
	top: -48.45%;
	top: -5%;
	right: -1.65%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) / 1.1 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.6;
	z-index: 1100;
}

Complete Code

Here is the Complete Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - 90s Boombox</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:[email protected];700&display=swap");

*,
*:before,
*:after {
	box-sizing: border-box;
}

:root {
	--montserrat-font: "Montserrat", sans-serif;
	--system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--primary-background: #f5f5dc;
	--juke-box-primary-bg: #8f8c7f;
	--juke-box-border: #79776c;
	--small-font: 2;
	--med-font: 3;
	--large-font: 5;
	--border-small: 0.4;
	--border-med: 0.5;
	--border-large: 1;
	--juke-box-h: 30.5;
	--juke-box-w: 68;
	--speaker-small-w: 5;
	--speaker-small-h: 5;
	--speaker-large-w: 21.5;
	--speaker-large-h: 21.5;
	--speaker-lg-inner-w: 5;
	--speaker-lg-inner-h: 5;
	--juke-box-label-w: 16;
	--juke-box-label-h: 7;
	--box-top-h: 7.25;
	--top-inner-box-h: 4.75;
	--top-inner-box-w: 56;
	--hz-line-w: 0.3;
	--cube-w: 0.68;
	--cube-h: 0.68;
	--red-line-w: 0.3;
	--red-line-h: 4.1;
	--panel-line-w: 39;
	--panel-line-h: 0.4;
	--bar-h: 7;
	--bar-w: 1.75;
	--cross-bar-w: 54;
	--cross-bar-h: 2.25;
	--audio-btn-w: 3.5;
	--audio-btn-h: 1.35;
	--audio-cube-btn-w: 2.25;
	--audio-cube-btn-h: 1.75;
	--cassette-detail-s: 2;
	--light-box-w: 2.75;
	--light-box-h: 1.85;
	--detail-w: 10;
	--detail-h: 1;
	--volume-knob-h: 6.8;
	--volume-knob-w: 1.9;
}

body {
	margin: 0;
	padding: 0;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--primary-background);
}

.juke-box {
	height: calc(var(--juke-box-h) * 1vmin);
	width: calc(var(--juke-box-w) * 1vmin);
	background: linear-gradient(
		to bottom,
		#b6b3a2 13%,
		var(--juke-box-primary-bg) 13%
	);
	background: linear-gradient(
		to bottom,
		#a8a597 13%,
		var(--juke-box-primary-bg) 13%
	);
	border-radius: 0.3rem;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
}

.speaker-small,
.speaker-small-two {
	position: fixed;
	height: calc(var(--speaker-small-h) * 1vmin);
	width: calc(var(--speaker-small-w) * 1vmin);
	background: hsl(0, 0%, 20%);
	border-radius: 50%;
	box-shadow: 0px 0px 0px calc(var(--border-med) * 1vmin) #ecf0f1;
}

.speaker-small {
	top: 5%;
	left: 2%;
}

.speaker-small-two {
	top: 5%;
	right: 2%;
}

.speaker-large,
.speaker-large-two {
	position: fixed;
	height: calc(var(--speaker-large-h) * 1vmin);
	width: calc(var(--speaker-large-w) * 1vmin);
	border-radius: 50%;
	top: 19%;
	background: hsl(0, 0%, 20%);
	box-shadow: 0 0 0 calc(var(--border-large) * 1vmin) #ecf0f1;
}

.speaker-large {
	left: 3%;
}

.speaker-large-two {
	right: 3%;
}

.speaker-large-inner,
.speaker-large-inner-two {
	position: fixed;
	width: calc(var(--speaker-lg-inner-w) * 1vmin);
	height: calc(var(--speaker-lg-inner-h) * 1vmin);
	top: 45%;
	border-radius: 50%;
	background: hsl(0, 0%, 20%);
	box-shadow: 0 0 0 calc(var(--border-med) * 1vmin) #555;
}

.speaker-large-inner {
	left: 15%;
}

.speaker-large-inner-two {
	right: 15%;
}

.jukebox-label {
	position: fixed;
	top: 68%;
	left: 38.3%;
	background: transparent;
	border-radius: 0.25rem;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	width: calc(var(--juke-box-label-w) * 1vmin);
	height: calc(var(--juke-box-label-h) * 1vmin);
}

.jukebox-cassette-block {
	position: fixed;
	top: 20%;
	left: 38.3%;
	border-radius: 0.25rem;
	background: rgb(220, 220, 220);
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	width: calc(var(--juke-box-label-w) * 1vmin);
	height: calc(var(--juke-box-label-h) * 1.85 * 1vmin);
}

.jukebox-top-label {
	position: fixed;
	top: 7%;
	left: 38.3%;
	font-family: var(--system-font);
	font-family: var(--montserrat-font);
	line-height: 1;
	word-spacing: -4px;
	font-size: calc(var(--font-small) * 1vmin);
	text-align: center;
	border-radius: calc(var(--border-small) * 1vmin);
	background: rgb(220, 220, 220);
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	width: calc(var(--juke-box-label-w) * 1vmin);
	height: calc(var(--juke-box-label-h) / 2.3 * 1vmin);
}

.jukebox-cassette-holder {
	width: calc(var(--juke-box-label-w) / 1.15 * 1vmin);
	height: calc(var(--juke-box-label-h) * 1.3 * 1vmin);
	background: hsl(0, 0%, 20%);
	position: fixed;
	top: 25%;
	left: 39.95%;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
}

.top-box {
	width: calc(var(--juke-box-w) * 1vmin);
	height: calc(var(--box-top-h) * 1.075 * 1vmin);
	position: fixed;
	top: -22%;
	top: -24%;
	background: rgb(230, 230, 230);
	border-radius: calc(var(--border-small) * 1.5 * 1vmin);
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	filter: brightness(105%);
}

.top-inner-box {
	height: calc(var(--top-inner-box-h) * 1vmin);
	width: calc(var(--top-inner-box-w) * 1vmin);
	background: #333;
	position: fixed;
	top: -18.5%;
	left: 8.75%;
	border: calc(var(--border-small) / 1.1 * 1vmin) solid
		var(--juke-box-primary-bg);
	border-radius: calc(var(--border-small) * 1.5 * 1vmin);
	z-index: 999;
}

.hz-line,
.hz-line-two,
.hz-line-three,
.hz-line-four {
	position: fixed;
	height: calc(var(--hz-line-w) * 1vmin);
	width: calc(var(--juke-box-w) / 1.01 * 1vmin);
	background: hsl(0, 0%, 15%);
	background: var(--juke-box-border);
	z-index: 99;
	left: 0.5%;
}

.hz-line {
	top: -8%;
}

.hz-line-two {
	top: -10%;
}

.hz-line-three {
	top: -12%;
}

.hz-line-four {
	top: -14.4%;
}

.green-cube,
.green-cube-two,
.green-cube-three,
.green-cube-four,
.green-cube-five,
.green-cube-six,
.red-cube-seven,
.green-cube-eight,
.green-cube-nine,
.green-cube-ten,
.green-cube-eleven,
.green-cube-twelve,
.green-cube-thirteen,
.green-cube-fourteen,
.green-cube-fifteen,
.green-cube-sixteen,
.red-cube-seventeen,
.green-cube-eightteen,
.green-cube-nineteen,
.green-cube-twenty,
.green-cube-twenty-one,
.red-cube-twenty-two,
.green-cube-twenty-three,
.green-cube-twenty-four {
	background: #82e0aa;
	position: fixed;
	height: calc(var(--cube-h) * 1vmin);
	width: calc(var(--cube-w) * 1vmin);
	border-radius: calc(var(--border-small) / 2.5 * 1vmin);
	z-index: 999;
}

/* Row 1 */
.green-cube,
.green-cube-two,
.green-cube-three,
.green-cube-eight,
.green-cube-nine,
.green-cube-ten,
.green-cube-eleven,
.green-cube-twelve,
.green-cube-nineteen,
.green-cube-twenty-three {
	top: -7%;
}

.green-cube {
	left: 15.25%;
}

.green-cube-two {
	left: 16.5%;
}

.green-cube-three {
	left: 17.8%;
}

.green-cube-eight {
	left: 19.03%;
}

.green-cube-nine {
	left: 20.25%;
}

.green-cube-ten {
	left: 21.5%;
}

.green-cube-eleven {
	left: 22.9%;
}

.green-cube-twelve {
	left: 24.12%;
}

.green-cube-nineteen {
	left: 25.35%;
}

.green-cube-twenty-three {
	left: 26.75%;
}

/* Row 2 */

.green-cube-four,
.green-cube-five,
.green-cube-thirteen,
.green-cube-fourteen,
.green-cube-fifteen,
.green-cube-eightteen,
.green-cube-twenty-four {
	top: -9.79%;
}

.green-cube-four {
	left: 16.5%;
}

.green-cube-five {
	left: 17.8%;
}

.green-cube-thirteen {
	left: 25.35%;
}

.green-cube-fourteen {
	left: 20.25%;
}

.green-cube-fifteen {
	left: 21.5%;
}

.green-cube-eightteen {
	left: 22.9%;
}

.green-cube-twenty-four {
	left: 26.75%;
}

/* Row 3 */
.green-cube-six,
.green-cube-sixteen,
.green-cube-twenty,
.green-cube-twenty-one {
	top: -12.5%;
}
.green-cube-six {
	left: 17.8%;
}
.green-cube-sixteen {
	left: 20.25%;
}

.green-cube-twenty {
	left: 22.9%;
}

.green-cube-twenty-one {
	left: 25.35%;
}

/* Row 4 */
.red-cube-seven,
.red-cube-seventeen,
.red-cube-twenty-two {
	top: -15.21%;
	background: #e74c3c;
	background: #ec7063;
}

.red-cube-seven {
	left: 17.8%;
}

.red-cube-seventeen {
	left: 20.25%;
}

.red-cube-twenty-two {
	left: 25.35%;
}

.red-line {
	position: fixed;
	top: -17.5%;
	left: 69%;
	background: #ec7063;
	height: calc(var(--red-line-h) * 1vmin);
	width: calc(var(--red-line-w) * 1vmin);
	z-index: 1000;
}

.panel-hz-line {
	position: fixed;
	height: calc(var(--panel-line-h) * 1vmin);
	width: calc(var(--panel-line-w) * 1vmin);
	left: 31%;
	top: -11.5%;
	background: var(--juke-box-primary-bg);
	border-radius: calc(var(--border-small) * 1vmin);
	z-index: 999;
}

.cover-box {
	position: fixed;
	height: calc(var(--cross-bar-h) * 4 * 1vmin);
	width: calc(var(--cross-bar-w) * 1vmin);
	background: linear-gradient(
		to right,
		rgb(240, 240, 240) 6%,
		hsl(0, 0%, 25%) 6%,
		hsl(0, 0%, 25%) 94%,
		rgb(240, 240, 240) 6%
	);
	/*   background: rgb(240, 240, 240); */
	top: -51.5%;
	top: -53.5%;
	left: 10%;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	border-bottom: 0;
	border-top-left-radius: calc(var(--border-small) * 2 * 1vmin);
	border-top-right-radius: calc(var(--border-small) * 2 * 1vmin);
	z-index: 99;
	filter: brightness(97%);
}

.hidden-box {
	position: fixed;
	height: calc(var(--cross-bar-h) * 3 * 1vmin);
	width: calc(var(--cross-bar-w) / 1.06 * 1vmin);
	background: var(--primary-background);
	top: -44%;
	top: -46.2%;
	left: 16.75%;
	left: 12.35%;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	border-bottom: calc(var(--border-small) * 2 * 1vmin);
	border-top-right-radius: calc(var(--border-small) * 2 * 1vmin);
	border-top-left-radius: calc(var(--border-small) * 2 * 1vmin);
	z-index: 1000;
}

.audio-btn,
.audio-btn-two,
.audio-btn-three,
.audio-btn-four {
	position: fixed;
	background: hsl(0, 0%, 25%);
	width: calc(var(--audio-btn-w) * 1vmin);
	height: calc(var(--audio-btn-h) * 1vmin);
	border-top-right-radius: calc(var(--border-small) * 1vmin);
	border-top-left-radius: calc(var(--border-small) * 1vmin);
	top: -26.2%;
	top: -28.5%;
	z-index: 1100;
}

.audio-btn {
	left: 15.5%;
}

.audio-btn-two {
	left: 21.175%;
}

.audio-btn-three {
	left: 26.8%;
}

.audio-btn-four {
	right: 18%;
}

.audio-cube-btn,
.audio-cube-btn-two,
.audio-cube-btn-three,
.audio-cube-btn-four,
.audio-cube-btn-five,
.audio-cube-btn-six,
.audio-cube-btn-seven {
	position: fixed;
	top: -27.5%;
	top: -29.75%;
	width: calc(var(--audio-cube-btn-w) * 1vmin);
	height: calc(var(--audio-cube-btn-h) * 1vmin);
	background: hsl(0, 0%, 25%);
	border-top-right-radius: calc(var(--border-small) * 1vmin);
	border-top-left-radius: calc(var(--border-small) * 1vmin);
	z-index: 1100;
}

.audio-cube-btn {
	left: 40%;
}

.audio-cube-btn-two {
	left: 43.8%;
}

.audio-cube-btn-three {
	left: 47.65%;
}

.audio-cube-btn-four {
	left: 51.35%;
}

.audio-cube-btn-five {
	left: 55%;
}

.audio-cube-btn-six {
	left: 58.75%;
}

.audio-cube-btn-seven {
	left: 62.5%;
}

.cassette-detail,
.cassette-detail-two {
	position: fixed;
	background: hsl(0, 0%, 13%);
	height: calc(var(--cassette-detail-s) * 1vmin);
	width: calc(var(--cassette-detail-s) * 1vmin);
	border-radius: calc(var(--border-small) * 3 * 1vmin);
	top: 36%;
	z-index: 1000;
}

.cassette-detail {
	left: 44.05%;
}

.cassette-detail-two {
	left: 53%;
}

.light-box {
	position: fixed;
	top: 36.4%;
	left: 48%;
	background: var(--juke-box-primary-bg);
	opacity: 0.45;
	height: calc(var(--light-box-h) * 1vmin);
	width: calc(var(--light-box-w) * 1vmin);
	border-radius: calc(var(--border-small) * 1.1 * 1vmin);
	z-index: 1000;
}

.detail,
.detail-two,
.detail-three,
.detail-four,
.detail-five,
.detail-six,
.detail-seven {
	position: fixed;
	background: #9e9b8d;
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	z-index: 1100;
}

.detail {
	top: 94.5%;
	left: 2%;
	height: calc(var(--detail-h) / 1.45 * 1vmin);
	width: calc(var(--detail-w) / 1.25 * 1vmin);
}

.detail-two {
	top: 85%;
	left: 49%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-w) / 1.5 * 1vmin);
}

.detail-three {
	top: 94.5%;
	right: 4%;
	height: calc(var(--detail-h) / 1.45 * 1vmin);
	width: calc(var(--detail-w) / 1.3 * 1vmin);
}

.detail-four {
	top: 6%;
	right: 13%;
	height: calc(var(--detail-h) / 1.45 * 1vmin);
	width: calc(var(--detail-w) * 1.1 * 1vmin);
	background: #c2bfb0;
	background: #c5c2b0;
}

.detail-five {
	top: 6%;
	left: 16%;
	height: calc(var(--detail-h) / 1.45 * 1vmin);
	width: calc(var(--detail-w) * 1.3 * 1vmin);
	background: #c2bfb0;
	background: #c5c2b0;
}

.detail-six {
	top: 71%;
	left: 42.5%;
	height: calc(var(--detail-h) / 1.515 * 1vmin);
	width: calc(var(--detail-w) / 1.3 * 1vmin);
}

.detail-seven {
	top: 27.7%;
	left: 47%;
	height: calc(var(--detail-h) / 1.515 * 1vmin);
	width: calc(var(--detail-w) / 1.3 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
}

.detail-small {
	position: fixed;
	top: 94.25%;
	right: 1%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #9e9b8d;
}

.detail-small-two {
	position: fixed;
	top: 70.75%;
	right: 40%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #9e9b8d;
}

.detail-small-three {
	position: fixed;
	top: 70.9%;
	left: 39.75%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #9e9b8d;
}

.detail-small-four {
	position: fixed;
	top: 27.5%;
	left: 44.5%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
}

.detail-small-five {
	position: fixed;
	top: -16%;
	left: 10%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
	z-index: 1100;
}

.detail-small-six {
	position: fixed;
	top: -8%;
	right: 11.5%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
	z-index: 1100;
}

.detail-small-seven {
	position: fixed;
	top: -16.25%;
	right: 50%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
	z-index: 1100;
}

.detail-small-eight {
	position: fixed;
	top: 6%;
	left: 13.5%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #c5c2b0;
	z-index: 1100;
}

.detail-small-nine {
	position: fixed;
	top: 6%;
	right: 30%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #c5c2b0;
	z-index: 1100;
}

.detail-small-ten {
	position: fixed;
	top: 55.5%;
	right: 39.75%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #fff;
	z-index: 1100;
}

.detail-small-eleven {
	position: fixed;
	top: 55.5%;
	left: 39.75%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #fff;
	z-index: 1100;
}

.detail-small-twelve {
	position: fixed;
	top: 56.25%;
	left: 53%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 3.5 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #fff;
	z-index: 1100;
}

.detail-small-thirteen {
	position: fixed;
	top: -15.8%;
	left: 36%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 8 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	z-index: 1100;
	opacity: 0.4;
}

.detail-small-fourteen {
	position: fixed;
	top: -8%;
	right: 14%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 4 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	z-index: 1100;
	opacity: 0.4;
}

.handle-detail {
	position: fixed;
	top: -48.45%;
	top: -50.75%;
	left: 20%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 8 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	z-index: 1100;
	opacity: 0.4;
}

.handle-detail-two {
	position: fixed;
	top: -48.45%;
	top: -50.75%;
	left: 34%;
	height: calc(var(--detail-h) / 1.5 * 1vmin);
	width: calc(var(--detail-h) * 2 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	z-index: 1100;
	opacity: 0.4;
}

.handle-detail-three {
	position: fixed;
	top: -48.45%;
	top: -50.75%;
	left: 12.3%;
	height: calc(var(--detail-h) / 1.2 * 1vmin);
	width: calc(var(--detail-h) * 1.5 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #fff;
	z-index: 1100;
}

.handle-detail-four {
	position: fixed;
	top: -48.45%;
	top: -50.75%;
	right: 12%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1.9 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: #fff;
	z-index: 1100;
}

.handle-detail-five {
	position: fixed;
	top: -48.45%;
	top: -50.75%;
	right: 17%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) * 1.3 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.4;
	z-index: 1100;
}

.volume-knob {
	position: fixed;
	top: -7.7%;
	right: -2.075%;
	height: calc(var(--volume-knob-h) * 1vmin);
	width: calc(var(--volume-knob-w) * 1vmin);
	background: hsl(0, 0%, 20%);
	border-radius: calc(var(--border-small) / 1.1 * 1vmin);
	z-index: -1;
}

.volume-knob-detail {
	position: fixed;
	top: -48.45%;
	top: -5%;
	right: -1.65%;
	height: calc(var(--detail-h) / 1.3 * 1vmin);
	width: calc(var(--detail-h) / 1.1 * 1vmin);
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	background: var(--juke-box-primary-bg);
	opacity: 0.6;
	z-index: 1100;
}
</style>
</head>
<body>
  <body>
	<div class="juke-box"></div>
	<div class="speaker-small"></div>
	<div class="speaker-small-two"></div>
	<div class="speaker-large"></div>
	<div class="speaker-large-two"></div>
	<div class="speaker-large-inner"></div>
	<div class="speaker-large-inner-two"></div>
	<div class="jukebox-label"></div>
	<div class="jukebox-cassette-block"></div>
	<div class="jukebox-cassette-holder"></div>
	<div class="jukebox-top-label"></div>
	<div class="label-detail"></div>
	<div class="top-box"></div>
	<div class="top-inner-box"></div>
	<div class="hz-line"></div>
	<div class="hz-line-two"></div>
	<div class="hz-line-three"></div>
	<div class="hz-line-four"></div>
	<div class="green-cube"></div>
	<div class="green-cube-two"></div>
	<div class="green-cube-three"></div>
	<div class="green-cube-four"></div>
	<div class="green-cube-five"></div>
	<div class="green-cube-six"></div>
	<div class="red-cube-seven"></div>
	<div class="green-cube-eight"></div>
	<div class="green-cube-nine"></div>
	<div class="green-cube-ten"></div>
	<div class="green-cube-eleven"></div>
	<div class="green-cube-twelve"></div>
	<div class="green-cube-thirteen"></div>
	<div class="green-cube-fourteen"></div>
	<div class="green-cube-fifteen"></div>
	<div class="green-cube-sixteen"></div>
	<div class="red-cube-seventeen"></div>
	<div class="green-cube-eightteen"></div>
	<div class="green-cube-nineteen"></div>
	<div class="green-cube-twenty"></div>
	<div class="green-cube-twenty-one"></div>
	<div class="red-cube-twenty-two"></div>
	<div class="green-cube-twenty-three"></div>
	<div class="green-cube-twenty-four"></div>
	<div class="red-line"></div>
	<div class="panel-hz-line"></div>
	<div class="cover-box"></div>
	<div class="hidden-box"></div>
	<div class="audio-btn"></div>
	<div class="audio-btn-two"></div>
	<div class="audio-btn-three"></div>
	<div class="audio-btn-four"></div>
	<div class="audio-cube-btn"></div>
	<div class="audio-cube-btn-two"></div>
	<div class="audio-cube-btn-three"></div>
	<div class="audio-cube-btn-four"></div>
	<div class="audio-cube-btn-five"></div>
	<div class="audio-cube-btn-six"></div>
	<div class="audio-cube-btn-seven"></div>
	<div class="cassette-detail"></div>
	<div class="cassette-detail-two"></div>
	<div class="light-box"></div>
	<div class="detail"></div>
	<div class="detail-two"></div>
	<div class="detail-three"></div>
	<div class="detail-four"></div>
	<div class="detail-five"></div>
	<div class="detail-six"></div>
	<div class="detail-seven"></div>
	<div class="detail-small"></div>
	<div class="detail-small-two"></div>
	<div class="detail-small-three"></div>
	<div class="detail-small-four"></div>
	<div class="detail-small-five"></div>
	<div class="detail-small-six"></div>
	<div class="detail-small-seven"></div>
	<div class="detail-small-eight"></div>
	<div class="detail-small-nine"></div>
	<div class="detail-small-ten"></div>
	<div class="detail-small-eleven"></div>
	<div class="detail-small-twelve"></div>
	<div class="detail-small-thirteen"></div>
	<div class="detail-small-fourteen"></div>
	<div class="handle-detail"></div>
	<div class="handle-detail-two"></div>
	<div class="handle-detail-three"></div>
	<div class="handle-detail-four"></div>
	<div class="handle-detail-five"></div>
	<div class="volume-knob"></div>
	<div class="volume-knob-detail"></div>
</body>
</html>

Recent Content

h

test

test

Ads Blocker Image Powered by Code Help Pro

I am Broke !!

Looks like you are using Ad Block. The admin of this website is broke and has almost no money, please disable the ad blocker for this session to help me earn something. You can donate to me at - https://www.paypal.me/itsaomi1.