diff --git a/README.md b/README.md index 06b667f..2adf51b 100644 --- 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 index 0a69c80..a248e3a 100644 --- 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 index 2c2c2f5..e662195 100644 --- 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;