Add Page 404 TV Noise(Static)

MjavadH · Jul 13, 2024 · 5219c70 · 5219c70
1 parent 2c8e175
commit 5219c70
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 0 deletions.
diff --git a/Technology/TV Noise(Static)/Image.png b/Technology/TV Noise(Static)/Image.png
diff --git a/Technology/TV Noise(Static)/assets/style.css b/Technology/TV Noise(Static)/assets/style.css
@@ -0,0 +1,66 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    height: 100dvh;
+    font-size: 16px;
+    font-family: 'Poppins', sans-serif;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#canvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: -1;
+}
+
+.T404 {
+    font-size: 10em;
+}
+
+.paragraph {
+    font-weight: 800;
+    font-size: 2em;
+    color: #fff;
+    -webkit-text-stroke: 1px #000;
+}
+
+@media (max-width: 768px) {
+    .T404 {
+        font-size: 8em;
+    }
+
+    .paragraph {
+        font-size: 1.6em;
+    }
+}
+
+@media (max-width: 412px) {
+    .T404 {
+        font-size: 7em;
+    }
+
+    .paragraph {
+        font-size: 1.4em;
+    }
+}
+
+@media (max-width: 300px) {
+    .T404 {
+        font-size: 6em;
+    }
+
+    .paragraph {
+        font-size: 1.1em;
+    }
+}
diff --git a/Technology/TV Noise(Static)/index.html b/Technology/TV Noise(Static)/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Page 404 TV Noise(Static)</title>
+    <!--Style-->
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<h1 class="T404">4 X 4</h1>
+<p class="paragraph">Oops! page not found </p>
+<script>
+    const canvas = document.getElementById("canvas");
+    let ctx = canvas.getContext("2d");
+
+    function resize() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        draw();
+    }
+
+    function draw() {
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        const colors = ["#FFC800", "#00FF00", "#0000FF", "#FF00FF", "#FF0000", "#FFFFFF", "#000000"]; // color bars
+        let barWidth = canvas.width / colors.length; // width of each bar
+        for (let i = 0; i < colors.length; i++) {
+            ctx.fillStyle = colors[i]; // fill color
+            ctx.fillRect(i * barWidth, 0, barWidth, canvas.height); // draw bar
+        }
+    }
+
+    resize();
+    draw();
+    window.addEventListener("resize", resize);
+</script>
+</body>
+</html>