codingstella · venkateshpabbati · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
diff --git a/10 Different Pulse Effect/index.html b/10 Different Pulse Effect/index.html
@@ -2,6 +2,7 @@
 <html lang="en" >
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CodePen - The pulsing</title>
   <link rel="stylesheet" href="./style.css">
 

diff --git a/10 Different Pulse Effect/style.css b/10 Different Pulse Effect/style.css
@@ -76,6 +76,7 @@
     radial-gradient(circle 10px,#f85c00 94%,#0000),
     repeating-conic-gradient(from -30deg,#0000 0 60deg,#f85c00 61deg 120deg);
   -webkit-mask:radial-gradient(circle 15px,#000 calc(100% - 6px),#0000 calc(100% - 5px) 94%,#000);
+  mask:radial-gradient(circle 15px,#000 calc(100% - 6px),#0000 calc(100% - 5px) 94%,#000);
 }
 
 .pulsing-4:after {
@@ -127,6 +128,7 @@
   border-radius: 50% 50% 0 50%;
   background:#514b82;
   -webkit-mask:radial-gradient(circle 10px at 50% 50%,#0000 94%,#000);
+  mask:radial-gradient(circle 10px at 50% 50%,#0000 94%,#000);
 }
 
 .pulsing-6:after {
@@ -177,7 +179,7 @@
   inset:0;
   background:#ff8001;    
   box-shadow: 0 0 0 50px;
-  clip-path: polygon(100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%);;
+  clip-path: polygon(100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%);
 }
 
 .pulsing-8:after {
@@ -230,7 +232,6 @@
   to {transform:scale(1.8);opacity:0}
 }
 
-/**/
 body {
   display: grid;
   grid-template-columns: repeat(auto-fit,minmax(250px,1fr));

diff --git a/10 Different Spinner/index.html b/10 Different Spinner/index.html
@@ -2,6 +2,7 @@
 <html lang="en" >
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CodePen - The Spinner</title>
   <link rel="stylesheet" href="./style.css">
 

diff --git a/10 Different Spinner/style.css b/10 Different Spinner/style.css
@@ -45,6 +45,9 @@
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
     radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
+  mask:
+    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
+    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
   mask-composite: intersect;
   animation:s4 1s infinite steps(10);
@@ -60,6 +63,9 @@
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
     radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
+  mask:
+    repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
+    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
   mask-composite: intersect;
   animation: s5 1s infinite;
@@ -142,7 +148,6 @@
 }
 @keyframes s10 {to{transform: rotate(.5turn)}}
 
-/**/
 body {
   display: grid;
   grid-template-columns: repeat(auto-fit,minmax(250px,1fr));

diff --git a/3D Flipping Text/3D Flipping Text/index.html b/3D Flipping Text/3D Flipping Text/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CodePen - Animated 3d Flipping Loading Text</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!DOCTYPE html>
+<html lang="en" xml:lang="en">
+	<head>
+		<title>3d Flipping Loader</title>
+		<link rel="stylesheet" type="text/css" href="style/style.css">
+	</head>
+
+	<body>
+		<div class="loader">
+			<span>L</span>
+			<span>O</span>
+			<span>A</span>
+			<span>D</span>
+			<span>I</span>
+			<span>N</span>
+			<span>G</span>
+
+
+		</div>
+	</body>
+
+
+</html>
+<!-- partial -->
+
+</body>
+</html>
diff --git a/3D Flipping Text/3D Flipping Text/style.css b/3D Flipping Text/3D Flipping Text/style.css
@@ -0,0 +1,64 @@
+body{
+	background-color: red;
+	padding: 0;
+	margin: 0;
+	height: 100vh;
+	width:100vw;
+	display:flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.loader{
+	-webkit-perspective:700px;
+	perspective: 700px;
+}
+
+.loader>span{
+	font-size: 130px;
+	font-family: "franklin gothic medium",sans-serif;
+	display: inline-block;
+	animation:flip 2.6s infinite linear;
+	transform-origin:0 70%;
+	-webkit-transform-style:preserve-3d;
+	transform-style:preserve-3d;
+}
+
+@keyframes flip{
+	35%{
+		transform: rotateX(360deg);
+	}
+	100%{
+		transform: rotatex(360deg);
+	}
+}
+
+
+.loader>span:nth-child(even){
+	color:white;
+
+}
+
+.loader>span:nth-child(2){
+	animation-delay: 0.3s;
+}
+
+.loader>span:nth-child(3){
+	animation-delay: 0.6s;
+}
+
+.loader>span:nth-child(4){
+	animation-delay: 0.9s;
+}
+
+.loader>span:nth-child(5){
+	animation-delay: 1.2s;
+}
+
+.loader>span:nth-child(6){
+	animation-delay: 1.5s
+}
+
+.loader>span:nth-child(7){
+	animation-delay: 1.8s
+}
diff --git a/3D Flipping Text/index.html b/3D Flipping Text/index.html
@@ -2,14 +2,15 @@
 <html lang="en" >
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CodePen - Animated 3d Flipping Loading Text</title>
   <link rel="stylesheet" href="./style.css">
 
 </head>
 <body>
 <!-- partial:index.partial.html -->
 <!DOCTYPE html>
-<html>
+<html lang="en" xml:lang="en">
 	<head>
 		<title>3d Flipping Loader</title>
 		<link rel="stylesheet" type="text/css" href="style/style.css">

diff --git a/3D Flipping Text/style.css b/3D Flipping Text/style.css
@@ -20,8 +20,8 @@ body{
 	display: inline-block;
 	animation:flip 2.6s infinite linear;
 	transform-origin:0 70%;
-	transform-style:preserve-3d;
 	-webkit-transform-style:preserve-3d;
+	transform-style:preserve-3d;
 }
 
 @keyframes flip{

diff --git a/3d Card With Hover/3d Card With Hover/index.html b/3d Card With Hover/3d Card With Hover/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CodePen - 3D Card Hover Effect</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="card">
+    <div class="wrapper">
+      <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg" class="cover-image" alt="Dark Rider Cover" title="Dark Rider Cover" />
+    </div>
+    <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" class="title" alt="Dark Rider Title" />
+    <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp" class="character" alt="Dark Rider Character" title="Dark Rider Character" />
+  </div>
+
+  <div class="card">
+    <div class="wrapper">
+      <img src="https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg" class="cover-image" alt="Force Mage Cover" title="Force Mage Cover" />
+    </div>
+    <img src="https://ggayane.github.io/css-experiments/cards/force_mage-title.png" class="title" alt="Force Mage Title" title="Force Mage Title" />
+    <img src="https://ggayane.github.io/css-experiments/cards/force_mage-character.webp" class="character" alt="Force Mage Character" title="Force Mage Character" />
+  </div>
+<!-- partial -->
+
+</body>
+</html>
diff --git a/3d Card With Hover/3d Card With Hover/style.css b/3d Card With Hover/3d Card With Hover/style.css
@@ -0,0 +1,107 @@
+:root {
+  --card-height: 300px;
+  --card-width: calc(var(--card-height) / 1.5);
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #191c29;
+}
+.card {
+  width: var(--card-width);
+  height: var(--card-height);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 0 36px;
+  perspective: 2500px;
+  margin: 0 50px;
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.wrapper {
+  transition: all 0.5s;
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+}
+
+.card:hover .wrapper {
+  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
+  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+}
+
+.wrapper::before,
+.wrapper::after {
+  content: "";
+  opacity: 0;
+  width: 100%;
+  height: 80px;
+  transition: all 0.5s;
+  position: absolute;
+  left: 0;
+}
+.wrapper::before {
+  top: 0;
+  height: 100%;
+  background-image: linear-gradient(
+    to top,
+    transparent 46%,
+    rgba(12, 13, 19, 0.5) 68%,
+    rgba(12, 13, 19) 97%
+  );
+}
+.wrapper::after {
+  bottom: 0;
+  opacity: 1;
+  background-image: linear-gradient(
+    to bottom,
+    transparent 46%,
+    rgba(12, 13, 19, 0.5) 68%,
+    rgba(12, 13, 19) 97%
+  );
+}
+
+.card:hover .wrapper::before,
+.wrapper::after {
+  opacity: 1;
+}
+
+.card:hover .wrapper::after {
+  height: 120px;
+}
+.title {
+  width: 100%;
+  transition: transform 0.5s;
+}
+.card:hover .title {
+  transform: translate3d(0%, -50px, 100px);
+}
+
+.character {
+  width: 100%;
+  opacity: 0;
+  transition: all 0.5s;
+  position: absolute;
+  z-index: -1;
+}
+
+.card:hover .character {
+  opacity: 1;
+  transform: translate3d(0%, -30%, 100px);
+}
diff --git a/3d Card With Hover/index.html b/3d Card With Hover/index.html
@@ -2,6 +2,7 @@
 <html lang="en" >
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CodePen - 3D Card Hover Effect</title>
   <link rel="stylesheet" href="./style.css">
 
@@ -10,18 +11,18 @@
 <!-- partial:index.partial.html -->
 <div class="card">
     <div class="wrapper">
-      <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg" class="cover-image" />
+      <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg" class="cover-image" alt="Dark Rider Cover" title="Dark Rider Cover" />
     </div>
-    <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" class="title" />
-    <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp" class="character" />
+    <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" class="title" alt="Dark Rider Title" />
+    <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp" class="character" alt="Dark Rider Character" title="Dark Rider Character" />
   </div>
 
   <div class="card">
     <div class="wrapper">
-      <img src="https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg" class="cover-image" />
+      <img src="https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg" class="cover-image" alt="Force Mage Cover" title="Force Mage Cover" />
     </div>
-    <img src="https://ggayane.github.io/css-experiments/cards/force_mage-title.png" class="title" />
-    <img src="https://ggayane.github.io/css-experiments/cards/force_mage-character.webp" class="character" />
+    <img src="https://ggayane.github.io/css-experiments/cards/force_mage-title.png" class="title" alt="Force Mage Title" title="Force Mage Title" />
+    <img src="https://ggayane.github.io/css-experiments/cards/force_mage-character.webp" class="character" alt="Force Mage Character" title="Force Mage Character" />
   </div>
 <!-- partial -->