add halloween egg

5 files changed, 715 insertions, 0 deletions

diff --git a/css/halloween.css b/css/halloween.css
new file mode 100644
index 0000000..5248173
--- /dev/null
+++ b/css/halloween.css
@@ -0,0 +1,273 @@
+body {
+    margin: 0;
+}
+
+*,
+:after,
+:before {
+    box-sizing: border-box
+}
+
+.pull-left {
+    float: left
+}
+
+.pull-right {
+    float: right
+}
+
+.clearfix:after,
+.clearfix:before {
+    content: '';
+    display: table
+}
+
+.clearfix:after {
+    clear: both;
+    display: block
+}
+
+.halloween .head .skull:before,
+.halloween .head .skull:after,
+.halloween .eyes .eye:before,
+.halloween .body:before,
+.halloween .body:after,
+.halloween .legs:before {
+    content: '';
+    position: absolute;
+}
+
+.halloween {
+    top: 5%;
+    left: 2%;
+    width: 30px;
+    height: 44px;
+    position: fixed;
+    margin-top: -22px;
+    margin-left: -15px;
+    animation: move 3s infinite;
+}
+
+.halloween .head {
+    z-index: 1;
+    width: 25px;
+    height: 25px;
+    background: #444;
+    border-radius: 50%;
+    position: relative;
+}
+
+.halloween .head .skull {
+    left: 2px;
+    bottom: 2px;
+    width: 16px;
+    height: 16px;
+    color: #f9f9f9;
+    border-radius: 50%;
+    background: #f9f9f9;
+    position: absolute;
+    animation: skull 3s infinite;
+}
+
+.halloween .head .skull:before {
+    top: 9px;
+    width: 0;
+    left: 50%;
+    height: 0;
+    z-index: 1;
+    margin-left: -2px;
+    border: 2px solid transparent;
+    border-bottom: 2px solid #444;
+}
+
+.halloween .head .skull:after {
+    top: 14px;
+    left: 50%;
+    width: 1px;
+    height: 4px;
+    margin-left: -1px;
+    background: #f9f9f9;
+    box-shadow: 2px 0, -2px 0, 4px 0, -4px 0,
+        -3px -2px, -1px -2px, 1px -2px, 3px -2px
+}
+
+.halloween .eyes {
+    width: inherit;
+    height: inherit;
+    overflow: hidden;
+    border-radius: 50%;
+    position: relative;
+}
+
+.halloween .eyes .eye {
+    top: 5px;
+    width: 5px;
+    height: 5px;
+    position: absolute;
+    border-radius: 50%;
+    background: #f8cd22;
+    border: 1px solid #444;
+    border-right: 2px solid #444;
+}
+
+.halloween .eyes .eye:before {
+    top: -1px;
+    left: -1px;
+    width: 5px;
+    height: 3px;
+    background: #f9f9f9;
+    border-radius: 5px 5px 0 0;
+    animation: eyes 3s infinite;
+}
+
+.halloween .eyes .eye.eye-left {
+    left: 1px;
+}
+
+.halloween .eyes .eye.eye-right {
+    right: 1px;
+}
+
+.halloween .body {
+    top: -3px;
+    width: 24px;
+    height: 17px;
+    background: #444;
+    position: relative;
+    border-radius: 10px 10px 2px 2px;
+}
+
+.halloween .body:before,
+.halloween .body:after {
+    top: 3px;
+    width: 4px;
+    height: 12px;
+    background: #444;
+}
+
+.halloween .body:before {
+    left: -1px;
+    border-radius: 100% 0 0 2px;
+    transform: rotate(10deg);
+    animation: hand-left 3s infinite;
+}
+
+.halloween .body:after {
+    right: -1px;
+    border-radius: 0 100% 2px 0;
+    transform: rotate(-10deg);
+    animation: hand-right 3s infinite;
+}
+
+.halloween .legs {
+    top: -3px;
+    left: 50%;
+    width: 21px;
+    height: 10px;
+    overflow: hidden;
+    margin-left: -13px;
+    position: relative;
+    /* border-bottom: 1px solid rgba(0, 0, 0, .2); // This is the shadow at the bottom */
+}
+
+.halloween .legs:before {
+    top: 0;
+    left: -7px;
+    width: 60px;
+    height: 10px;
+    background-image: linear-gradient(-495deg, #444 4px, transparent 0), linear-gradient(-45deg, transparent 4px, #444 0);
+    background-size: 4px 8px;
+    background-repeat: repeat-x;
+    animation: legs 3s infinite;
+}
+
+@keyframes move {
+    0% {
+        transform: translateX(0)
+    }
+
+    50% {
+        transform: translateX(15px)
+    }
+
+    100% {
+        transform: translateX(0)
+    }
+}
+
+@keyframes skull {
+    0% {
+        transform: translate(0, 0)
+    }
+
+    25% {
+        transform: translate(2px, 1px)
+    }
+
+    75% {
+        transform: translate(3px, -1px)
+    }
+
+    100% {
+        transform: translate(0, 0)
+    }
+}
+
+@keyframes eyes {
+    0% {
+        top: -5px;
+        border-radius: 50%;
+    }
+
+    50% {
+        top: -1px;
+        border-radius: 5px 5px 0 0;
+    }
+
+    100% {
+        top: -5px;
+        border-radius: 50%;
+    }
+}
+
+@keyframes legs {
+    0% {
+        left: -7px;
+    }
+
+    50% {
+        left: -25px;
+    }
+
+    100% {
+        left: -7px;
+    }
+}
+
+@keyframes hand-left {
+    0% {
+        left: 1px;
+    }
+
+    50% {
+        left: -2px;
+    }
+
+    100% {
+        left: 1px;
+    }
+}
+
+@keyframes hand-right {
+    0% {
+        right: 1px;
+    }
+
+    50% {
+        right: -2px;
+    }
+
+    100% {
+        right: 1px;
+    }
+}
\ No newline at end of file
diff --git a/halloween/css/main.css b/halloween/css/main.css
new file mode 100644
index 0000000..47a63c7
--- /dev/null
+++ b/halloween/css/main.css
@@ -0,0 +1,273 @@
+body {
+    margin: 0;
+}
+
+*,
+:after,
+:before {
+    box-sizing: border-box
+}
+
+.pull-left {
+    float: left
+}
+
+.pull-right {
+    float: right
+}
+
+.clearfix:after,
+.clearfix:before {
+    content: '';
+    display: table
+}
+
+.clearfix:after {
+    clear: both;
+    display: block
+}
+
+.halloween .head .skull:before,
+.halloween .head .skull:after,
+.halloween .eyes .eye:before,
+.halloween .body:before,
+.halloween .body:after,
+.halloween .legs:before {
+    content: '';
+    position: absolute;
+}
+
+.halloween {
+    top: 43%;
+    left: 50%;
+    width: 30px;
+    height: 44px;
+    position: fixed;
+    margin-top: -22px;
+    margin-left: -15px;
+    animation: move 3s infinite;
+}
+
+.halloween .head {
+    z-index: 1;
+    width: 25px;
+    height: 25px;
+    background: #444;
+    border-radius: 50%;
+    position: relative;
+}
+
+.halloween .head .skull {
+    left: 2px;
+    bottom: 2px;
+    width: 16px;
+    height: 16px;
+    color: #f9f9f9;
+    border-radius: 50%;
+    background: #f9f9f9;
+    position: absolute;
+    animation: skull 3s infinite;
+}
+
+.halloween .head .skull:before {
+    top: 9px;
+    width: 0;
+    left: 50%;
+    height: 0;
+    z-index: 1;
+    margin-left: -2px;
+    border: 2px solid transparent;
+    border-bottom: 2px solid #444;
+}
+
+.halloween .head .skull:after {
+    top: 14px;
+    left: 50%;
+    width: 1px;
+    height: 4px;
+    margin-left: -1px;
+    background: #f9f9f9;
+    box-shadow: 2px 0, -2px 0, 4px 0, -4px 0,
+        -3px -2px, -1px -2px, 1px -2px, 3px -2px
+}
+
+.halloween .eyes {
+    width: inherit;
+    height: inherit;
+    overflow: hidden;
+    border-radius: 50%;
+    position: relative;
+}
+
+.halloween .eyes .eye {
+    top: 5px;
+    width: 5px;
+    height: 5px;
+    position: absolute;
+    border-radius: 50%;
+    background: #f8cd22;
+    border: 1px solid #444;
+    border-right: 2px solid #444;
+}
+
+.halloween .eyes .eye:before {
+    top: -1px;
+    left: -1px;
+    width: 5px;
+    height: 3px;
+    background: #f9f9f9;
+    border-radius: 5px 5px 0 0;
+    animation: eyes 3s infinite;
+}
+
+.halloween .eyes .eye.eye-left {
+    left: 1px;
+}
+
+.halloween .eyes .eye.eye-right {
+    right: 1px;
+}
+
+.halloween .body {
+    top: -3px;
+    width: 24px;
+    height: 17px;
+    background: #444;
+    position: relative;
+    border-radius: 10px 10px 2px 2px;
+}
+
+.halloween .body:before,
+.halloween .body:after {
+    top: 3px;
+    width: 4px;
+    height: 12px;
+    background: #444;
+}
+
+.halloween .body:before {
+    left: -1px;
+    border-radius: 100% 0 0 2px;
+    transform: rotate(10deg);
+    animation: hand-left 3s infinite;
+}
+
+.halloween .body:after {
+    right: -1px;
+    border-radius: 0 100% 2px 0;
+    transform: rotate(-10deg);
+    animation: hand-right 3s infinite;
+}
+
+.halloween .legs {
+    top: -3px;
+    left: 50%;
+    width: 21px;
+    height: 10px;
+    overflow: hidden;
+    margin-left: -13px;
+    position: relative;
+    /* border-bottom: 1px solid rgba(0, 0, 0, .2); */
+}
+
+.halloween .legs:before {
+    top: 0;
+    left: -7px;
+    width: 60px;
+    height: 10px;
+    background-image: linear-gradient(-495deg, #444 4px, transparent 0), linear-gradient(-45deg, transparent 4px, #444 0);
+    background-size: 4px 8px;
+    background-repeat: repeat-x;
+    animation: legs 3s infinite;
+}
+
+@keyframes move {
+    0% {
+        transform: translateX(0)
+    }
+
+    50% {
+        transform: translateX(15px)
+    }
+
+    100% {
+        transform: translateX(0)
+    }
+}
+
+@keyframes skull {
+    0% {
+        transform: translate(0, 0)
+    }
+
+    25% {
+        transform: translate(2px, 1px)
+    }
+
+    75% {
+        transform: translate(3px, -1px)
+    }
+
+    100% {
+        transform: translate(0, 0)
+    }
+}
+
+@keyframes eyes {
+    0% {
+        top: -5px;
+        border-radius: 50%;
+    }
+
+    50% {
+        top: -1px;
+        border-radius: 5px 5px 0 0;
+    }
+
+    100% {
+        top: -5px;
+        border-radius: 50%;
+    }
+}
+
+@keyframes legs {
+    0% {
+        left: -7px;
+    }
+
+    50% {
+        left: -25px;
+    }
+
+    100% {
+        left: -7px;
+    }
+}
+
+@keyframes hand-left {
+    0% {
+        left: 1px;
+    }
+
+    50% {
+        left: -2px;
+    }
+
+    100% {
+        left: 1px;
+    }
+}
+
+@keyframes hand-right {
+    0% {
+        right: 1px;
+    }
+
+    50% {
+        right: -2px;
+    }
+
+    100% {
+        right: 1px;
+    }
+}
\ No newline at end of file
diff --git a/halloween/css/text-highlight.css b/halloween/css/text-highlight.css
new file mode 100644
index 0000000..494a286
--- /dev/null
+++ b/halloween/css/text-highlight.css
@@ -0,0 +1,10 @@
+.links {
+    color: inherit;
+    text-decoration: none;
+    background-color: #eabc75;
+    /* hsl(200, 100%, 80% */
+    -webkit-box-shadow: 0 7px 30px -10px #eabc75, 0 7px 30px -10px #eabc75;
+    box-shadow: 0 7px 30px -10px #eabc75, 0 7px 30px -10px #eabc75;
+    -webkit-transition: background-color 0.15s ease-in-out;
+    transition: background-color 0.15s ease-in-out;
+}
\ No newline at end of file
diff --git a/halloween/index.html b/halloween/index.html
new file mode 100644
index 0000000..c793595
--- /dev/null
+++ b/halloween/index.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta name="theme-color" content="#FFF">
+        <title>s1nical - Landing Page</title>
+        <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic'
+            rel='stylesheet' type='text/css'>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.3.1/trianglify.min.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+        <!-- CSS Links -->
+        <link id="stylesheet" rel="stylesheet" type="text/css" href="/css/main.css" />
+        <link rel="stylesheet" href="/halloween/css/main.css">
+        <link rel="stylesheet" href="/halloween/css/text-highlight.css">
+        <meta name="description" content="s1nical is a full stack developer.">
+        <meta property="og:description" content="s1nical is a full stack developer.">
+        <meta property="og:title" content="s1nical">
+        <meta property="twitter:card" content="summary">
+        <meta property="twitter:site" content="@s1nical">
+        <meta property="og:image" content="">
+        <script src="https://www.googletagmanager.com/gtag/js?id=UA-30692517-4"></script>
+        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
+        <link rel="apple-touch-icon" sizes="128x128" href="/favicon.ico">
+        <link rel="icon" type="image/ico" href="/favicon.ico" sizes="128x128">
+        <link rel="canonical" href="https://s1n.pw/">
+        <link rel="author" href="humans.txt" />
+        <!-- Invisible Scripts -->
+        <script src="/js/hide-context-menu.js"></script>
+        <script src="/js/loader-animation.js"></script>
+        <script src="/js/redirect-to-mobile.js"></script>
+        <!-- Schema.org Stuff -->
+        <script type="application/ld+json">
+            {
+                "name": "s1nical",
+                "alternateName": "s1n",
+                "description": "s1nical is a Full-stack developer.",
+                "headline": "s1nical is a Full-stack developer.",
+                "url": "https://s1n.pw/",
+                "image": "",
+                "sameAs": [
+                    "https://twitter.com/s1nical",
+                    "https://github.com/8cy",
+                    "https://www.reddit.com/user/s1nical/"
+                ],
+                "publisher": {
+                    "@type": "Organization",
+                    "logo": {
+                        "@type": "ImageObject",
+                        "url": ""
+                    }
+                },
+                "@type": "WebSite",
+                "@context": "http://schema.org"
+            }
+        </script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/inter.css"
+            integrity="sha256-DyLTj16AbuvawyWJMPz4tJNp46iGflE/fWYAoU2IGpk=" crossorigin="anonymous">
+        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-145087191-1"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag('js', new Date());
+
+            gtag('config', 'UA-145087191-1');
+        </script>
+    </head>
+
+    <body>
+        <!-- Scripts -->
+        <script src="/js/app.js"></script>
+        <script src="/js/background-sparkles.js"></script>
+
+        <!-- Navigation Bar -->
+        <div class="navigation-bar">
+            <nav class="nav">
+                <a href="/index.html" class="nav-item" active-color="orange">Home</a>
+                <!-- Had `is-active` after it but removed it due to not highlighting. -->
+                <a href="/about/" class="nav-item" active-color="green">About</a> <!-- About -->
+                <!--<a href="/dino/" class="nav-item" active-color="blue">Dino</a> <!-- Testimonials -->
+                <!--<a href="/doge" class="nav-item" active-color="red">Doge</a> <!-- Blog -->
+                <!--<a href="/cars/" class="nav-item" active-color="rebeccapurple">Cars</a> <!-- Contact -->
+                <a href="https://nani.s1n.pw" class="nav-item" active-color="rebeccapurple">Nani?!</a>
+                <span class="nav-indicator"></span>
+            </nav>
+        </div>
+
+        <!-- EDITED - Core Site Function, Site Primer/ Base -->
+        <main>
+            <div class="links">
+                <div class="github">
+                    Happy Halloween!
+                </div>
+            </div>
+        </main>
+
+        <!-- Halloween -->
+        <a href="/index.html">
+            <div class="halloween">
+                <div class="head">
+                    <div class="skull">
+                        <div class="eyes">
+                            <div class="eye eye-left"></div>
+                            <div class="eye eye-right"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="body"></div>
+                <div class="legs"></div>
+            </div>
+        </a>
+
+        <!-- Loading Animation -->
+        <div class="loader-wrapper">
+            <div class="loader">
+                <row>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </row>
+                <row>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </row>
+                <row>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </row>
+            </div>
+        </div>
+
+    </body>
+
+</html>
diff --git a/index.html b/index.html
index 86e9031..a449a4e 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

   <!-- CSS Links -->

   <link id="stylesheet" rel="stylesheet" type="text/css" href="/css/main.css" />

+  <link rel="stylesheet" href="/css/halloween.css">

   <meta name="description" content="s1nical is a full stack developer.">

   <meta property="og:description" content="s1nical is a full stack developer.">

   <meta property="og:title" content="s1nical">

@@ -97,6 +98,22 @@
       </div>

     </main>

 

+    <!-- Halloween -->

+    <a href="/halloween/">

+      <div class="halloween">

+        <div class="head">

+          <div class="skull">

+            <div class="eyes">

+              <div class="eye eye-left"></div>

+              <div class="eye eye-right"></div>

+            </div>

+          </div>

+        </div>

+        <div class="body"></div>

+        <div class="legs"></div>

+      </div>

+    </a>

+

     <!-- Loading Animation -->

     <div class="loader-wrapper">

         <div class="loader">