JavaScript Animations (Finished)

HuXn-WebDev · Apr 27, 2023 · 8d4b676 · 8d4b676
1 parent dc12c96
commit 8d4b676
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 0 deletions.
diff --git a/Finished/1. JS Animation/app.js b/Finished/1. JS Animation/app.js
@@ -0,0 +1,6 @@
+const sidebar = document.querySelector(".sidebar");
+const btn = document.querySelector("button");
+
+btn.addEventListener("click", () => {
+  sidebar.classList.toggle("hide");
+});
diff --git a/Finished/1. JS Animation/index.html b/Finished/1. JS Animation/index.html
@@ -0,0 +1,25 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS Animation</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <section class="sidebar">
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </section>
+
+    <div class="center">
+      <button>Click</button>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/Finished/1. JS Animation/style.css b/Finished/1. JS Animation/style.css
@@ -0,0 +1,54 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: #1b1b1b;
+}
+
+section.sidebar {
+  height: 100vh;
+  width: 20%;
+  /* background: rgb(33, 33, 33); */
+  background: #292929;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 1s ease;
+}
+
+.hide {
+  transform: translateX(-230px);
+}
+
+ul li {
+  list-style: none;
+  margin-bottom: 10px;
+}
+
+ul li a {
+  text-decoration: none;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+  color: #fff;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.center button {
+  padding: 10px 20px;
+  font-size: 1rem;
+  border: none;
+  /* box-shadow: 1px 1px 1px 2px rgb(186, 186, 186); */
+  background: #ffa31a;
+  color: #fff;
+  cursor: pointer;
+}
diff --git a/Starter/8. Creatives Project/app.js b/Starter/8. Creatives Project/app.js
diff --git a/Starter/8. Creatives Project/boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg b/Starter/8. Creatives Project/boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg
diff --git a/Starter/8. Creatives Project/index.html b/Starter/8. Creatives Project/index.html
@@ -0,0 +1,13 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Creatives Project</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/Starter/8. Creatives Project/style.css b/Starter/8. Creatives Project/style.css
@@ -0,0 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
+
+@import url("https://fonts.googleapis.com/css2?family=Kumar+One+Outline&display=swap");
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}