Add files via upload

2023-03-03 11:37:55 +03:00 · 2023-03-03 11:37:55 +03:00 · 99bb73ef25
commit 99bb73ef25
parent 0b4d9a260b
3 changed files with 71 additions and 0 deletions
--- a/100_projects/10-animated-wavy-background/index.html
+++ b/100_projects/10-animated-wavy-background/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>document</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="page">
+      <div class="card">
+        <img src="women.jpg" alt="" />
+        <h2>Card Title</h2>
+        <p>Lorem ipsum dolor sit amet.</p>
+      </div>
+    </div>
+  </body>
+</html>
--- a/100_projects/10-animated-wavy-background/style.css
+++ 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;
+}
--- a/100_projects/10-animated-wavy-background/women.jpg
+++ b/100_projects/10-animated-wavy-background/women.jpg