Create example.html

x8BitRain · Feb 20, 2019 · d0fc19f · d0fc19f
1 parent df1ca71
commit d0fc19f
Showing 1 changed file with 107 additions and 0 deletions.
diff --git a/example/example.html b/example/example.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="index,follow">
+	<link rel="shortcut icon" href="/favicon.ico">
+    <meta name="theme-color" content="">
+    <link rel="icon" sizes="192x192" href="icon.png">
+    <title>test page</title>
+    <!-- meta-theme-sky-color script -->
+<script>function skyCol(e){document.querySelector('meta[name="theme-color"]').setAttribute("content",hX+skY[e])}var now=new Date,hours=now.getHours(),skY=["9bc5ed","94dbf8","87ceeb","ffa365","141852","000","26282c"],hX="#",link=document.createElement("meta")
+link.name="theme-color",link.content="#",document.getElementsByTagName("head")[0].appendChild(link),skyCol(hours>4&&7>hours?0:hours>6&&9>hours?1:hours>8&&17>hours?2:hours>16&&19>hours?3:hours>19&&22>hours?4:hours>21||5>hours?5:6)
+</script>
+</head>
+    <body>
+    <!-- Original by George W. Park https://codepen.io/GeorgePark/pen/MrjbEr -->
+
+<br>
+<h1 contenteditable spellcheck="false">TEST</h1>
+
+<style>
+  @import url('https://fonts.googleapis.com/css?family=Monoton');
+
+  :root {
+    /* Base font size */
+    font-size: 10px;
+
+    /* Set neon color */
+    --neon-text-color: #f40;
+
+  }
+
+  body {
+    font-family: 'Monoton', sans-serif;
+    display: block;
+    text-align:center;
+    justify-content: center;
+    align-items: center;
+    background: #000;
+    height: 90vh;
+  }
+
+  h1 {
+    font-size: 13rem;
+    font-weight: 100;
+    font-style: italic;
+    color: #de4f4f;
+    border-radius: 2rem;
+    text-transform: uppercase;
+    animation: flicker 1.5s infinite alternate;
+  }
+
+  h1::-moz-selection {
+    background-color: var(--neon-border-color);
+    color: var(--neon-text-color);
+  }
+
+  h1::selection {
+    background-color: var(--neon-border-color);
+    color: var(--neon-text-color);
+  }
+
+  h1:focus {
+    outline: none;
+  }
+
+  /* Animate neon flicker */
+
+  @keyframes flicker {
+
+    0%,
+    19%,
+    21%,
+    23%,
+    25%,
+    54%,
+    56%,
+    100% {
+
+      text-shadow: -0.2rem -0.2rem 1rem #fff,
+      0.2rem 0.2rem 1rem #fff,
+      0 0 2rem var(--neon-text-color),
+      0 0 4rem var(--neon-text-color),
+      0 0 6rem var(--neon-text-color),
+      0 0 8rem var(--neon-text-color),
+      0 0 10rem var(--neon-text-color);
+
+      box-shadow: 0 0 .5rem #fff,
+      inset 0 0 .5rem #fff,
+      0 0 2rem var(--neon-border-color),
+      inset 0 0 2rem var(--neon-border-color),
+      0 0 4rem var(--neon-border-color),
+      inset 0 0 4rem var(--neon-border-color);
+    }
+
+    20%,
+    24%,
+    55% {
+      text-shadow: none;
+      box-shadow: none;
+    }
+  }
+</style>
+  </body>
+</html>