Add files via upload

Jeorgey · Feb 13, 2024 · 7070083 · 7070083
commit 7070083
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 0 deletions.
diff --git a/giphy.gif b/giphy.gif
diff --git a/giphy2.gif b/giphy2.gif
diff --git a/giphy3.gif b/giphy3.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Valentine</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <main>
+            <img src="giphy.gif">
+            <img src="giphy.gif" style="transform: scaleX(-1); float: right;">
+            <p>Will you be my Valentine?</p>
+            <div class="button" id="button">
+                <button id="noButton">No</button>
+            </div>
+            <div class="button2" id="button2">
+                <button id="yesButton">Yes</button>
+            </div>
+            <img id="singleHeart" src="giphy2.gif">
+            <img class="im" id="im" src="giphy3.gif">
+        </main>
+        <script>
+            var d = document.getElementById("button");
+            var e = document.getElementById("button2");
+            var i = document.getElementById("im");
+            d.addEventListener('click',function(){d.className = d.className + " move"; e.className = e.className + " move"});
+            e.addEventListener('click',function(){i.className = i.className + " appear"})
+        </script>
+    </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,99 @@
+body {
+    background-color: rgba(248, 244, 245, 0.717);
+}
+
+button {
+    background-color: rgba(99, 99, 245, 0.912);
+    font-size: x-large;
+    color: white;
+    padding: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+    border-radius: 15px;
+}
+
+p {
+    text-align: center;
+    font-size: 3vw;
+    font-family: 'Courier New', Courier, monospace;
+    color: rgb(253, 152, 169);
+}
+
+#noButton {
+    position: relative;
+    left: 47.5vw;
+}
+
+.button.move{
+    animation-name: pressed;
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+}
+
+.button2.move{
+    animation-name: pressed2;
+    animation-fill-mode: forwards;
+    animation-duration: 5s;
+}
+
+@keyframes pressed {
+    from{
+        transform: rotateX(0deg);
+    }
+
+    to{
+        transform: rotateX(90deg);
+    }
+
+}
+
+@keyframes pressed2 {
+    from{
+        transform: translateX(0vw);
+    }
+
+    to{
+        transform: translateX(66vw);
+    }
+
+}
+
+#yesButton {
+    position: absolute;
+    top: -3vw;
+    left: -20vw;
+}
+
+#singleHeart {
+    display: block;
+    float: right;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 4vw;
+}
+
+.im {
+    position: relative;
+    opacity: 0;
+    float: left;
+    top: 17.5vw;
+}
+
+.im.appear {
+    position: relative;
+    float: left;
+    animation-name: appeared;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes appeared {
+    from{
+        opacity: 0;
+    }
+
+    to{
+        opacity: 1;
+    }
+
+}