Initial Portal

index.css

@@ -0,0 +1,112 @@
+:root {
+    --background: lightgray;
+    --link-background: rgb(230, 230, 230);
+    --link-accent: rgba(147, 147, 147, 0.2);
+    --logo-shadow: rgba(97, 97, 97, 0.507);
+    --link-color: rgb(87, 87, 87);
+}
+
+@media (prefers-color-scheme: dark) {
+    /*DARK THEME*/
+    :root {
+        --background: black;
+        --link-background: rgb(90, 90, 90);
+        --link-accent: rgba(133, 133, 133, 0.363);
+        --logo-shadow: rgba(97, 97, 97, 0.507);
+        --link-color: rgb(218, 218, 218);
+    }
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 10px;
+    height: 100%;
+}
+
+body {
+    background-color: var(--background);
+    background-size: 5%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.links-container {
+    display: inline-flex;
+    max-width: 100%;
+    overflow-x: hidden;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 2rem;
+}
+.links-container .link-box {
+    width: 15rem;
+    padding: 2rem;
+    transition: all ease-in-out 0.2s;
+    margin: 2rem;
+    border: 1px solid transparent;
+    height: 15rem;
+    background-color: var(--link-background);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.links-container .link-box img {
+    width: 10rem;
+    height: 10rem;
+    filter: drop-shadow(2px 2px 5px var(--logo-shadow));
+}
+.links-container .link-box a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+}
+.links-container .link-box p {
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+    font-size: 2rem;
+    letter-spacing: 1.5px;
+    color: var(--link-color);
+    height: 0;
+    transition: all ease-in-out 0.2s;
+    overflow: hidden;
+    opacity: 0;
+    max-height: 0rem;
+}
+
+.links-container .link-box:hover {
+    border-color: var(--link-accent);
+    box-shadow: 2px 2px 50px var(--link-accent);
+    background-color: var(--link-background);
+    transform: scale(1.05);
+}
+
+.links-container .link-box:hover p {
+    opacity: 1;
+    height: 200px;
+    max-height: 1.4rem;
+    padding: 1rem 2rem;
+}
+
+@media only screen and (max-width: 768px) {
+    .links-container .link-box{
+        border-color: var(--link-accent);
+        box-shadow: 2px 2px 50px var(--link-accent);
+        background-color: var(--link-background);
+    }
+    
+    .links-container .link-box p {
+        opacity: 1;
+        height: 200px;
+        max-height: 1.4rem;
+        padding: 1rem 2rem;
+    }
+}

index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="shortcut icon" type="image/icon" href="favicon.ico"/>
+        <link rel="stylesheet" type="text/css" href="index.css" />
+        <title>NASA.Family</title>
+    </head>
+    <body>
+        <div class="links-container">
+            <div class="link-box">
+                <a href="https://admin.nasa.family">
+                    <img src="./admin.png" />
+                    <p>ADMIN</p>
+                </a>
+            </div>
+            <div class="link-box">
+                <a href="https://docker.nasa.family">
+                    <img src="./docker.png" />
+                    <p>DOCKER</p>
+                </a>
+            </div>
+            <div class="link-box">
+                <a href="https://drive.nasa.family">
+                    <img src="./drive.png" />
+                    <p>DRIVE</p>
+                </a>
+            </div>
+            <div class="link-box">
+                <a href="https://git.nasa.family">
+                    <img src="./git.png" />
+                    <p>GIT</p>
+                </a>
+            </div>
+            <div class="link-box">
+                <a href="https://proxy.nasa.family">
+                    <img src="./proxy.png" />
+                    <p>PROXY</p>
+                </a>
+            </div>
+            <div class="link-box">
+                <a href="https://torrent.nasa.family">
+                    <img src="./torrent.png" />
+                    <p>TORRENT</p>
+                </a>
+            </div>
+        </div>
+    </body>
+</html>