First commit with the 20st folders so i can see how it render online

ATechAjay · Jul 2, 2022 · 54dcfcb · 54dcfcb
1 parent 823b1cf
commit 54dcfcb
Show file tree

Hide file tree

Showing 44 changed files with 4,266 additions and 1,986 deletions.
diff --git a/day-01.html → 01-Accordion/day-01.html b/day-01.html → 01-Accordion/day-01.html
diff --git a/01-Accordion/readme.md b/01-Accordion/readme.md
@@ -0,0 +1,70 @@
+---
+author: "Ajay Yadav 🎯"
+handle: "@ATechAjay"
+source: "https://twitter.com/ATechAjay/status/1460917148759388166"
+date: "November 17, 2021 2:26 PM"
+---
+![ATechAjay](https://pbs.twimg.com/profile_images/1485567675111981057/mLsrcZdB_normal.jpg)
+Ajay Yadav 🎯 ([@ATechAjay](https://twitter.com/ATechAjay)) - November 17, 2021 2:26 PM
+
+💚 Day 1️⃣ / 1️⃣0️⃣0️⃣ days of Master in CSS Design series!
+
+💥 Today we are going to design ACCORDION using HTML CSS.
+
+❓What is the logic behind designing the accordion?
+
+[#100DaysOfCode](https://twitter.com/hashtag/100DaysOfCode)
+[#CodeNewbie](https://twitter.com/hashtag/CodeNewbie)  [#webdev](https://twitter.com/hashtag/webdev)
+
+A Thread🧵👇 [pic.twitter.com/FkcvkKhiV2](https://twitter.com/ATechAjay/status/1460917148759388166/photo/1)
+
+![3_1460912645389754371](https://pbs.twimg.com/media/FEY0T4xVIAMM7u8.jpg)
+
+[Tweet link](https://twitter.com/ATechAjay/status/1460917148759388166)
+
+---
+
+![ATechAjay](https://pbs.twimg.com/profile_images/1485567675111981057/mLsrcZdB_normal.jpg)
+Ajay Yadav 🎯 ([@ATechAjay](https://twitter.com/ATechAjay)) - November 17, 2021 2:26 PM
+
+👉 First of all, you have to design your simple accordion layout as you wish.
+
+like this one👇 [pic.twitter.com/FIduGCTTc0](https://twitter.com/ATechAjay/status/1460917163322077184/photo/1)
+
+![3_1460913369871912960](https://pbs.twimg.com/media/FEY0-DrVkAAMjzQ.jpg)
+
+[Tweet link](https://twitter.com/ATechAjay/status/1460917163322077184)
+
+---
+
+![ATechAjay](https://pbs.twimg.com/profile_images/1485567675111981057/mLsrcZdB_normal.jpg)
+Ajay Yadav 🎯 ([@ATechAjay](https://twitter.com/ATechAjay)) - November 17, 2021 2:26 PM
+
+👉 Now, initially, you want to collapse all accordion items.
+
+👉 So you can set the display to none in a hidden box container. [pic.twitter.com/0TutAmxoS8](https://twitter.com/ATechAjay/status/1460917178706776067/photo/1)
+
+![3_1460913876040441859](https://pbs.twimg.com/media/FEY1bhTUYAMwe-3.jpg)
+
+![3_1460913912719675392](https://pbs.twimg.com/media/FEY1dp8VEAAoqZY.jpg)
+
+[Tweet link](https://twitter.com/ATechAjay/status/1460917178706776067)
+
+---
+
+![ATechAjay](https://pbs.twimg.com/profile_images/1485567675111981057/mLsrcZdB_normal.jpg)
+Ajay Yadav 🎯 ([@ATechAjay](https://twitter.com/ATechAjay)) - November 17, 2021 2:26 PM
+
+👉 Now when you click on accordion-item then content will be expanded.
+
+👉 For this, you have to add one class in the parent of your accordion item and set the display to block.
+
+😍That's all 💹
+
+codepen : [bit.ly/3oFidnZ](https://bit.ly/3oFidnZ) [pic.twitter.com/jLjuorPXr8](https://twitter.com/ATechAjay/status/1460917193969864706/photo/1)
+
+![3_1460914520625270786](https://pbs.twimg.com/media/FEY2BCkUUAIjr3g.jpg)
+
+![3_1460914596609343492](https://pbs.twimg.com/media/FEY2FdoVQAQv-3f.jpg)
+
+[Tweet link](https://twitter.com/ATechAjay/status/1460917193969864706)
diff --git a/day-02.html → 02-Bouncing balls/day-02.html b/day-02.html → 02-Bouncing balls/day-02.html
@@ -1,113 +1,113 @@
-<!DOCTYPE html>
-<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>D-2 Google logo with bouncing balls</title>
-  </head>
-  <style>
-    /* 
-    blue  #3678E6
-    red #E3382C
-    yellow #EBAD00
-    green #279D47 
-    */
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    body {
-      height: 100vh;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      position: relative;
-    }
-
-    h2 {
-      position: absolute;
-      top: 20px;
-      font-family: consolas;
-    }
-
-    h2 > span {
-      color: #1e90ff;
-      font-family: Arial;
-      font-weight: bold;
-    }
-    ul {
-      display: flex;
-      gap: 18px;
-    }
-    ul > li {
-      list-style: none;
-      width: 35px;
-      height: 35px;
-      border-radius: 50%;
-      animation: ball-jumpping 0.9s linear infinite;
-    }
-    /* Finally, you have to set animation property in your "li" or span or anything. */
-
-    /* first ball jumps after 0.4 seconds */
-
-
-    ul li:nth-child(1) {
-      background: #3678e6;
-      animation-delay: 0.4s;
-    }
-
-    ul li:nth-child(2) {
-      background: #e3382c;
-      animation-delay: 0.6s;
-    }
-
-    ul li:nth-child(3) {
-      background: #ebad00;
-      animation-delay: 0.8s;
-    }
-
-    ul li:nth-child(4) {
-      background: #279d47;
-      animation-delay: 1s;
-    }
-
-
-    @keyframes ball-jumpping {
-      0% {
-        transform: translateY(0);
-      }
-
-      50% {
-        transform: translateY(-75px);
-      }
-
-      100% {
-        transform: translateY(0);
-      }
-    }
-
-    /* 
-    After desiging points we have to add keyframes, 
-    when animation at 0% we want at 0px top from bottom to top.
-    when animationto to 50% we want ball jump approx 100px bottom to top.
-    Then when animation to is 100% then we want ball come back to initial position.
-    */
-  </style>
-  <body>
-    <h2>
-      Follow <span>ATechAjay</span> on twitter for 100 awesome CSS design!
-    </h2>
-    <ul>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-    </ul>
-
-    <!-- First of all we have to add circular points as many required -->
-  </body>
-</html>
+<!DOCTYPE html>
+<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>D-2 Google logo with bouncing balls</title>
+  </head>
+  <style>
+    /* 
+    blue  #3678E6
+    red #E3382C
+    yellow #EBAD00
+    green #279D47 
+    */
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+    }
+
+    h2 {
+      position: absolute;
+      top: 20px;
+      font-family: consolas;
+    }
+
+    h2 > span {
+      color: #1e90ff;
+      font-family: Arial;
+      font-weight: bold;
+    }
+    ul {
+      display: flex;
+      gap: 18px;
+    }
+    ul > li {
+      list-style: none;
+      width: 35px;
+      height: 35px;
+      border-radius: 50%;
+      animation: ball-jumpping 0.9s linear infinite;
+    }
+    /* Finally, you have to set animation property in your "li" or span or anything. */
+
+    /* first ball jumps after 0.4 seconds */
+
+
+    ul li:nth-child(1) {
+      background: #3678e6;
+      animation-delay: 0.4s;
+    }
+
+    ul li:nth-child(2) {
+      background: #e3382c;
+      animation-delay: 0.6s;
+    }
+
+    ul li:nth-child(3) {
+      background: #ebad00;
+      animation-delay: 0.8s;
+    }
+
+    ul li:nth-child(4) {
+      background: #279d47;
+      animation-delay: 1s;
+    }
+
+
+    @keyframes ball-jumpping {
+      0% {
+        transform: translateY(0);
+      }
+
+      50% {
+        transform: translateY(-75px);
+      }
+
+      100% {
+        transform: translateY(0);
+      }
+    }
+
+    /* 
+    After desiging points we have to add keyframes, 
+    when animation at 0% we want at 0px top from bottom to top.
+    when animationto to 50% we want ball jump approx 100px bottom to top.
+    Then when animation to is 100% then we want ball come back to initial position.
+    */
+  </style>
+  <body>
+    <h2>
+      Follow <span>ATechAjay</span> on twitter for 100 awesome CSS design!
+    </h2>
+    <ul>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+
+    <!-- First of all we have to add circular points as many required -->
+  </body>
+</html>