diff options
| -rw-r--r-- | audio/carelesswhisper.mp3 | bin | 0 -> 4811655 bytes | |||
| -rw-r--r-- | audio/letsgetiton.mp3 | bin | 0 -> 4662358 bytes | |||
| -rw-r--r-- | css/valentine.css | 142 | ||||
| -rw-r--r-- | images/peten5.jpg | bin | 0 -> 12290504 bytes | |||
| -rw-r--r-- | scripts/valentine.js | 37 | ||||
| -rw-r--r-- | valentine.html | 53 | ||||
| -rw-r--r-- | yesvalentine.html | 47 |
7 files changed, 279 insertions, 0 deletions
diff --git a/audio/carelesswhisper.mp3 b/audio/carelesswhisper.mp3 Binary files differnew file mode 100644 index 0000000..ca9d967 --- /dev/null +++ b/audio/carelesswhisper.mp3 diff --git a/audio/letsgetiton.mp3 b/audio/letsgetiton.mp3 Binary files differnew file mode 100644 index 0000000..16c8ac4 --- /dev/null +++ b/audio/letsgetiton.mp3 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 Binary files differnew file mode 100644 index 0000000..4df190f --- /dev/null +++ b/images/peten5.jpg 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 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <!-- PAGE SETUP--> + <title>aryanna's super cool valentine 2025</title> + <link rel="icon" type="image/x-icon" href="/images/petemcgeenobg.png"> + <meta charset="utf-8"> + <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' name='viewport' /> + <meta name="viewport" content="width=device-width" /> + + <!-- CSS --> + <link href="/css/valentine.css" rel="stylesheet"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" + integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> + + <!-- JS --> + <script src="https://code.jquery.com/jquery-3.7.1.js" + integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script> + <script src="/scripts/peten.js"></script> + <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script> + + <!-- FONTS --> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link + href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap" + rel="stylesheet"> + +</head> + +<body class="font-montserrat fade-in"> + <audio autoplay> + <source src="/audio/carelesswhisper.mp3" type="audio/mpeg"> + </audio> + <div class="content-container"> + <div class="text-container"> + <h1 class="text-center pad-down">aryanna!</h1> + <h1 class="text-center pt-lg-1">will you be my valentine?</h1> + </div> + + <div class="button-wrapper"> + <a href="yesvalentine.html"> + <button type="button" class="btn btn-success btn-lg">YES!</button> + </a> + <button type="button" class="btn btn-danger btn-lg" id="moveBtn">NO!</button> + </div> + </div> + + <script src="/scripts/valentine.js"></script> +</body> + +</html>
\ 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 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <!-- PAGE SETUP--> + <title>aryanna's super cool valentine 2025</title> + <link rel="icon" type="image/x-icon" href="/images/petemcgeenobg.png"> + <meta charset="utf-8"> + <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' name='viewport' /> + <meta name="viewport" content="width=device-width" /> + + <!-- CSS --> + <link href="/css/valentine.css" rel="stylesheet"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" + integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> + + <!-- JS --> + <script src="https://code.jquery.com/jquery-3.7.1.js" + integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script> + <script src="/scripts/peten.js"></script> + <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script> + + <!-- FONTS --> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link + href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap" + rel="stylesheet"> + +</head> + +<body class="font-montserrat fade-in"> + <audio autoplay> + <source src="/audio/letsgetiton.mp3" type="audio/mpeg"> + </audio> + <div class="content-container"> + <div class="text-container"> + <h1 class="text-center pad-down">teehee :3</h1> + <h1 class="text-center pt-lg-1">yay!!! i love you!!</h1> + </div> + <img src="/images/peten5.jpg"> + </div> + + <script src="/scripts/valentine.js"></script> +</body> + +</html>
\ No newline at end of file |
