diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000..5f0889c --- /dev/null +++ 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/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..b242572 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "githubPullRequests.ignoredPullRequestBranches": [ + "main" + ] +} \ No newline at end of file diff --git a/10 Different Pulse Effect/index.html b/10 Different Pulse Effect/index.html index 5044a61..1c544d5 100644 --- a/10 Different Pulse Effect/index.html +++ b/10 Different Pulse Effect/index.html @@ -2,6 +2,7 @@ + CodePen - The pulsing diff --git a/10 Different Pulse Effect/style.css b/10 Different Pulse Effect/style.css index 751c3ec..40cf72d 100644 --- 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 index 1f66baf..eb9cf6c 100644 --- a/10 Different Spinner/index.html +++ b/10 Different Spinner/index.html @@ -2,6 +2,7 @@ + CodePen - The Spinner diff --git a/10 Different Spinner/style.css b/10 Different Spinner/style.css index f1ef2a2..d1da9d8 100644 --- 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 new file mode 100644 index 0000000..b438f9f --- /dev/null +++ b/3D Flipping Text/3D Flipping Text/index.html @@ -0,0 +1,38 @@ + + + + + + CodePen - Animated 3d Flipping Loading Text + + + + + + + + + 3d Flipping Loader + + + + +
+ L + O + A + D + I + N + G + + +
+ + + + + + + + diff --git a/3D Flipping Text/3D Flipping Text/style.css b/3D Flipping Text/3D Flipping Text/style.css new file mode 100644 index 0000000..dd2bba7 --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/3D Flipping Text/index.html b/3D Flipping Text/index.html index fb70806..b438f9f 100644 --- a/3D Flipping Text/index.html +++ b/3D Flipping Text/index.html @@ -2,6 +2,7 @@ + CodePen - Animated 3d Flipping Loading Text @@ -9,7 +10,7 @@ - + 3d Flipping Loader diff --git a/3D Flipping Text/style.css b/3D Flipping Text/style.css index ee94537..dd2bba7 100644 --- 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 new file mode 100644 index 0000000..bd0a55d --- /dev/null +++ b/3d Card With Hover/3d Card With Hover/index.html @@ -0,0 +1,30 @@ + + + + + + CodePen - 3D Card Hover Effect + + + + + +
+
+ Dark Rider Cover +
+ Dark Rider Title + Dark Rider Character +
+ +
+
+ Force Mage Cover +
+ Force Mage Title + Force Mage Character +
+ + + + diff --git a/3d Card With Hover/3d Card With Hover/style.css b/3d Card With Hover/3d Card With Hover/style.css new file mode 100644 index 0000000..ee045e3 --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/3d Card With Hover/index.html b/3d Card With Hover/index.html index 32a6d59..bd0a55d 100644 --- a/3d Card With Hover/index.html +++ b/3d Card With Hover/index.html @@ -2,6 +2,7 @@ + CodePen - 3D Card Hover Effect @@ -10,18 +11,18 @@
- + Dark Rider Cover
- - + Dark Rider Title + Dark Rider Character
- + Force Mage Cover
- - + Force Mage Title + Force Mage Character
diff --git a/3d Card With Hover/style.css b/3d Card With Hover/style.css index 29d8b02..ee045e3 100644 --- a/3d Card With Hover/style.css +++ b/3d Card With Hover/style.css @@ -41,9 +41,9 @@ body { .card:hover .wrapper { transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); - box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); -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, diff --git a/4 Dot Liquid Loader/4 Dot Liquid Loader/index.html b/4 Dot Liquid Loader/4 Dot Liquid Loader/index.html new file mode 100644 index 0000000..2cd0718 --- /dev/null +++ b/4 Dot Liquid Loader/4 Dot Liquid Loader/index.html @@ -0,0 +1,33 @@ + + + + + + CodePen - Liquid Loader 💧 + + + + + + +
+
+
+
+
+
+ + + + + + + + + + diff --git a/4 Dot Liquid Loader/4 Dot Liquid Loader/style.css b/4 Dot Liquid Loader/4 Dot Liquid Loader/style.css new file mode 100644 index 0000000..52df80a --- /dev/null +++ b/4 Dot Liquid Loader/4 Dot Liquid Loader/style.css @@ -0,0 +1,101 @@ +body { + background: #000; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + overflow: hidden; +} +.container { + position: relative; + width: 250px; + height: 250px; + animation: rotate 4s ease-out infinite; + filter: url("#gooey"); +} +@keyframes rotate { + 0% { + transform: rotate(360deg); + } + 50% { + transform: rotate(360deg); + } + 100% { + transform: rotate(0deg); + } +} +.container .liquid { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: linear-gradient(45deg, #c7eeff, #03a9f4); + width: 80px; + height: 80px; + border-radius: 50%; + --ani_dur: 4s; +} +.container .liquid:nth-child(1) { + top: 0; + animation: animate1 var(--ani_dur) linear infinite; +} +.container .liquid:nth-child(2) { + left: 0; + animation: animate2 var(--ani_dur) linear infinite; +} +.container .liquid:nth-child(3) { + left: 100%; + animation: animate3 var(--ani_dur) linear infinite; +} +.container .liquid:nth-child(4) { + top: 100%; + animation: animate4 var(--ani_dur) linear infinite; +} +@keyframes animate1 { + 0% { + top: 0; + } + 50% { + top: 100%; + } + 100% { + top: 100%; + } +} +@keyframes animate2 { + 0% { + left: 0; + } + 50% { + left: 100%; + } + 100% { + left: 100%; + } +} +@keyframes animate3 { + 0% { + left: 100%; + } + 50% { + left: 0; + } + 100% { + left: 0; + } +} +@keyframes animate4 { + 0% { + top: 100%; + } + 50% { + top: 0; + } + 100% { + top: 0; + } +} +svg { + width: 0; + height: 0; +} \ No newline at end of file diff --git a/4 Dot Liquid Loader/index.html b/4 Dot Liquid Loader/index.html index d25ae49..2cd0718 100644 --- a/4 Dot Liquid Loader/index.html +++ b/4 Dot Liquid Loader/index.html @@ -2,6 +2,7 @@ + CodePen - Liquid Loader 💧 diff --git a/403 Landing Page/index.html b/403 Landing Page/index.html index 4a179c4..ec424fa 100644 --- a/403 Landing Page/index.html +++ b/403 Landing Page/index.html @@ -2,6 +2,7 @@ + CodePen - CodePenChallenge: 403 Forbidden diff --git a/403 Landing Page/script.js b/403 Landing Page/script.js index 788c63a..dfec00e 100644 --- a/403 Landing Page/script.js +++ b/403 Landing Page/script.js @@ -11,9 +11,16 @@ function map(value, sourceMin, sourceMax, destMin, destMax) { } function map2(value, sourceMin, sourceMax, destMin, destMax, percent) { - return percent <= 0.5 - ? map(value, sourceMin, sourceMax, destMin, destMax) - : map(value, sourceMin, sourceMax, destMax, destMin); + return map(value, sourceMin, sourceMax, destMin, destMax); +} + +function escapeHtml(unsafe) { + return unsafe + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); } function fisheye(el) { @@ -25,7 +32,7 @@ function fisheye(el) { text .split("") .map(c => { - return c === " " ? " " : c; + return c === " " ? " " : escapeHtml(c); }) .join("") + ""; diff --git a/9 Dot Navigation/9 Dot Navigation/index.html b/9 Dot Navigation/9 Dot Navigation/index.html index c23b59d..2f39e7b 100644 --- a/9 Dot Navigation/9 Dot Navigation/index.html +++ b/9 Dot Navigation/9 Dot Navigation/index.html @@ -1,20 +1,22 @@ - + + + 9 Dots Menu | v0.2
- - - - - - - - + + + + + + + +
diff --git a/9 Dots Navigation updated/9 Dots Navigation updated/index.html b/9 Dots Navigation updated/9 Dots Navigation updated/index.html new file mode 100644 index 0000000..178fbb6 --- /dev/null +++ b/9 Dots Navigation updated/9 Dots Navigation updated/index.html @@ -0,0 +1,56 @@ + + + + + + + + 9 Dots Menu | Korsat X Parmaga + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/9 Dots Navigation updated/9 Dots Navigation updated/style.css b/9 Dots Navigation updated/9 Dots Navigation updated/style.css new file mode 100644 index 0000000..2c99c80 --- /dev/null +++ b/9 Dots Navigation updated/9 Dots Navigation updated/style.css @@ -0,0 +1,68 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #10131c; +} + +.navigation{ + position: relative; + width: 70px; + height: 70px; + background: #212532; + border-radius: 10px; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + transition: .5s; + transition-delay: .8s; +} +.navigation.active{ + width: 200px; + height: 200px; + transition-delay: 0s; +} + +.navigation span{ + position: absolute; + width: 7px; + height: 7px; + display: flex; + justify-content: center; + align-items: center; + background: #fff; + border-radius: 50%; + transform: translate(calc(12px * var(--x)), calc(12px * var(--y))); + transition: transform .5s, width .5s, height .5s, background .5s; + transition-delay: calc(.1s * var(--i)); +} +.navigation.active span{ + width: 45px; + height: 45px; + background: #333849; + transform: translate(calc(60px * var(--x)), calc(60px * var(--y))); +} + +.navigation span ion-icon{ + transition: .5s; + font-size: 0em; +} + +.navigation.active span ion-icon{ + font-size: 1.35em; + color: #fff; +} +.navigation.active span:hover ion-icon{ + color: #2dfc52; + filter: drop-shadow(0 0 2px #2dfc52) + drop-shadow(0 0 5px #2dfc52) + drop-shadow(0 0 15px #2dfc52); +} \ No newline at end of file diff --git a/9 Dots Navigation updated/index.html b/9 Dots Navigation updated/index.html index 4f88b16..113e5a3 100644 --- a/9 Dots Navigation updated/index.html +++ b/9 Dots Navigation updated/index.html @@ -11,31 +11,31 @@
- + - + - + - + - + - + - + - + - +
diff --git a/Beer 404 Page/index.html b/Beer 404 Page/index.html index 48cfb72..e79c42c 100644 --- a/Beer 404 Page/index.html +++ b/Beer 404 Page/index.html @@ -2,6 +2,7 @@ + CodePen - Beer 404 @@ -11,7 +12,7 @@
+ viewBox="0 0 320.9 277.3" class="svg-style" xml:space="preserve"> diff --git a/Butterfly Share Button/index.html b/Butterfly Share Button/index.html index 5126df3..67a01b2 100644 --- a/Butterfly Share Button/index.html +++ b/Butterfly Share Button/index.html @@ -2,6 +2,7 @@ + CodePen - Butterfly Hexagon diff --git a/Butterfly Share Button/style.css b/Butterfly Share Button/style.css index 3909446..4993bcd 100644 --- a/Butterfly Share Button/style.css +++ b/Butterfly Share Button/style.css @@ -36,8 +36,8 @@ body { font-size: 50px; color: transparent; background: linear-gradient(45deg, #a58fe9, #e37682); - background-clip: text; -webkit-background-clip: text; + background-clip: text; } .hexagon:before, diff --git a/Button Ripple Effect/dist/index.html b/Button Ripple Effect/dist/index.html index dfaefa4..3b4f41f 100644 --- a/Button Ripple Effect/dist/index.html +++ b/Button Ripple Effect/dist/index.html @@ -2,9 +2,9 @@ + CodePen - Button Ripple Effect - diff --git a/CSS Cube Hover effect/index.html b/CSS Cube Hover effect/index.html index d1d4b93..f72bc46 100644 --- a/CSS Cube Hover effect/index.html +++ b/CSS Cube Hover effect/index.html @@ -2,6 +2,7 @@ + CodePen - CSS Only Cubes Hover Effects @@ -10,54 +11,54 @@
-
- - - +
+ + +
-
- - - +
+ + +
-
- - - +
+ + +
-
- - - +
+ + +
-
- - - +
+ + +
-
- - - +
+ + +
-
- - - +
+ + +
-
- - - +
+ + +
-
- - - +
+ + +
diff --git a/Card Hover Effect V1/index.html b/Card Hover Effect V1/index.html index bd1b0ea..9dfd9ec 100644 --- a/Card Hover Effect V1/index.html +++ b/Card Hover Effect V1/index.html @@ -2,6 +2,7 @@ + CodePen - hovering cards @@ -9,7 +10,7 @@
-

Tourist Attractions

+

Tourist Attractions

diff --git a/Card Hover Effect V1/style.css b/Card Hover Effect V1/style.css index 8240352..ad3aa09 100644 --- a/Card Hover Effect V1/style.css +++ b/Card Hover Effect V1/style.css @@ -3,10 +3,12 @@ body { background-color: #dfe6e9; -webkit-transform: perspective(900px); + transform: perspective(900px); -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } .title{ - width=100%; + width: 100%; text-align: center; } .title h1{ @@ -108,7 +110,7 @@ p{ .footer{ position: absolute; top: 500px; - marging: 10px; + margin: 10px; width: 100%; text-align: center; } diff --git a/Card Hover Effect V2/index.html b/Card Hover Effect V2/index.html index 176d8bb..5ddb205 100644 --- a/Card Hover Effect V2/index.html +++ b/Card Hover Effect V2/index.html @@ -2,6 +2,7 @@ + CodePen - Cards Hover Effect -> HTML & CSS diff --git a/Card Hover Effect V2/style.css b/Card Hover Effect V2/style.css index aa0c971..dcc7101 100644 --- a/Card Hover Effect V2/style.css +++ b/Card Hover Effect V2/style.css @@ -48,16 +48,19 @@ body .container .card .face.face1 h2 { body .container .card .face.face1 .java { background-color: #fffc00; -webkit-background-clip: text; + background-clip: text; -webkit-text-fill-color: transparent; } body .container .card .face.face1 .python { background-color: #00fffc; -webkit-background-clip: text; + background-clip: text; -webkit-text-fill-color: transparent; } body .container .card .face.face1 .cSharp { background-color: #fc00ff; -webkit-background-clip: text; + background-clip: text; -webkit-text-fill-color: transparent; } body .container .card .face.face2 { diff --git a/Card Hover Effect V3/index.html b/Card Hover Effect V3/index.html index 4fc2b6d..523fc0f 100644 --- a/Card Hover Effect V3/index.html +++ b/Card Hover Effect V3/index.html @@ -2,6 +2,7 @@ + CodePen - Card Hover Effect V3 diff --git a/Corner Menu/Corner Menu/index.html b/Corner Menu/Corner Menu/index.html index eb1f144..494a53a 100644 --- a/Corner Menu/Corner Menu/index.html +++ b/Corner Menu/Corner Menu/index.html @@ -1,6 +1,7 @@ + Corner Menu @@ -13,19 +14,19 @@
- + - + - + - + -
diff --git a/Creative Link Hover/dist/index.html b/Creative Link Hover/dist/index.html index 9f8224a..f6b2397 100644 --- a/Creative Link Hover/dist/index.html +++ b/Creative Link Hover/dist/index.html @@ -2,9 +2,9 @@ + CodePen - Three Fancy Link Hover Effects - diff --git a/Custom Captcha Generator using JS/dist/index.html b/Custom Captcha Generator using JS/dist/index.html index d57ac85..4a22195 100644 --- a/Custom Captcha Generator using JS/dist/index.html +++ b/Custom Captcha Generator using JS/dist/index.html @@ -2,17 +2,17 @@ + CodePen - Custom Captcha Generator using JS -
Captcha Generator
- -
diff --git a/Custom Captcha Generator using JS/dist/style.css b/Custom Captcha Generator using JS/dist/style.css index 0177505..d60f70f 100644 --- a/Custom Captcha Generator using JS/dist/style.css +++ b/Custom Captcha Generator using JS/dist/style.css @@ -86,6 +86,7 @@ header { background: #14141c; color: #fff; cursor: pointer; + -webkit-user-select: none; user-select: none; } .button button:active { diff --git a/Custom-Scrollbar/Custom Scrollbar/index.html b/Custom-Scrollbar/Custom Scrollbar/index.html index c0b5c42..3dbb24f 100644 --- a/Custom-Scrollbar/Custom Scrollbar/index.html +++ b/Custom-Scrollbar/Custom Scrollbar/index.html @@ -1,6 +1,7 @@ + Custom Scrollbar diff --git a/Custom-Scrollbar/Custom Scrollbar/style.css b/Custom-Scrollbar/Custom Scrollbar/style.css index 9f764ab..63f1ab1 100644 --- a/Custom-Scrollbar/Custom Scrollbar/style.css +++ b/Custom-Scrollbar/Custom Scrollbar/style.css @@ -31,14 +31,12 @@ p.text { .sub-div { max-height: 100vh; overflow-y: scroll; - /*Thumb color and background color for firefox */ - scrollbar-color: #00c6ff #242942; - overflow-x: none; + overflow-x: hidden; } /* ::-webkit- is for chrome */ ::-webkit-scrollbar { width: 1.2em; - overflow-x: none; + overflow-x: hidden; } ::-webkit-scrollbar-track { background-color: #242942; @@ -47,7 +45,7 @@ p.text { } ::-webkit-scrollbar-thumb { background: #00c6ff; - background: -webkit-linear-gradient(to right, #00c6ff, #0072ff); + background: -webkit-linear-gradient(left, #00c6ff, #0072ff); background: linear-gradient(to right, #00c6ff, #0072ff); border-radius: 0.3em; } diff --git a/Dark & Light - Calculator/index.html b/Dark & Light - Calculator/index.html index 934062b..bcf4779 100644 --- a/Dark & Light - Calculator/index.html +++ b/Dark & Light - Calculator/index.html @@ -2,6 +2,7 @@ + CodePen - Dark & Light Theme Calculator @@ -18,6 +19,15 @@
+ + + + + + + + + diff --git a/Dark & Light - Calculator/style.css b/Dark & Light - Calculator/style.css index 1d5fec9..4b8a5e7 100644 --- a/Dark & Light - Calculator/style.css +++ b/Dark & Light - Calculator/style.css @@ -7,18 +7,13 @@ } body { font-family: sans-serif; -} -a { - text-decoration: none; - color: #fff; -} -body { background: rgb(238, 174, 202); background: radial-gradient( circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100% ); +/* Removed duplicate body selector */ } .container { height: 100vh; @@ -33,6 +28,7 @@ body { padding: 20px; border-radius: 10px; box-shadow: 0 0 30px #8a817c; + background-color: #fbfefb; } .theme-toggler { position: absolute; @@ -70,6 +66,7 @@ body { font-size: 30px; margin-bottom: 20px; overflow-x: scroll; + white-space: nowrap; } #display::-webkit-scrollbar { display: block; @@ -84,16 +81,14 @@ button { font-size: 20px; cursor: pointer; transition: all 200ms ease; + overflow: hidden; } button:hover { transform: scale(1.1); } button#equal { height: 130px; -} /* light theme */ -.calculator { - background-color: #fbfefb; } .calculator #display { color: #0a1e23; diff --git a/Detect Battery Status/Detect Battery Status/index.html b/Detect Battery Status/Detect Battery Status/index.html index fac5100..489f4de 100644 --- a/Detect Battery Status/Detect Battery Status/index.html +++ b/Detect Battery Status/Detect Battery Status/index.html @@ -1,6 +1,7 @@ + Detect Battery Status diff --git a/Digital Clock With Reflection/index.html b/Digital Clock With Reflection/index.html index c347bf9..78facde 100644 --- a/Digital Clock With Reflection/index.html +++ b/Digital Clock With Reflection/index.html @@ -1,52 +1,53 @@ - - + + - - Clock UI Design - + + + Modern Clock UI + -
-

The time is now

-
-
00Hours
-
00Minutes
-
00Seconds
-
-
-
- +
+

The time is now

+
+
+ -- + Hours +
+
+ -- + Minutes +
+
+ -- + Seconds +
+
+ -- +
+
+
+ + - - diff --git a/Digital Clock With Reflection/style.css b/Digital Clock With Reflection/style.css index d5dadc9..eab3ef3 100644 --- a/Digital Clock With Reflection/style.css +++ b/Digital Clock With Reflection/style.css @@ -1,84 +1,126 @@ -@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap'); -* -{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Open Sans', sans-serif; +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap'); + +/* CSS Variables for easy theming */ +:root { + --font-family: 'Open Sans', sans-serif; + --bg-color: #060a1f; + --primary-color: #2196f3; + --primary-accent: #127fd6; + --secondary-color: #ff006a; + --secondary-accent: #ec0062; + --text-light: #ffffff; + --text-dark: #000000; + --box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } -body -{ - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background: #060a1f; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -#clock h2 -{ - position: relative; - display: block; - color: #fff; - text-align: center; - margin: 10px 0; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.4em; - font-size: 0.8em; + +body { + font-family: var(--font-family); + background-color: var(--bg-color); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 1rem; } -#clock #time -{ - display: flex; + +#clock { + text-align: center; + color: var(--text-light); } -#clock #time div -{ - position: relative; - margin: 0 5px; - -webkit-box-reflect: below 1px linear-gradient(transparent,#0004); + +#clock h2 { + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.4em; + font-size: 0.9rem; + margin-bottom: 1rem; } -#clock #time div span -{ - position: relative; - display: block; - width: 100px; - height: 80px; - background: #2196f3; - color: #fff; - font-weight: 300; - display: flex; - justify-content: center; - align-items: center; - font-size: 3em; - z-index: 10; - box-shadow: 0 0 0 1px rgba(0,0,0,.2); + +#time { + display: flex; + gap: 1rem; + flex-wrap: wrap; + justify-content: center; } -#clock #time div span:nth-child(2) -{ - height: 30px; - font-size: 0.7em; - letter-spacing: 0.2em; - font-weight: 500; - z-index: 9; - box-shadow: none; - background: #127fd6; - text-transform: uppercase; + +.time-segment { + position: relative; + text-align: center; + filter: drop-shadow(var(--box-shadow)); } -#clock #time div:nth-last-child(2) span -{ - background: #ff006a; + +/* Reflection effect using pseudo-element */ +.time-segment::after { + content: ""; + position: absolute; + top: 100%; + left: 0; + width: 100%; + height: 100%; + background: inherit; + transform: scaleY(-1); + opacity: 0.25; + filter: blur(2px); + -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); + mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); } -#clock #time div:nth-last-child(2) span:nth-child(2) -{ - background: #ec0062; + +.time-segment span.value { + display: flex; + align-items: center; + justify-content: center; + width: 100px; + height: 80px; + font-size: 3em; + font-weight: 300; + background-color: var(--primary-color); + color: var(--text-light); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); + z-index: 1; +} + +.time-segment span.label { + display: block; + height: 30px; + font-size: 0.7em; + letter-spacing: 0.2em; + font-weight: 500; + background-color: var(--primary-accent); + color: var(--text-light); + text-transform: uppercase; +} + +/* Custom highlight for seconds block */ +.time-segment:nth-child(3) span.value { + background-color: var(--secondary-color); +} +.time-segment:nth-child(3) span.label { + background-color: var(--secondary-accent); +} + +/* Styling for AM/PM */ +.time-segment:last-child { + width: 60px; + height: 40px; +} + +.time-segment:last-child span.value { + position: absolute; + bottom: 0; + width: 60px; + height: 40px; + font-size: 1.5em; + background-color: var(--text-light); + color: var(--text-dark); + z-index: 2; +} + +.time-segment:last-child::after { + height: 40px; } -#clock #time div:nth-last-child(1) span -{ - position: absolute; - bottom: 0; - width: 60px; - height: 40px; - font-size: 1.5em; - background: #fff; - color: #000; - -webkit-box-reflect: below 1px linear-gradient(transparent,#0004); -} \ No newline at end of file diff --git a/Download Button/dist/index.html b/Download Button/dist/index.html index 06ec808..35b0281 100644 --- a/Download Button/dist/index.html +++ b/Download Button/dist/index.html @@ -2,6 +2,7 @@ + CodePen - Download Button Animation @@ -22,7 +23,7 @@ - +
@@ -30,7 +31,7 @@
- +
diff --git a/Download Button/dist/style.css b/Download Button/dist/style.css index 4df84e7..8e327c7 100644 --- a/Download Button/dist/style.css +++ b/Download Button/dist/style.css @@ -56,6 +56,7 @@ body .container .button { overflow: hidden; text-decoration: none; -webkit-mask-image: -webkit-radial-gradient(white, black); + mask-image: radial-gradient(white, black); background: var(--background); border-radius: 8px; box-shadow: 0 2px 8px -1px var(--shadow); diff --git a/Download Button/index.html b/Download Button/index.html index dd2043f..bea75dd 100644 --- a/Download Button/index.html +++ b/Download Button/index.html @@ -1,7 +1,43 @@ + + + + + CodePen - Download Animation - CSS Only + + + + + +
+
+
+ +
+
+
+ + + + + + - - + + + --> diff --git a/Drop Liquid Loading/index.html b/Drop Liquid Loading/index.html index ff58b28..0d70992 100644 --- a/Drop Liquid Loading/index.html +++ b/Drop Liquid Loading/index.html @@ -2,6 +2,7 @@ + CodePen - Loading Liquid Animation diff --git a/Dynamic Calendar JavaScript/style.css b/Dynamic Calendar JavaScript/style.css index 8e6cdb0..22a4248 100644 --- a/Dynamic Calendar JavaScript/style.css +++ b/Dynamic Calendar JavaScript/style.css @@ -38,6 +38,7 @@ header .icons span{ text-align: center; line-height: 38px; font-size: 1.9rem; + -webkit-user-select: none; user-select: none; border-radius: 50%; } diff --git a/Dynamic Stopwatch/index.html b/Dynamic Stopwatch/index.html index 8670cc5..e6d9d5c 100644 --- a/Dynamic Stopwatch/index.html +++ b/Dynamic Stopwatch/index.html @@ -2,6 +2,7 @@ + CodePen - Stopwatch diff --git a/Dynamic Stopwatch/script.js b/Dynamic Stopwatch/script.js index 418edaf..20ce2fa 100644 --- a/Dynamic Stopwatch/script.js +++ b/Dynamic Stopwatch/script.js @@ -1,4 +1,7 @@ -let hr = (min = sec = ms = "0" + 0), +let hr = "0" + 0, + min = "0" + 0, + sec = "0" + 0, + ms = "0" + 0, startTimer; const startBtn = document.querySelector(".start"), diff --git a/Dynamic Stopwatch/style.css b/Dynamic Stopwatch/style.css index 3485d87..7b3ec50 100644 --- a/Dynamic Stopwatch/style.css +++ b/Dynamic Stopwatch/style.css @@ -14,6 +14,7 @@ body { background: #628efc; } .wrapper { + -webkit-user-select: none; user-select: none; } .wrapper .time { diff --git a/Forest Parallex Website/dist/index.html b/Forest Parallex Website/dist/index.html index 0c42c7a..16dc158 100644 --- a/Forest Parallex Website/dist/index.html +++ b/Forest Parallex Website/dist/index.html @@ -2,6 +2,7 @@ + CodePen - Forest Parallex Website @@ -21,14 +22,14 @@

It's time for a new
Adventure

- - - + Flying bird 1 + Flying bird 2 + Forest background Explore - - + Rocks in the forest + Water in the forest
diff --git a/Frame Hover Effect/index.html b/Frame Hover Effect/index.html index a58fadb..f913097 100644 --- a/Frame Hover Effect/index.html +++ b/Frame Hover Effect/index.html @@ -2,6 +2,7 @@ + CodePen - Frame hover effect with one element @@ -9,8 +10,8 @@ a canyon and a lake -a canyon +a canyon - + \ No newline at end of file diff --git a/Frame Hover Effect/style.css b/Frame Hover Effect/style.css index 59abb0d..531b7f7 100644 --- a/Frame Hover Effect/style.css +++ b/Frame Hover Effect/style.css @@ -7,7 +7,7 @@ img { width: var(--s); aspect-ratio: 1; outline: calc(var(--s)/2) solid #0009; - outline-offset: calc(var(--s)/-2); + outline-offset: calc(var(--s)/(-2)); cursor: pointer; transition: 0.3s; } diff --git a/Full Overlay Navigation/index.html b/Full Overlay Navigation/index.html index 716406e..d0ee21d 100644 --- a/Full Overlay Navigation/index.html +++ b/Full Overlay Navigation/index.html @@ -2,6 +2,7 @@ + CodePen - How To Create a Full screen Overlay Navigation @@ -10,7 +11,7 @@ - + diff --git a/Full Overlay Navigation/script.js b/Full Overlay Navigation/script.js index fda67b0..b68a6d4 100644 --- a/Full Overlay Navigation/script.js +++ b/Full Overlay Navigation/script.js @@ -1,6 +1,6 @@ function menuToggle() { - var nav = document.getElementById("nav") - var toggle = document.getElementById("toggle") + let nav = document.getElementById("nav") + let toggle = document.getElementById("toggle") nav.classList.toggle("active") toggle.classList.toggle("active") } \ No newline at end of file diff --git a/Glassmorph Calculator/index.html b/Glassmorph Calculator/index.html index 7d1c03f..eb6bd6c 100644 --- a/Glassmorph Calculator/index.html +++ b/Glassmorph Calculator/index.html @@ -2,6 +2,7 @@ + CodePen - Glassmorph JS Calculator @@ -10,26 +11,25 @@
- - - c - / - * - 7 - 8 - 9 - - - 4 - 5 - 6 - + - 1 - 2 - 3 - 0 - 00 - . - = + + + + + + + + + + + + + + + + + + +
diff --git a/Glassmorph Calculator/style.css b/Glassmorph Calculator/style.css index 4b3ad2d..1a1c0eb 100644 --- a/Glassmorph Calculator/style.css +++ b/Glassmorph Calculator/style.css @@ -71,6 +71,7 @@ body .container .calculator span { font-weight: 400; cursor: pointer; font-size: 20px; + -webkit-user-select: none; user-select: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(255, 255, 255, 0.05); diff --git a/Glassmorph Loader/index.html b/Glassmorph Loader/index.html index 1928a9a..8c363a9 100644 --- a/Glassmorph Loader/index.html +++ b/Glassmorph Loader/index.html @@ -2,6 +2,7 @@ + CodePen - Glassmorphism loader @@ -9,10 +10,10 @@
-
-
-
-
+
+
+
+
diff --git a/Glassmorph Loader/style.css b/Glassmorph Loader/style.css index 132364c..035f790 100644 --- a/Glassmorph Loader/style.css +++ b/Glassmorph Loader/style.css @@ -22,6 +22,7 @@ body { .loader::before { content: ""; background: rgba(255, 255, 255, 0); + -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); position: absolute; width: 140px; diff --git a/Glassmorphism Analog Clock/Glassmorphism-Analog-Clock-using-CSS-and-JavaScript-Main/css/style.css b/Glassmorphism Analog Clock/Glassmorphism-Analog-Clock-using-CSS-and-JavaScript-Main/css/style.css index 8acec61..06a5d5b 100644 --- a/Glassmorphism Analog Clock/Glassmorphism-Analog-Clock-using-CSS-and-JavaScript-Main/css/style.css +++ b/Glassmorphism Analog Clock/Glassmorphism-Analog-Clock-using-CSS-and-JavaScript-Main/css/style.css @@ -65,6 +65,7 @@ body { justify-content: center; border: 2px solid rgba(255, 255, 255, .1); border-radius: 50%; + -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background: rgba(255, 255, 255, .05); box-shadow: 0 0 30px rgba(0, 0, 0, .2); diff --git a/Glassmorphism Analog Clock/Glassmorphism-Analog-Clock-using-CSS-and-JavaScript-Main/index.html b/Glassmorphism Analog Clock/Glassmorphism-Analog-Clock-using-CSS-and-JavaScript-Main/index.html index f522ad4..0b195f4 100644 --- a/Glassmorphism Analog Clock/Glassmorphism-Analog-Clock-using-CSS-and-JavaScript-Main/index.html +++ b/Glassmorphism Analog Clock/Glassmorphism-Analog-Clock-using-CSS-and-JavaScript-Main/index.html @@ -2,7 +2,8 @@ - + + Glassmorphism-Analog-Clock diff --git a/Glassmorphism Login Form/Glassmorphism Login Form/index.html b/Glassmorphism Login Form/Glassmorphism Login Form/index.html index c714c98..ad751fc 100644 --- a/Glassmorphism Login Form/Glassmorphism Login Form/index.html +++ b/Glassmorphism Login Form/Glassmorphism Login Form/index.html @@ -2,6 +2,7 @@ + CodePen - Glassmorphism Login form @@ -15,23 +16,23 @@

Login

- +
- +
-
- +

Don't have a account ? Register

diff --git a/Glassmorphism Login Form/Glassmorphism Login Form/style.css b/Glassmorphism Login Form/Glassmorphism Login Form/style.css index 2215ed0..7b8ea55 100644 --- a/Glassmorphism Login Form/Glassmorphism Login Form/style.css +++ b/Glassmorphism Login Form/Glassmorphism Login Form/style.css @@ -22,6 +22,7 @@ section { background: transparent; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 20px; + -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); display: flex; justify-content: center; diff --git a/Glowing Gradient Button/dist/index.html b/Glowing Gradient Button/dist/index.html index e62ad47..1e397d0 100644 --- a/Glowing Gradient Button/dist/index.html +++ b/Glowing Gradient Button/dist/index.html @@ -2,6 +2,7 @@ + CodePen - [Gradient] Glowing Button - onhover diff --git a/Glowing Input Login Form/Glowing Input Login Form/index.html b/Glowing Input Login Form/Glowing Input Login Form/index.html index 3044eec..a2cf0ae 100644 --- a/Glowing Input Login Form/Glowing Input Login Form/index.html +++ b/Glowing Input Login Form/Glowing Input Login Form/index.html @@ -2,6 +2,7 @@ + CodePen - Animated Login Form with Glowing Input @@ -21,7 +22,7 @@
- +
Not a member? Signup now diff --git a/Glowing Login Form/AnimatedLoginPage_001/index.html b/Glowing Login Form/AnimatedLoginPage_001/index.html index d938e37..0efa0e8 100644 --- a/Glowing Login Form/AnimatedLoginPage_001/index.html +++ b/Glowing Login Form/AnimatedLoginPage_001/index.html @@ -9,9 +9,9 @@
- - - + + +
ClearDivideMultiplyBackspace