Vintage Test Card CSS Grid #CodepenChallenge

FEATURED

In this example below you will see how to do a Vintage Test Card CSS Grid #CodepenChallenge with some HTML / CSS and Javascript

Anyone remember this? Turn on your speakers and click for the full effect.

Thumbnail
This awesome code was written by Jennifer Kirchner, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jennifer Kirchner ©
  • HTML
  • CSS
  • JavaScript
    .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();
	}
});

Comments