diff --git a/ExploreRSVP.css b/ExploreRSVP.css new file mode 100644 index 0000000..d9727a6 --- /dev/null +++ b/ExploreRSVP.css @@ -0,0 +1,231 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #ff0080 0%, #52268b 100%); + min-height: 100vh; + padding: 2em; +} + +.explore-page { + display: flex; + flex-direction: column; + align-items: center; + color: white; +} + +.explore-page h1 { + margin: 0.5em 0; + font-size: 2em; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} + +#bumpy-heading { + display: inline-block; + position: relative; +} + +#bumpy-heading span { + display: inline-block; + animation: bump 0.8s ease-in-out infinite; + position: relative; +} + +#bumpy-heading span::before, +#bumpy-heading span::after { + content: ''; + position: absolute; + width: 6px; + height: 6px; + border-radius: 50%; + animation: confetti 1.5s ease-out infinite; +} + +#bumpy-heading span::before { + background: linear-gradient(45deg, #ff0080, #ffeb3b); + left: -10px; + animation-delay: calc(0.1s * var(--i)); +} + +#bumpy-heading span::after { + background: linear-gradient(45deg, #00ffff, #ff00ff); + right: -10px; + animation-delay: calc(0.15s * var(--i)); +} + +@keyframes confetti { + 0% { + transform: translateY(0) rotate(0deg) scale(1); + opacity: 1; + } + 50% { + transform: translateY(-30px) rotate(180deg) scale(1.2); + opacity: 0.8; + } + 100% { + transform: translateY(-60px) rotate(360deg) scale(0.5); + opacity: 0; + } +} + +@keyframes bump { + 0%, 100% { + transform: translateY(0); + } + 10% { + transform: translateY(-8px); + } + 20% { + transform: translateY(0); + } + 30% { + transform: translateY(-12px); + } + 40% { + transform: translateY(0); + } + 50% { + transform: translateY(-5px); + } + 60% { + transform: translateY(0); + } +} + +.explore-page h2 { + margin-bottom: 0.2em; + font-size: 1.5em; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} + +#animated-heading { + display: inline-block; +} + +#animated-heading span { + display: inline-block; + animation: explode 2s ease-in-out infinite; + animation-delay: calc(0.08s * var(--i)); +} + +@keyframes explode { + 0%, 100% { + transform: translateY(0); + color: #ff0080; + } + 17% { + transform: translateY(-8px); + color: #ffeb3b; + } + 33% { + transform: translateY(0); + color: #ff00ff; + } + 50% { + transform: translateY(-8px); + color: #00ffff; + } + 67% { + transform: translateY(0); + color: #00ff00; + } + 83% { + transform: translateY(-8px); + color: #ff6b00; + } +} + +.birthday-rsvp-card { + background-image: url('Ilaria\'s.png'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + position: relative; + padding: 0; + width: 100%; + max-width: 500px; + aspect-ratio: 3/4; + border-radius: 16px; + box-shadow: 0 2px 16px rgba(0,0,0,0.14); + text-align: center; + margin-top: 2em; + animation: partyGlow 3s infinite alternate; +} + +.bottom-section { + max-width: 500px; + width: 100%; + text-align: center; + margin-top: 1.5em; +} + +.bottom-section address { + margin-bottom: 1.5em; + font-style: normal; +} + +.bottom-section address a { + color: white; + text-decoration: none; + font-size: 1.1em; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); + transition: color 0.3s; +} + +.bottom-section address a:hover { + color: #ffeb3b; + text-decoration: underline; +} + +.birthday-rsvp-card h3, +.birthday-rsvp-card p { + display: none; +} + +@keyframes partyGlow { + from { + box-shadow: 0 2px 16px rgba(254,144,175,0.3); + } + to { + box-shadow: 0 2px 36px rgba(145,125,254,0.4); + } +} + +.button-container { + display: flex; + flex-direction: column; + gap: 1em; +} + +.animated-btn { + padding: 1em 2em; + background: #fe90af; + color: rgb(119, 18, 74); + font-weight: bold; + border: none; + border-radius: 24px; + font-size: 1.2em; + cursor: pointer; + box-shadow: 0 4px 16px rgba(254,144,175,0.3); + transition: transform 0.2s, background 0.3s; + position: relative; + animation: bounce 1.6s infinite; +} + +.animated-btn:hover { + background: #b575ee; + transform: scale(1.09); +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-7px); + } +} diff --git a/Ilaria's.png b/Ilaria's.png new file mode 100644 index 0000000..c319450 Binary files /dev/null and b/Ilaria's.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..77d29d8 --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + +
+ + +Join me for cake, fun, and celebration!
+Looking forward to celebrating with you!
+