get use with .windowWrapper and adapt browsers like firefox

2 files changed, 34 insertions, 20 deletions

diff --git a/index.html b/index.html
index c1a6c990..84eb9d1d 100644
--- a/index.html
+++ b/index.html
@@ -18,21 +18,22 @@
 
         <!-- index page -->
         <div class="wrapper">
-          <section class="indexPage">
-              <div class="window slowScroll animate slideInTop animate--fast">
-                <div class='tilt'>
-                  <div class="placeholder" id="infos">
-                      <div class="text fastScroll">
-                          <h2>Hello! This is</h2>
-                          <object class="br"></object>
-                          <h1 class="title animate bounce animation--delay-p3s">littleblack111</h1>
-                          <object class="br"></object>
-                          <h2>welcome to my <br> website!</h2>
-                      </div>
-                  </div>
-              </div>
-            </div>
-          </section>
+
+            <section class="indexPage">
+                <img class="background">
+                <div class="window slowScroll animate slideInTop animate--fast">
+                    <div class="windowWrap tilt">
+                        <div class="text">
+                            <h2>Hello! I am</h2>
+                            <object class="br"></object>
+                            <h1 class="title animate bounce animation--delay-p3s">littleblack111</h1>
+                            <object class="br"></object>
+                            <h2>welcome to my<br>website!</h2>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
         </div>
 
         <script src="/src/js/index.js"></script>
diff --git a/src/css/index.css b/src/css/index.css
index a7fb6205..a688f4f2 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,3 +1,16 @@
+.wrapper {
+    height: 100vh;
+    width: 100%;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+
 /* main info window ======================================= */
 .indexPage {
     overflow: hidden;
@@ -29,7 +42,7 @@
     /* perspective: 1000px; */
 }
 
-.window .placeholder {
+.window .windowWrap {
     position: relative;
     width: 100%;
     height: 100%;
@@ -45,19 +58,19 @@
 }
 
 .window:hover,
-.placeholder:hover {
+.windowWrap:hover {
   transform: scale(1.1);
   transition: all 0.3s
 }
 
-.window .placeholder .text {
+.window .windowWrap .text {
     position: relative;
     width: 100%;
     text-align: center;
     text-shadow: 10px 10px 10px black;
 }
 
-.window .placeholder .text .title {
+.window .windowWrap .text .title {
     /* z-index: -1; */
     /* transform: translateZ(30px); */
     font-family: smooth;
@@ -74,7 +87,7 @@
   transition: all 0.5s
 }
 
-.window .placeholder .text .br {
+.window .windowWrap .text .br {
     display: block;
     height: 0;
     width: 0;