diff --git a/100_projects/10-animated-wavy-background/index.html b/100_projects/10-animated-wavy-background/index.html new file mode 100644 index 0000000..91c836e --- /dev/null +++ b/100_projects/10-animated-wavy-background/index.html @@ -0,0 +1,18 @@ + + + + + + document + + + +
+
+ +

Card Title

+

Lorem ipsum dolor sit amet.

+
+
+ + \ No newline at end of file diff --git a/100_projects/10-animated-wavy-background/style.css b/100_projects/10-animated-wavy-background/style.css new file mode 100644 index 0000000..9814368 --- /dev/null +++ b/100_projects/10-animated-wavy-background/style.css @@ -0,0 +1,53 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +body { + margin: 0; + background: #313433; + color: #313433; +} +.page { + height: 100vh; +} +.page::before { + content: ""; + width: 300%; + height: 100%; + background-color: #B6D6C8; + position: fixed; + left: 50%; + top: 50%; + z-index: -1; + transform: translateX(-50%) skew(0, -10deg); + border-radius: 50%; + animation: waving 5s ease-in-out infinite alternate; +} +@keyframes waving { + from { + transform: translateX(-50%) skew(0, -10deg); + } + to { + transform: translateX(-30%) skew(10deg, 0); + } +} +.card { + width: 300px; + padding: 20px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: rgba(255, 255, 255, .2); + backdrop-filter: blur(10px); + border-radius: 10px; + box-shadow: + 1px 1px 10px rgba(255, 255, 255, .2), + -1px -1px 10px rgba(255, 255, 255, .2); +} +.card img { + max-width: 100%; + border-radius: 10px; +} \ No newline at end of file diff --git a/100_projects/10-animated-wavy-background/women.jpg b/100_projects/10-animated-wavy-background/women.jpg new file mode 100644 index 0000000..a0e4857 Binary files /dev/null and b/100_projects/10-animated-wavy-background/women.jpg differ