Live Preview

Dev-Tarek · Jun 24, 2021 · d570f7f · d570f7f
1 parent 500419e
commit d570f7f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # Vanilla JS Landing Page with SVG Animations
+[Open Live Preview](https://dev-tarek.github.io/vanilla-animated-landing/)
 ![](images/preview.png)
 ___
 ## Contents

diff --git a/css/components/SVG.css b/css/components/SVG.css
@@ -8,12 +8,12 @@ svg {
     height: 100%;
     background-color: white;
 
-    mask-image: url('/images/masks/mask1.png'),  url('/images/masks/mask2.png');
+    mask-image: url('../../images/masks/mask1.png'),  url('../../images/masks/mask2.png');
     mask-repeat: no-repeat, no-repeat;
     mask-position: -1000px 100px, 0px 300px;
     mask-size: cover;
 
-    -webkit-mask-image: url('/images/masks/mask1.png'),  url('/images/masks/mask2.png');
+    -webkit-mask-image: url('../../images/masks/mask1.png'),  url('../../images/masks/mask2.png');
     -webkit-mask-repeat: no-repeat, no-repeat;
     -webkit-mask-position: -1000px 100px, 0px 300px;
     -webkit-mask-size: cover;

diff --git a/css/index.css b/css/index.css
@@ -15,7 +15,7 @@ body {
 .back-div {
     width: 100%;
     height: 100%;
-    background-image: url('images/desert.jpg');
+    background-image: url('../images/desert.jpg');
     background-repeat: no-repeat;
     background-size: cover;
 }
@@ -24,11 +24,11 @@ body {
     height: 100%;
     width: 100%;
     background-color: #c7a07c;
-    mask-image: url('images/masks/maskOverlayL.png'), url('images/masks/maskOverlayR.png');
+    mask-image: url('../images/masks/maskOverlayL.png'), url('../images/masks/maskOverlayR.png');
     mask-position: bottom left, bottom right;
     mask-repeat: no-repeat;
     mask-size: contain;
-    -webkit-mask-image: url('images/masks/maskOverlayL.png'), url('images/masks/maskOverlayR.png');
+    -webkit-mask-image: url('../images/masks/maskOverlayL.png'), url('../images/masks/maskOverlayR.png');
     -webkit-mask-position: bottom left, bottom right;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: contain;