Merge pull request #1710 from zero-to-mastery/fix-broken-code

first commit for this issue
zero-to-mastery · Sep 4, 2023 · 770b310 · 770b310
2 parents aa2612a + 5132c27
commit 770b310
Show file tree

Hide file tree

Showing 131 changed files with 9,982 additions and 9,698 deletions.
diff --git a/Art/1Abel-Animate/index.html b/Art/1Abel-Animate/index.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>Abel's Animation</title>
-	<link rel="stylesheet" type="text/css" href="style.css">
-</head>
-	<body>
-		<div class="wrapper">
-			<div class="static-txt">Hey, I'm A</div>
-			<ul class="dynamic-txts">
-				<li><span> Awesome Developer.</span></li>
-				<li><span> Back-End Developer.</span></li>
-				<li><span> Front-End Developer.</span></li>
-				<li><span> Full-Stack Developer.</span></li>
-			</ul>
-	</body>
-</html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Abel's Animation</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="static-txt">Hey, I'm A</div>
+      <ul class="dynamic-txts">
+        <li><span> Awesome Developer.</span></li>
+        <li><span> Back-End Developer.</span></li>
+        <li><span> Front-End Developer.</span></li>
+        <li><span> Full-Stack Developer.</span></li>
+      </ul>
+    </div>
+  </body>
+</html>
diff --git a/Art/1Abel-Animate/style.css b/Art/1Abel-Animate/style.css
@@ -1,12 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
-*{
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
 }
 
