diff --git a/Art/ShervonnW/index.html b/Art/ShervonnW/index.html new file mode 100644 index 000000000..1632f2311 --- /dev/null +++ b/Art/ShervonnW/index.html @@ -0,0 +1,42 @@ + + + + + + Simple Animation Page + + + +
+ Raccoon Icon +
5
+
+ + + + + diff --git a/Art/ShervonnW/raccoon-dance.gif b/Art/ShervonnW/raccoon-dance.gif new file mode 100644 index 000000000..b1efee48f Binary files /dev/null and b/Art/ShervonnW/raccoon-dance.gif differ diff --git a/Art/ShervonnW/styles.css b/Art/ShervonnW/styles.css new file mode 100644 index 000000000..6e52e292b --- /dev/null +++ b/Art/ShervonnW/styles.css @@ -0,0 +1,78 @@ +/* Reset some default styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(135deg, #f0f0f0, #c0c0c0); + font-family: 'Arial', sans-serif; +} + +.countdown-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.countdown-icon { + width: 50px; + height: 50px; + margin-bottom: 10px; + animation: pulse 1s infinite; +} + +.countdown-number { + font-size: 3em; + color: #333; + animation: bounce 0.5s; +} + +@keyframes bounce { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.5); + } + 100% { + transform: scale(1); + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } +} + +.animation-container { + border: 2px solid #ddd; + padding: 20px; + background-color: #fff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 10px; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.animation-container:hover { + transform: scale(1.05); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + +.animation-container img { + max-width: 100%; + height: auto; + border-radius: 10px; +} diff --git a/include.js b/include.js index 5fec8e863..5550bde0e 100644 --- a/include.js +++ b/include.js @@ -2442,6 +2442,13 @@ let cards = [ author: 'Dhairya Mehra', githubLink: 'https://github.com/Dhairya-A-Mehra' }, + { + artName: 'Dancing Raccoon', + pageLink: './Art/ShervonnW/index.html', + imageLink: './Art/ShervonnW/raccoon-dance.gif', + author: 'Shervon', + githubLink: 'https://github.com/ShervonnW' + }, { artName: 'CameraShutter', pageLink: './Art/manishjha-04/CameraShutter/index.html',