diff --git a/Art/nandan7198/index.html b/Art/nandan7198/index.html new file mode 100644 index 000000000..9c43df7e6 --- /dev/null +++ b/Art/nandan7198/index.html @@ -0,0 +1,150 @@ + + + + + + Pokemon Button + + + +
+ +
+ + diff --git a/Art/nandan7198/pokemonAnimation.gif b/Art/nandan7198/pokemonAnimation.gif new file mode 100644 index 000000000..fd08d2bc5 Binary files /dev/null and b/Art/nandan7198/pokemonAnimation.gif differ diff --git a/Art/nandan7198/style.css b/Art/nandan7198/style.css new file mode 100644 index 000000000..046613aef --- /dev/null +++ b/Art/nandan7198/style.css @@ -0,0 +1,120 @@ +body { + background-color: #121212; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} +button { + position: relative; + width: 150px; + height: 60px; + overflow: hidden; + border: 1px solid black; + border-radius: 50px; + padding-left: 35px; + box-shadow: 2.9px 2.9px 2.2px rgba(0, 0, 0, 0.019), + 5.2px 5.2px 5.3px rgba(0, 0, 0, 0.023), 7px 7px 10px rgba(0, 0, 0, 0.025), + 8.7px 8.7px 17.9px rgba(0, 0, 0, 0.024), + 11.3px 11.3px 33.4px rgba(0, 0, 0, 0.023), + 20px 20px 80px rgba(0, 0, 0, 0.02); +} + +.pika { + position: absolute; + top: -100%; + left: 42%; + transition: 0.5s all; + animation: tilt 1.1s infinite ease-in-out; +} + +@keyframes tilt { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + + 50% { + transform: translate(-50%, -50%) rotate(10deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(0deg); + } +} + +.pokeball { + position: absolute; + top: 25%; + left: 10%; + animation: rotate_4991 1s linear infinite; +} + +@keyframes rotate_4991 { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360deg); + } +} + +button:hover .pika { + top: 90%; +} + +button:hover .pokeball { + animation: none; + transform: scale(0); +} + +button:hover .go { + color: transparent; +} + +.go { + position: absolute; + top: 18%; + left: 45%; + font-size: 30px; + font-weight: 900; + letter-spacing: 1px; +} + +.pword, +.pword2 { + position: absolute; + font-size: 13px; + opacity: 0; + animation: pulse-animation_0011 1s infinite; +} + +@keyframes pulse-animation_0011 { + 0% { + transform: rotatez(-30deg) scale(1); + } + + 50% { + transform: rotatez(-30deg) scale(1.1); + } + + 100% { + transform: rotatez(-30deg) scale(1); + } +} + +.pword { + top: 30%; + left: 72%; +} + +.pword2 { + top: 55%; + left: 75%; +} + +button:hover .pword, +button:hover .pword2 { + opacity: 1; +} diff --git a/include.js b/include.js index 3b39390cf..6b47ebdca 100644 --- a/include.js +++ b/include.js @@ -3005,6 +3005,13 @@ let cards = [ githubLink: 'https://github.com/Kalliran' }, { + artName: 'Pokemon Button Animation', + pageLink: './Art/nandan7198/index.html', + imageLink: './Art/nandan7198/pokemonAnimation.gif', + author: 'Nandan S', + githubLink: 'https://github.com/nandan7198/' + }, + { artName: 'Timeless', pageLink: './Art/aogajoseph/index.html', imageLink: './Art/aogajoseph/screenshot.png',