From c15181ea2bdeb4b080762d08260d927ad1fff9f5 Mon Sep 17 00:00:00 2001 From: Peter Nguyen Date: Fri, 14 Feb 2025 10:40:44 -0600 Subject: Valentine's Day 2025 --- audio/carelesswhisper.mp3 | Bin 0 -> 4811655 bytes audio/letsgetiton.mp3 | Bin 0 -> 4662358 bytes css/valentine.css | 142 ++++++++++++++++++++++++++++++++++++++++++++++ images/peten5.jpg | Bin 0 -> 12290504 bytes scripts/valentine.js | 37 ++++++++++++ valentine.html | 53 +++++++++++++++++ yesvalentine.html | 47 +++++++++++++++ 7 files changed, 279 insertions(+) create mode 100644 audio/carelesswhisper.mp3 create mode 100644 audio/letsgetiton.mp3 create mode 100644 css/valentine.css create mode 100644 images/peten5.jpg create mode 100644 scripts/valentine.js create mode 100644 valentine.html create mode 100644 yesvalentine.html diff --git a/audio/carelesswhisper.mp3 b/audio/carelesswhisper.mp3 new file mode 100644 index 0000000..ca9d967 Binary files /dev/null and b/audio/carelesswhisper.mp3 differ diff --git a/audio/letsgetiton.mp3 b/audio/letsgetiton.mp3 new file mode 100644 index 0000000..16c8ac4 Binary files /dev/null and b/audio/letsgetiton.mp3 differ diff --git a/css/valentine.css b/css/valentine.css new file mode 100644 index 0000000..5a3995b --- /dev/null +++ b/css/valentine.css @@ -0,0 +1,142 @@ +body, html { + height: 100%; + margin: 0; + display: flex; + justify-content: center; + align-items: center; +} + +body { + width: 100%; + flex-direction: column; + padding: 0; + overflow: hidden; + position: relative; + background-color: #f9f9f9; + background-image: url(https://marketplace.canva.com/EAEUf1ZOyzE/1/0/1600w/canva-pink-and-red-powerful-femme-personal-pattern-valentine%27s-day-desktop-wallpaper-vyLmDobNXOc.jpg); + background-size: cover; + background-repeat: no-repeat; +} + +.font-ubuntu { + font-family: "Ubuntu Sans", serif; + font-optical-sizing: auto; + font-weight: bold; + font-style: normal; + font-variation-settings: "wdth" 100; +} + +.font-montserrat { + font-family: "Montserrat", serif; + font-optical-sizing: auto; + font-weight: normal; + font-style: normal; +} + +.fade-in { + opacity: 1; + animation-name: fadeInOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: 0.5s; + } + + @keyframes fadeInOpacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + +.button-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.content-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.text-container { + margin-bottom: 2rem; +} + +h1 { + font-size: 5rem !important; + color: white !important; + text-shadow: 0px 0px 9px black !important; +} + +.button-wrapper { + display: flex; + gap: 40px; +} + +button { + outline: 1px solid inherit; +} + +.btn-success { + position: static; +} + +#moveBtn { + position: relative; + transition: transform 0.1s ease-in-out; + z-index: 1; +} + +img { + height: 500px !important; + width: 500px !important; + object-fit: cover; + border-radius: 5%; +} + + +@media (max-width: 768px) { + .content-container { + width: 90%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .text-container { + margin-bottom: 1rem; + } + + h1 { + font-size: 3rem !important; + } + + .button-wrapper { + flex-direction: row; + gap: 20px; + } + + button { + width: auto; + } + + img { + height: 300px !important; + width: 300px !important; + } +} diff --git a/images/peten5.jpg b/images/peten5.jpg new file mode 100644 index 0000000..4df190f Binary files /dev/null and b/images/peten5.jpg differ diff --git a/scripts/valentine.js b/scripts/valentine.js new file mode 100644 index 0000000..6347b87 --- /dev/null +++ b/scripts/valentine.js @@ -0,0 +1,37 @@ +const btn = document.getElementById("moveBtn"); + +btn.addEventListener("mouseover", () => { + let randX = (Math.random() * 600) - 300; // Move randomly left/right up to 200px + let randY = (Math.random() * 600) - 300; // Move randomly up/down up to 200px + + // Get viewport dimensions + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + + // Get button dimensions + const btnRect = btn.getBoundingClientRect(); + + // Ensure button stays within viewport + randX = Math.min(Math.max(randX, -btnRect.left), viewportWidth - btnRect.right); + randY = Math.min(Math.max(randY, -btnRect.top), viewportHeight - btnRect.bottom); + + btn.style.transform = `translate(${randX}px, ${randY}px)`; +}); + +btn.addEventListener("click", () => { + let randX = (Math.random() * 600) - 300; // Move randomly left/right up to 200px + let randY = (Math.random() * 600) - 300; // Move randomly up/down up to 200px + + // Get viewport dimensions + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + + // Get button dimensions + const btnRect = btn.getBoundingClientRect(); + + // Ensure button stays within viewport + randX = Math.min(Math.max(randX, -btnRect.left), viewportWidth - btnRect.right); + randY = Math.min(Math.max(randY, -btnRect.top), viewportHeight - btnRect.bottom); + + btn.style.transform = `translate(${randX}px, ${randY}px)`; +}); \ No newline at end of file diff --git a/valentine.html b/valentine.html new file mode 100644 index 0000000..f6f733b --- /dev/null +++ b/valentine.html @@ -0,0 +1,53 @@ + + + + + + aryanna's super cool valentine 2025 + + + + + + + + + + + + + + + + + + + + + + + +
+
+

aryanna!

+

will you be my valentine?

+
+ +
+ + + + +
+
+ + + + + \ No newline at end of file diff --git a/yesvalentine.html b/yesvalentine.html new file mode 100644 index 0000000..c3783f3 --- /dev/null +++ b/yesvalentine.html @@ -0,0 +1,47 @@ + + + + + + aryanna's super cool valentine 2025 + + + + + + + + + + + + + + + + + + + + + + + +
+
+

teehee :3

+

yay!!! i love you!!

+
+ +
+ + + + + \ No newline at end of file -- cgit v1.2.3