update bg-video

Abhiraj-Sardar · Abhiraj-Sardar · commit 7518ea68d28a · 2023-12-29T17:55:56.000+05:30
diff --git a/01.bg-video/index.html b/01.bg-video/index.html
@@ -8,15 +8,16 @@
   </head>
   <body>
     <section class="hero">
-      <video autoplay loop muted plays-inline class="back-video">
+      <video autoplay loop muted plays-inline class="back-video"> <!-- autoplay attribute will make the video runs automatically -->
         <!-- change the video to your own -->
         <source src="assets/video.mp4" />
       </video>
 
-      <section class="content">
+      <section class="content" >
         <h1>Journey</h1>
         <a href="">Explore</a>
       </section>
     </section>
   </body>
 </html>
+<!-- style="border:2px solid black;" -->
diff --git a/01.bg-video/style.css b/01.bg-video/style.css
@@ -28,8 +28,8 @@
 }
 
 .content h1:hover {
-  -webkit-text-stroke: 2px white;
-  color: transparent;
+  -webkit-text-stroke: 2px white; /* it actually gives text border */
+  color: transparent; /* make the color transparent */
 }
 
 .content a {
@@ -40,7 +40,7 @@
   border: 2px solid white;
   padding: 14px 50px;
   margin-top: 20px;
-  transition: 0.5s;
+  transition: 0.5s; /* it defines hover speed*/
 }
 
 .content a:hover {
diff --git a/02.Creative Loading Animation/index.html b/02.Creative Loading Animation/index.html
@@ -17,3 +17,4 @@
     </section>
   </body>
 </html>
+<!-- style="border:2px solid black" -->
diff --git a/02.Creative Loading Animation/style.css b/02.Creative Loading Animation/style.css
@@ -31,7 +31,7 @@ body {
 }
 
 .loader .loading.one {
-  animation-delay: 0.3s;
+  animation-delay: 0.3s; /*defines when the animation will start for this element */
 }
 .loader .loading.two {
   animation-delay: 0.4s;
diff --git a/05. Top 5 Creative Buttons/btn1/style.css b/05. Top 5 Creative Buttons/btn1/style.css
@@ -23,7 +23,7 @@ a {
   transition: all 1s;
 }
 
-a:before {
+a::before {
   content: "DOWNLOAD";
   font-weight: bold;
   color: #000;
@@ -42,5 +42,5 @@ a:before {
 }
 
 a:hover:before {
-  transform: translateY(0);
+  transform: translateY(0%);
 }

Original file line number	Diff line number	Diff line change
`@@ -28,8 +28,8 @@`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.content h1:hover {`
`31`		`- -webkit-text-stroke: 2px white;`
`32`		`- color: transparent;`
	`31`	`+ -webkit-text-stroke: 2px white; /* it actually gives text border */`
	`32`	`+ color: transparent; /* make the color transparent */`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`.content a {`
`@@ -40,7 +40,7 @@`
`40`	`40`	`border: 2px solid white;`
`41`	`41`	`padding: 14px 50px;`
`42`	`42`	`margin-top: 20px;`
`43`		`- transition: 0.5s;`
	`43`	`+ transition: 0.5s; /* it defines hover speed*/`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`.content a:hover {`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ body {`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.loader .loading.one {`
`34`		`- animation-delay: 0.3s;`
	`34`	`+ animation-delay: 0.3s; /defines when the animation will start for this element /`
`35`	`35`	`}`
`36`	`36`	`.loader .loading.two {`
`37`	`37`	`animation-delay: 0.4s;`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ a {`
`23`	`23`	`transition: all 1s;`
`24`	`24`	`}`
`25`	`25`
`26`		`-a:before {`
	`26`	`+a::before {`
`27`	`27`	`content: "DOWNLOAD";`
`28`	`28`	`font-weight: bold;`
`29`	`29`	`color: #000;`
`@@ -42,5 +42,5 @@ a:before {`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`a:hover:before {`
`45`		`- transform: translateY(0);`
	`45`	`+ transform: translateY(0%);`
`46`	`46`	`}`