added default nclazz landing page

2021-10-24 19:14:12 +02:00 · 2021-10-24 19:14:12 +02:00 · 34730bdf92
parent 3329c12aae
commit 34730bdf92
1 changed files with 106 additions and 1 deletions
--- a/index.html
+++ b/index.html
@ -1 +1,106 @@
-Hello world!
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <title>NCLAZZ - Software</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@700&display=swap" rel="stylesheet">
+
+    <link rel="icon" href="favicon.ico?v=1" type="image/x-icon" />
+    <link rel="shortcut icon" href="favicon.ico?v=1" type="image/x-icon" />
+
+
+    <style>
+        body {
+            width: 60vw;
+            height: 80vh;
+            background-color: #323535ff;
+            display: grid;
+            place-items: center;
+        }
+
+        .logo-animated {
+            font-size: 8em;
+            font-family: sans-serif;
+            display: flex;
+            cursor: pointer;
+        }
+
+        .logo-animated .brace{
+            font-weight: bold;
+            font-family: sans-serif;
+            color: #3eb4a7ff;
+        }
+
+        .logo-animated .name {
+            font-style: normal;
+            font-family: 'Rajdhani', sans-serif;
+            color: #eaeaeaff;
+            text-transform: uppercase;
+            padding: 0 0.15em;
+
+            position: relative;
+            top: 50%;  
+            width: 0em;
+            margin: 0 auto;
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            /*visibility: hidden;*/
+        }
+
+        .logo-animated:not(hover) .name{
+            animation: typewriter-reverse 0.3s steps(6) 0s 1 normal both;
+        }
+
+        .logo-animated:hover .name{
+            animation: typewriter 0.4s steps(6) 0s 1 normal both;
+            visibility: visible;
+        }
+
+
+        @keyframes typewriter{
+            from{
+                visibility: visible;
+                width: 0;
+            }
+            to{
+                width: 400px;
+            }
+          }
+          @keyframes typewriter-reverse{
+            from{
+                width: 255px;
+            }
+            to{
+                width: o;
+                visibility: hidden;
+            }
+          }
+
+          body.preload *{
+            animation-duration: 0s !important;
+            -webkit-animation-duration: 0s !important;
+          }
+
+    </style>
+    <script>
+        setTimeout(function(){
+            document.body.className="";
+        },500);
+    </script>
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
+</head>
+<body class="preload">
+    <div class="logo-animated">
+        <b class="brace left">{</b>
+        <i class="name">nclazz</i>
+        <b class="brace right">}</b>
+    </div>
+    <!-- <img src="/img/nclazz_full_dark.png" height="120px"> -->
+</body>
+</html>