phone parallax

index.html

@@ -71,9 +71,11 @@ <h1 class="H_text"><br>bringing Imagination<br>to Reality</h1>
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam quasi aliquam eligendi, placeat qui corporis!
       </p>
-
-      <div width="300px" align="center">
-        <img id="lightParallax" class="w3-image parallax" src="assets/images/Wulingyuan2.jpg" data-upperoffset="0" data-loweroffset="-50">
+      <div  align="center">
+        <div id="phoneDiv" width="616px" height="297px" class="H_container" align="center">
+          <img id="phoneScreen" class="H_screen parallax" src="assets/images/Wulingyuan2.jpg" data-upperoffset="0" data-loweroffset="-50">
+          <img class="H_mask" src="assets/images/Phone.png">
+        </div>
       </div>
 
 
@@ -88,8 +90,8 @@ <h1 class="H_text"><br>bringing Imagination<br>to Reality</h1>
       </p>
 
         <div class="w3-container w3-padding-32" id="ending" align="center">
-            <img src="https://samuelsellberg.github.io/docs/assets/vectors/Sigill%20-%20white.svg" alt="Samuel Sellberg Sigill" height="50" />
-          </div>
+          <img src="https://samuelsellberg.github.io/docs/assets/vectors/Sigill%20-%20white.svg" alt="Samuel Sellberg Sigill" height="50" />
+        </div>
 
     </div>
 

style_H.css

@@ -20,5 +20,31 @@
     filter: drop-shadow( 0px 2px 2px #0007)
 }
 
+.H_container {
+    position: relative;
+}
+
+.H_screen {
+    position: relative;
+}
+
+.H_mask {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+#phoneDiv {
+    height: 297px;
+    width: 616px;
+    top: 0%;
+    left: 0%;
+}
 
+#phoneScreen {
+    height: 272px;
+    width: 542px;
+    top: 13px;
+    left: 3px;
+  }