From 088d59925a119bbce262e5901bb6fc7b9e3a9a34 Mon Sep 17 00:00:00 2001
From: Looki2000 <electro.brzostek@gmail.com>
Date: Fri, 25 Nov 2022 16:12:24 +0100
Subject: [PATCH] updates boxes under the Looki2000 text

---
 index.htm     | 28 +++++++++------------
 js/3d_home.js |  2 +-
 main.css      | 68 ++++++++++++++++++++++++++++++++-------------------
 3 files changed, 56 insertions(+), 42 deletions(-)
diff --git a/index.htm b/index.htm
index eff9704..efb7bbf 100644
--- a/index.htm
+++ b/index.htm
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html>
     <head>
@@ -22,28 +23,23 @@
         <script src="js/3d_home.js"></script>
 
         <div id="over_render">
-            <div id="main_box">
+            <div id="over_render_box">
                 <h1>Looki2000</h1>
             </div>
         </div>
 
-        <div class="projects_box">
-            <h1>About Me</h1>
-            <p>testowane. sussy amogus jest sus. testowy tekst służący testowaniu strony</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
-            <p>testowanie</p>
+        <!-- info boxes -->
+        <div class="boxes" id="box1">
+            <h1>GeoCube</h1> &nbsp;&nbsp;By <a href="">Cube Software</a>
+            <p>GeoCube will be recreation of planet on which you can buy plot for $1 and put your 3D model on to it. We are still working on it.</p>
         </div>
 
+        <div class="boxes" id="box2">
+            <h1>JokeWareHub</h1> &nbsp;&nbsp;By <a href="">Cube Software</a>
+            <p>JokeWareHub will be a hacking and trolling community website on which anyone will be able to upload their software intended for joke purpose.</p>
+        </div>
+        <!-- end of info boxes -->
+
         <footer>
             <p>© 2022 Looki2000</p>
             <a href="https://www.youtube.com/c/Looki2000"><img src="https://www.youtube.com/s/desktop/7edc9c99/img/favicon_96x96.png"></a>
diff --git a/js/3d_home.js b/js/3d_home.js
index d471901..eebe3d5 100644
--- a/js/3d_home.js
+++ b/js/3d_home.js
@@ -87,7 +87,7 @@ function animate() {
     camera.position.z = jelly_position.y;
 
     // translate div displayed over the render frame to the position of the jelly position
-    document.getElementById("main_box").style.transform = "translate(" + (jelly_position.x * 50) + "px, " + (jelly_position.y * 50) + "px)";
+    document.getElementById("over_render_box").style.transform = "translate(" + (jelly_position.x * 50) + "px, " + (jelly_position.y * 50) + "px)";
 
     // if velocity is not 0 then multiply it by damping multiplier. do it for each axis separately
     if (velocity.x != 0) {
diff --git a/main.css b/main.css
index 4af47ec..0f84fa7 100644
--- a/main.css
+++ b/main.css
@@ -77,7 +77,7 @@ nav a:hover {
     
 }
 
-#main_box {
+#over_render_box {
     /* center everything in div horizontally*/
     text-align: center;
 
@@ -90,7 +90,7 @@ nav a:hover {
     backdrop-filter: blur(100px);
     background-image: url(assets/textures/noise.png);
 
-    /* make text look like overexposed blue neon */
+    /* make text look like overexposed neon */
     color: rgb(247, 255, 230);
     text-shadow: 0px 0px 8px rgb(223, 255, 153);
 
@@ -98,34 +98,12 @@ nav a:hover {
     line-height: 20px;
 }
 
-.projects_box {
-    /* rounded corners */
-    border-radius: 8px;
-
-    background-color: rgb(30, 30, 30);
-
-    width: 80%;
-
-    /* aling div in the center of the screen */
-    margin: auto;
-    
-    margin-top: 40px;
-
-    padding: 1px 40px 30px;
-}
-
-.projects_box h1 {
-    /* make font bigger and cyan */
-    font-size: 60px;
-    color: rgb(51, 156, 255);
-}
-
 footer {
     height: 50px;
     background-color: #333;
     text-align: center;
 
-    margin: 50px 0px 0px;
+    margin: 100px 0px 0px;
 
     /* vertcaly center text */
     display: flex;
@@ -137,4 +115,44 @@ footer img {
     width: auto;
     height: 40px;
     margin-left: 20px;
+}
+
+
+/* info boxes under the page welcome div */
+.boxes {
+    /* rounded corners */
+    border-radius: 8px;
+    /**/
+    background-color: rgb(30, 30, 30);
+    width: 80%;
+
+    /* aling div in the center of the screen */
+    margin: auto;
+    margin-top: 40px;
+    padding: 30px 40px;
+}
+
+.boxes h1 {
+    font-size: 60px;
+    display: inline;
+}
+
+.boxes a {
+    /* make text look like overexposed neon */
+    text-shadow: 0px 0px 10px rgb(153, 153, 255);
+    color: rgb(230, 230, 255);
+    
+    text-decoration: none;
+}
+
+
+/* box 1 */
+#box1 h1 {
+    color: rgb(50, 170, 255);
+}
+
+
+/* box 2 */
+#box2 h1 {
+    color: rgb(50, 255, 129);
 }
\ No newline at end of file
