diff --git a/src/App.css b/src/App.css index 519f373..76b3f56 100644 --- a/src/App.css +++ b/src/App.css @@ -209,6 +209,38 @@ body { --offset: 180px; } +.problems p a { + display: inline-block; + position: relative; + text-decoration: none; + color: inherit; + margin: 0 var(--spacing, 0px); + transition: margin 0.25s; +} + +.problems p a svg { + width: 76px; + height: 40px; + position: absolute; + left: 50%; + bottom: 0; + transform: translate(-50%, 7px) translateZ(0); + fill: none; + stroke: var(--stroke, #bbc1e1); + stroke-linecap: round; + stroke-width: 2px; + stroke-dasharray: var(--offset, 69px) 278px; + stroke-dashoffset: 361px; + transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s; +} + +.problems p a svg:hover { + --spacing: 4px; + --stroke: #7d41e7; + --stroke-delay: 0.1s; + --offset: 180px; +} + .moon, .cube, .star-1, diff --git a/src/App.js b/src/App.js index 1cc1bb9..c9c3894 100644 --- a/src/App.js +++ b/src/App.js @@ -15,35 +15,37 @@ function App() {

#50DaysOfJavaScript

A community-driven open-source initiative for elevating JavaScript - skills through daily, practical coding challenges tailored to - real-world tasks, led by a supportive global community of developers. + skills through daily, practical + + coding challenges + tailored to real-world tasks, led by a supportive global community of developers.

- Join Now + Learn More