-body{
+body {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,57 +16,57 @@ body{
 
 .wrappper {
   display: flex;
-
 }
-.wrapper .static-txt{
-  color: #FFFFFF;
+.wrapper .static-txt {
+  color: #ffffff;
   font-size: 60px;
   font-weight: 400;
 }
 
-.wrapper .dynamic-txts{
+.wrapper .dynamic-txts {
   margin-left: 15px;
   height: 90px;
   line-height: 90px;
   overflow: hidden;
 }
 
-.dynamic-txts li{
+.dynamic-txts li {
   list-style: none;
-  color: #FC6D6D;
+  color: #fc6d6d;
   font-size: 60px;
   font-weight: 500;
   position: relative;
   top: 0;
   animation: slide 12s steps(4) infinite;
 }
 @keyframes slide {
-  100%{
+  100% {
     top: -360px;
   }
 }
-.dynamic-txts li span{
+.dynamic-txts li span {
   position: relative;
   margin: 5px 0;
   line-height: 90px;
 }
 
-.dynamic-txts li span::after{
-  content: "";
+.dynamic-txts li span::after {
+  content: '';
   position: absolute;
   left: 0;
   height: 100%;
   width: 100%;
   background: #800000;
-  border-left: 2px solid #FC6D6D;
+  border-left: 2px solid #fc6d6d;
   animation: typing 3s steps(10) infinite;
 }
 
 @keyframes typing {
-  40%, 60%{
+  40%,
+  60% {
     left: calc(100% + 30px);
   }
-  100%{
+  100% {
     left: 0;
   }
-}
+}
diff --git a/Art/AJsDancingBalls/index.html b/Art/AJsDancingBalls/index.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html>
-<head>
-   <title></title>
-   <link rel="stylesheet" type="text/css" href="style.css">
- </head>
- <body>
-  <div class="container">
-  <div class="ball"></div>
-  <div class="ball"></div>
-  <div class="ball"></div>
-  <div class="ball"></div>
-  <div class="ball"></div>
-  <div class="ball"></div>
-  <div class="ball"></div>
-</div>
-</body>
-</html>
+  <head>
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="ball"></div>
+      <div class="ball"></div>
+      <div class="ball"></div>
+      <div class="ball"></div>
+      <div class="ball"></div>
+      <div class="ball"></div>
+      <div class="ball"></div>
+    </div>
+  </body>
+</html>
diff --git a/Art/AJsDancingBalls/style.css b/Art/AJsDancingBalls/style.css
@@ -1,140 +1,140 @@
 body {
-	margin: 0;
-	padding: 0;
-	background: #000000;
+  margin: 0;
+  padding: 0;
+  background: #000000;
 }
 
 .container {
-	width: 200px;
-	height: 100px;
-	padding-top: 100px;
-	margin: 0 auto;
+  width: 200px;
+  height: 100px;
+  padding-top: 100px;
+  margin: 0 auto;
 }
 
 .ball {
-	width: 10px;
-	height: 10px;
-	margin: 10px auto;
-	border-radius: 50px;
+  width: 10px;
+  height: 10px;
+  margin: 10px auto;
+  border-radius: 50px;
 }
 
 .ball:nth-child(1) {
-	background: #9F00FF;
-	-webkit-animation: right 1s infinite ease-in-out;
-	-moz-animation: right 1s infinite ease-in-out;
-	animation: right 1s infinite ease-in-out;
+  background: #9f00ff;
+  -webkit-animation: right 1s infinite ease-in-out;
+  -moz-animation: right 1s infinite ease-in-out;
+  animation: right 1s infinite ease-in-out;
 }
 
 .ball:nth-child(2) {
-	background: #ceff00;
-	-webkit-animation: left 1.1s infinite ease-in-out;
-	-moz-animation: left 1.1s infinite ease-in-out;
-	animation: left 1.1s infinite ease-in-out;
+  background: #ceff00;
+  -webkit-animation: left 1.1s infinite ease-in-out;
+  -moz-animation: left 1.1s infinite ease-in-out;
+  animation: left 1.1s infinite ease-in-out;
 }
 
 .ball:nth-child(3) {
-	background: #FF6FFF;
-	-webkit-animation: right 1.05s infinite ease-in-out;
-	-moz-animation: right 1.05s infinite ease-in-out;
-	animation: right 1.05s infinite ease-in-out;
+  background: #ff6fff;
+  -webkit-animation: right 1.05s infinite ease-in-out;
+  -moz-animation: right 1.05s infinite ease-in-out;
+  animation: right 1.05s infinite ease-in-out;
 }
 
 .ball:nth-child(4) {
-	background: #eee600;
-	-webkit-animation: left 1.15s infinite ease-in-out;
-	-moz-animation: left 1.15s infinite ease-in-out;
-	animation: left 1.15s infinite ease-in-out;
+  background: #eee600;
+  -webkit-animation: left 1.15s infinite ease-in-out;
+  -moz-animation: left 1.15s infinite ease-in-out;
+  animation: left 1.15s infinite ease-in-out;
 }
 
 .ball:nth-child(5) {
-	background: #3f00ff;
-	-webkit-animation: right 1.1s infinite ease-in-out;
-	-moz-animation: right 1.1s infinite ease-in-out;
-	animation: right 1.1s infinite ease-in-out;
+  background: #3f00ff;
+  -webkit-animation: right 1.1s infinite ease-in-out;
+  -moz-animation: right 1.1s infinite ease-in-out;
+  animation: right 1.1s infinite ease-in-out;
 }
 
 .ball:nth-child(6) {
-	background: #ff6347;
-	-webkit-animation: left 1.05s infinite ease-in-out;
-	-moz-animation: left 1.05s infinite ease-in-out;
-	animation: left 1.05s infinite ease-in-out;
+  background: #ff6347;
+  -webkit-animation: left 1.05s infinite ease-in-out;
+  -moz-animation: left 1.05s infinite ease-in-out;
+  animation: left 1.05s infinite ease-in-out;
 }
 
 .ball:nth-child(7) {
-	background: #a7fc00;
-	-webkit-animation: right 1s infinite ease-in-out;
-	-moz-animation: right 1s infinite ease-in-out;
-	animation: right 1s infinite ease-in-out;
+  background: #a7fc00;
+  -webkit-animation: right 1s infinite ease-in-out;
+  -moz-animation: right 1s infinite ease-in-out;
+  animation: right 1s infinite ease-in-out;
 }
 
 @-webkit-keyframes right {
-	0% {
-		-webkit-transform: translate(-15px);
-	}
-	50% {
-		-webkit-transform: translate(15px);
-	}
-	100% {
-		-webkit-transform: translate(-15px);
-	}
+  0% {
+    -webkit-transform: translate(-15px);
+  }
+  50% {
+    -webkit-transform: translate(15px);
+  }
+  100% {
+    -webkit-transform: translate(-15px);
+  }
 }
 
 @-webkit-keyframes left {
-	0% {
-		-webkit-transform: translate(15px);
-	}
-	50% {
-		-webkit-transform: translate(-15px);
-	}
-	100% {
-		-webkit-transform: translate(15px);
-	}
+  0% {
+    -webkit-transform: translate(15px);
+  }
+  50% {
+    -webkit-transform: translate(-15px);
+  }
+  100% {
+    -webkit-transform: translate(15px);
+  }
 }
 
 @-moz-keyframes right {
-	0% {
-		-moz-transform: translate(-15px);
-	}
-	50% {
-		-moz-transform: translate(15px);
-	}
-	100% {
-		-moz-transform: translate(-15px);
-	}
+  0% {
+    -moz-transform: translate(-15px);
+  }
+  50% {
+    -moz-transform: translate(15px);
+  }
+  100% {
+    -moz-transform: translate(-15px);
+  }
 }
 
 @-moz-keyframes left {
-	0% {
-		-moz-transform: translate(15px);
-	}
-	50% {
-		-moz-transform: translate(-15px);
-	}
-	100% {
-		-moz-transform: translate(15px);
-	}
+  0% {
+    -moz-transform: translate(15px);
+  }
+  50% {
+    -moz-transform: translate(-15px);
+  }
+  100% {
+    -moz-transform: translate(15px);
+  }
 }
 
 @keyframes right {
-	0% {
-		transform: translate(-15px);
-	}
-	50% {
-		transform: translate(15px);
-	}
-	100% {
-		transform: translate(-15px);
-	}
+  0% {
+    transform: translate(-15px);
+  }
+  50% {
+    transform: translate(15px);
+  }
+  100% {
+    transform: translate(-15px);
+  }
 }
 
 @keyframes left {
-	0% {
-		transform: translate(15px);
-	}
-	50% {
-		transform: translate(-15px);
-	}
-	100% {
-		transform: translate(15px);
-	}
-}
+  0% {
+    transform: translate(15px);
+  }
+  50% {
+    transform: translate(-15px);
+  }
+  100% {
+    transform: translate(15px);
+  }
+}