diff --git a/README.md b/README.md index 987dc62..4833040 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ -# Some cool CSS effects +# Background Parallax Effect on Mouse Cursor -Check my branches and have fun! - -View [DEMOS](https://codepen.io/filippoerbisti) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/jOZwwxX) on Codepen. diff --git a/index.html b/index.html new file mode 100644 index 0000000..8925771 --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + + + + Background Parallax Effect on Mouse Cursor + + + + + +
+ + + + + + + + + + + + +

Parallax

+
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..41b3680 --- /dev/null +++ b/style.css @@ -0,0 +1,37 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background: #111; +} + +section { + position: relative; + width: 100%; + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} + +section img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +section h2 { + position: relative; + color: #fff; + font-size: 12em; +}