added new background and added cards

css/loading-old.css

@@ -0,0 +1,65 @@
+.hexagonGrid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 1;
+
+    /* this makes browser use GPU acceleration for blur */
+    will-change: contents;
+
+    filter: blur(2.5px);
+}
+
+.hexagonGrid .row {
+    display: inline-flex;
+    margin-top: -32px;
+    margin-left: -50px;
+}
+
+.hexagonGrid .row:nth-child(even) {
+    margin-left: 2px;
+}
+
+.hexagonGrid .row .hexagon {
+    position: relative;
+    width: 100px;
+    height: 110px;
+    margin: 4px 2px;
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.hexagonGrid .row .hexagon::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bg);
+    opacity: 0.95;
+    transition: 1s;
+}
+
+.hexagonGrid .row .hexagon::after {
+    content: "";
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    bottom: 4px;
+    left: 4px;
+    background: var(--bg);
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.hexagonGrid .row .hexagon:hover::before {
+    background: #72acb1;
+    opacity: 1;
+    transition: 0s;
+}
+
+.hexagonGrid .row .hexagon:hover::after {
+    background: var(--bg);
+}

css/loading.css

@@ -141,74 +141,4 @@ section {
     top: 0;
     left: 0;
     overflow: hidden;
-}
-
-.particles {
-    background: var(--bg);
-}
-
-.hexagonGrid {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 1;
-
-    /* this makes browser use GPU acceleration for blur */
-    will-change: contents;
-
-    filter: blur(2.5px);
-}
-
-.hexagonGrid .row {
-    display: inline-flex;
-    margin-top: -32px;
-    margin-left: -50px;
-}
-
-.hexagonGrid .row:nth-child(even) {
-    margin-left: 2px;
-}
-
-.hexagonGrid .row .hexagon {
-    position: relative;
-    width: 100px;
-    height: 110px;
-    margin: 4px 2px;
-    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-}
-
-.hexagonGrid .row .hexagon::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--bg);
-    opacity: 0.95;
-    transition: 1s;
-}
-
-.hexagonGrid .row .hexagon::after {
-    content: "";
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    bottom: 4px;
-    left: 4px;
-    background: var(--bg);
-    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-}
-
-.hexagonGrid .row .hexagon:hover::before {
-    background: #72acb1;
-    opacity: 1;
-    transition: 0s;
-}
-
-.hexagonGrid .row .hexagon:hover::after {
-    background: var(--bg);
 }

css/style.css

@@ -36,4 +36,68 @@ body.noscript {
     background-color: black;
     color: white;
     z-index: 999;
+}
+
+#particles {
+    position: absolute;
+    z-index: 0;
+    background: var(--bg);
+    margin: 0;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    filter: blur(2px);  
+}
+
+.homepage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+}
+
+h1 {
+    z-index: 50;
+    margin-left: 2.5%;
+    position: absolute;
+}
+
+.card-row {
+    display: flex;
+    flex-direction: row;
+    width: 90%;
+    margin-top: 12.5%;
+}
+
+.column {
+    text-align: center;
+    float: left;
+    width: 25%;
+    padding: 0 10px;
+    cursor: pointer;
+}
+
+button {
+    text-decoration: none;
+    background: transparent;
+    border: none;
+    color: var(--font-color);
+    padding: 0;
+    margin: 0;
+}
+
+.card {
+    box-shadow: 0 4px 8px 0 hsl(from var(--button-color) h s l);
+    padding: 16px;
+    text-align: center;
+    background-color: var(--bg-second);
+    border-radius: 50px;
+    font-size: 150%;
+    color: var(--font-color);
+    transition: all 0.2s ease-in;
 }