Third page in progress

DerpNerdd · Apr 16, 2024 · 8472b62 · 8472b62
1 parent b4a1d03
commit 8472b62
Show file tree

Hide file tree

Showing 10 changed files with 3,861 additions and 2 deletions.
diff --git a/Media/ProjectsSprites/List.PNG b/Media/ProjectsSprites/List.PNG
diff --git a/Media/ProjectsSprites/coolpurplethings.PNG b/Media/ProjectsSprites/coolpurplethings.PNG
diff --git a/Media/ProjectsSprites/coolpurplethings.svg b/Media/ProjectsSprites/coolpurplethings.svg
diff --git a/Media/ProjectsSprites/omgitsmept3.png b/Media/ProjectsSprites/omgitsmept3.png
diff --git a/Media/ProjectsSprites/omgitsmept3.svg b/Media/ProjectsSprites/omgitsmept3.svg
diff --git a/Media/ProjectsSprites/projecttab.png b/Media/ProjectsSprites/projecttab.png
diff --git a/Media/ProjectsSprites/projecttab.svg b/Media/ProjectsSprites/projecttab.svg
diff --git a/Media/ProjectsSprites/selectoverlay.PNG b/Media/ProjectsSprites/selectoverlay.PNG
diff --git a/infopage copy.html b/infopage copy.html
@@ -7,12 +7,19 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <title>Information Page</title>
+    <link rel="stylesheet" href="./projects.css">
+    <title>Projects Page</title>
 </head>
 <body>
     <img id="foam" src="./Media/HomeSprites/Oceanfoam.svg" alt="Foam" style="width: 100%; position: absolute; top: 0; left: 0;"/>
     <img id="gradient-overlay" src="./Media/HomeSprites/imagegradient.png" alt="Gradient Overlay" />
-
+    <img id="page-wide-overlay" src="./Media/ProjectsSprites/omgitsmept3.png" alt="Page Wide Decorative" />
+    <img src="./Media/ProjectsSprites/coolpurplethings.PNG" alt="Purple shattered things" id="purple-thing-overlay">
+    <img src="./Media/ProjectsSprites/List.PNG" alt="List text" id="list-text">
+    <img src="./Media/ProjectsSprites/projecttab.png" alt="projecttab" id="projecttab">
+
+
+
     <div class="controls">
         <label class="switch">
             <input type="checkbox" id="toggleMusic">

diff --git a/projects.css b/projects.css
@@ -0,0 +1,46 @@
+#page-wide-overlay {
+    position: fixed;
+    top: 0; /* Align to the top of the viewport */
+    left: 0; /* Align to the left side of the viewport */
+    right: 0; /* Align to the right side of the viewport */
+    bottom: 30px; /* Give some space at the bottom to account for the taskbar */
+    width: 100vw; /* Make it as wide as the full viewport */
+    height: calc(100vh - 1px); /* Adjust height considering the bottom space */
+    z-index: 16; /* Above the other overlays */
+    object-fit: cover; /* Cover the available space without distorting the aspect ratio */
+  }
+
+  #purple-thing-overlay {
+    position: fixed;
+    top: 0; /* Align to the top of the viewport */
+    left: 0; /* Align to the left side of the viewport */
+    right: 0; /* Align to the right side of the viewport */
+    bottom: 30px; /* Give some space at the bottom to account for the taskbar */
+    width: 100vw; /* Make it as wide as the full viewport */
+    height: calc(100vh - 1px); /* Adjust height considering the bottom space */
+    z-index: 16; /* Above the other overlays */
+    object-fit: cover; /* Cover the available space without distorting the aspect ratio */
+  }
+
+  #list-text{
+      position: fixed;
+      top: 13%; /* Adjust as needed */
+      right: 84%; /* Position towards the right, but not far right */
+      bottom: 30px; /* Give some space at the bottom to account for the taskbar */
+      width: 12%; /* Adjust the width to the desired size */
+      height: auto; /* Maintain the aspect ratio */
+      z-index: 19; /* Above the previous full-page image overlay */
+      object-fit: cover; /* Cover the available space without distorting the aspect ratio */
+    }
+
+
+    #projecttab{
+      position: fixed;
+      top: 23%; /* Adjust as needed */
+      right: 63%; /* Position towards the right, but not far right */
+      bottom: 30px; /* Give some space at the bottom to account for the taskbar */
+      width: 35%; /* Adjust the width to the desired size */
+      height: auto; /* Maintain the aspect ratio */
+      z-index: 19; /* Above the previous full-page image overlay */
+      object-fit: cover; /* Cover the available space without distorting the aspect ratio */
+    }