add app list

index.html

@@ -57,6 +57,22 @@
             <a title="VRChat" href="https://vrchat.com/home/user/usr_708e41b3-5658-4acc-a95c-ab74f4ac4dff"></a>
         </div>
     </div>
-        <p style="clear: left;text-align: center;"><a href="https://github.com/CesiumCs/cesium.one"><img src="assets/GitHub-Mark-Light.png" style="width:2em" alt="View on GitHub"></a></p>
+    <div style="clear: left;"></div>
+
+    <h2>Apps</h2>
+    <p>If you're here with an account, you can log in to some of the apps I host.</p>
+        <div class=apps>
+            <div class=app style="background-color: #053c48;">
+                <h3>VRChat Media</h3>
+                <a title="VRChat Media" href="https://vrchat.cesium.one"></a>
+            </div>
+            <div class=app style="background-color: #053c48;">
+                <h3>Minecraft Map</h3>
+                <a title="Minecraft Map" href="https://cesium.one/minecraft/map/"></a>
+            </div>
+    </div>
+    <div style="clear: left;"></div>
+
+    <p style="text-align: center;"><a href="https://github.com/CesiumCs/cesium.one"><img src="assets/GitHub-Mark-Light.png" style="width:2em" alt="View on GitHub"></a></p>
     </body>
 </html>

styles.css

@@ -70,11 +70,48 @@ a {
 div.contact:hover {
   opacity: 1;
 }
+.apps {
+  width: 550px;
+  margin:auto;
+  display: grid;
+  grid-template-areas:
+    'one two three';
+  grid-gap: 10px;
+  padding: 10px;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
 
+}
+.app {
+    float: left;
+    width: 170px;
+    padding: 15px;
+    background-color: #232629;
+    border-radius: 10px;
+    text-align: center;
+    opacity: .9;
+    position: relative;
+    transition: opacity .25s;
+}
+.app a {
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+}
+div.app:hover {
+  opacity: 1;
+}
 @media screen and (max-width:500px) {
   .contact {
     width: 100%;
   }
+  .app {
+    width: 100%;
+  }
   :root {
     width: 95%;
   }