.tv-container
.tv
.tv-border
.tv-edge
.tv-screen-container
.test-card
.grid-1
.item-1.white
.item-2.yellow
.item-3.cyan
.item-4.green
.item-5.magenta
.item-6.red
.item-7.blue
.blue
.black
.magenta
.black
.cyan
.black
.grey
.grid-2
.navy
.white
.navy
.black
.black
.black
.off-air-container
.off-air-box
.off-air OFF-AIR
.tv-screen
/*Downloaded from https://www.codeseek.co/jennifer-elyse/vintage-test-card-css-grid-codepenchallenge-bKgvwQ */
@charset 'utf-8';
@import 'compass';
$bg-color: #333;
* {
box-sizing: border-box;
position: relative;
padding: 0px;
margin: 0px;
}
body {
background: $bg-color;
}
.tv-container {
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 600px;
height: 450px;
@media only screen and (max-width: 600px) {
width: 300px;
height: 225px;
}
}
.tv {
position: absolute;
height: 100%;
width: 100%;
}
.tv-border {
position: absolute;
height: 90%;
width: 90%;
top: 5%;
left: 5%;
border-radius: 30px;
box-shadow: inset 2px 2px 6px #000,
inset -2px -2px 6px #000;
background-image:
linear-gradient(-45deg, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.4));
}
.tv-edge {
position: absolute;
height: 96%;
width: 97%;
top: 2%;
left: 1.5%;
border-radius: 30px;
box-shadow:
inset 3px 3px 4px rgba(0,0,0,0.5),
inset -3px -3px 4px rgba(0,0,0,0.5);
background-image:
radial-gradient(circle at 40% 100%, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.75));
}
.tv-screen-container {
position: absolute;
height: 100%;
width: 100%;
}
.tv-screen {
position: absolute;
height: 90%;
width: 90%;
top: 5%;
left: 5%;
border-radius: 60px 60px 60px 60px / 35px 35px 35px 35px;
box-shadow:
0 0 0 2px #333;
background-image:
radial-gradient(circle at 50% 5%, rgba(255, 255, 255, 0.3) 8%, rgba(0,0,0,0.3) 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 100%),
radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);;
overflow: hidden;
}
.test-card {
position: absolute;
height: 90%;
width: 90%;
top: 5%;
left: 5%;
border-radius: 60px 60px 60px 60px / 35px 35px 35px 35px;
overflow: hidden;
}
.grid-1 {
position: absolute;
margin: auto;
width: 100%;
height: 80%;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 10%;
grid-gap: 0;
grid-template-areas:
"a b c d e f g"
"a b c d e f g"
"a b c d e f g"
"a b c d e f g"
"a b c d e f g"
"a b c d e f g"
"a b c d e f g"
"a b c d e f g"
"a b c d e f g"
"h i j k l m n"
"o o o o o o o";
}
.grid-2 {
height: 300%;
width: 100%;
grid-area: o;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 100%;
grid-gap: 0;
grid-template-areas:
"p q r s t u";
}
.item-1 {
grid-area: a;
}
.item-2 {
grid-area: b;
}
.item-3 {
grid-area: c;
}
.item-4 {
grid-area: d;
}
.item-5 {
grid-area: e;
}
.item-6 {
grid-area: f;
}
.item-7 {
grid-area: g;
}
.black {
background-color: #000;
}
.white {
background-color: #fff;
}
.yellow {
background-color: #ff0;
}
.cyan {
background-color: #0ff;
}
.green {
background-color: #0f0;
}
.magenta {
background-color: #f0f;
}
.red {
background-color: #f00;
}
.blue {
background-color: #00f;
}
.grey {
background-color: #b4b4b4;
}
.navy {
background-color: #010080;
}
.off-air-container {
display: grid;
grid-template-columns: 1;
grid-auto-rows: 100%;
position: absolute;
height: 100%;
width: 100%;
}
.off-air-box {
display: grid;
grid-template-columns: 1;
grid-auto-rows: 100%;
margin-top: 18%;
justify-self: center;
height: 20%;
width: 60%;
background-color: #000;
}
.off-air {
align-self: center;
justify-self: center;
font-family: 'Roboto', sans-serif;
font-size: 4em;
@media only screen and (max-width: 600px) {
font-size: 2em;
}
color: #fff;
text-align: center;
}
/*Downloaded from https://www.codeseek.co/jennifer-elyse/vintage-test-card-css-grid-codepenchallenge-bKgvwQ */
console.clear();
const audioContext = new (window.AudioContext || window.webkitAudioContext);
const sine = audioContext.createOscillator();
sine.frequency.value = 520;
sine.connect(audioContext.destination);
let hasInteracted = false;
window.addEventListener('click', () => {
if (audioContext.state === 'running') {
audioContext.suspend();
} else {
audioContext.resume();
}
if (!hasInteracted) {
hasInteracted = true;
sine.start();
}
});