Valentine's Day 2025

7 files changed, 279 insertions, 0 deletions

diff --git a/audio/carelesswhisper.mp3 b/audio/carelesswhisper.mp3
new file mode 100644
index 0000000..ca9d967
--- /dev/null
+++ b/audio/carelesswhisper.mp3
diff --git a/audio/letsgetiton.mp3 b/audio/letsgetiton.mp3
new 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
new 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