Merge pull request #20 from hack-rpi/Aaryan-RCOSLearning

BastedEggsRYummy · web-flow · commit 52ffa2190117 · 2025-04-08T21:59:16.000-04:00
Tiktok Animation
diff --git a/AaryanFolder/TikTok/index.html b/AaryanFolder/TikTok/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tick Tock Animation</title>
+    <!-- Google Fonts -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <!-- Stylesheet -->
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="word word-1">
+        <span>T</span>
+        <span>CK</span>
+      </div>
+      <div class="pendulum"></div>
+      <div class="word word-2">
+        <span>T</span>
+        <span>CK</span>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/AaryanFolder/TikTok/style.css b/AaryanFolder/TikTok/style.css
@@ -0,0 +1,67 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+  body {
+    height: 100vh;
+    background: linear-gradient(45deg, #4756c6, #ae76f1, #e9b6ed);
+  }
+  .container {
+    font-size: 14px;
+    width: 35em;
+    height: 31.25em;
+    position: relative;
+    margin: auto;
+  }
+  .word {
+    font-family: "Poppins", sans-serif;
+    color: #301167;
+    font-weight: 800;
+    font-size: 6em;
+    letter-spacing: 0.3em;
+    position: absolute;
+  }
+  .word-1 {
+    left: 0.52em;
+    top: 1em;
+  }
+  .word-2 {
+    top: 3.12em;
+    right: 0;
+  }
+  .word-2 span:last-child {
+    margin-left: 0.3em;
+  }
+  .pendulum {
+    background-color: #f5de59;
+    height: 25em;
+    width: 1.3em;
+    position: absolute;
+    left: 11.9em;
+    top: -2.5em;
+    box-shadow: 0 0 1.8em rgba(0, 8, 57, 0.2);
+    transform: rotate(15deg);
+    transform-origin: top;
+    animation: swing 2.5s infinite ease-in-out;
+  }
+  @keyframes swing {
+    50% {
+      transform: rotate(-15deg);
+    }
+  }
+  .pendulum:after {
+    position: absolute;
+    content: "";
+    height: 2.5em;
+    width: 2.5em;
+    border: 1.3em solid #f5de59;
+    border-radius: 50%;
+    bottom: -4.37em;
+    left: -2.1em;
+  }
+  @media screen and (min-width: 700px) {
+    .container {
+      font-size: 20px;
+    }
+  }
