diff --git a/assets/Cookiemonster-gv11.ttf b/assets/Cookiemonster-gv11.ttf
new file mode 100644
index 0000000..3178f5c
Binary files /dev/null and b/assets/Cookiemonster-gv11.ttf differ
diff --git a/index.html b/index.html
index e69de29..0c8d931 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+ Valentine Letter
+
+
+
+
+
+ Ya wanna be my valentine????
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
index e69de29..92e8d96 100644
--- a/script.js
+++ b/script.js
@@ -0,0 +1,25 @@
+const yesButton = document.querySelector('.yes');
+const noButton = document.querySelector('.no');
+const gif = document.querySelector('.gif');
+const text = document.querySelector('.text');
+
+const happy = "https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExdWc4c2dhc2ZobzdqMmMwYTU1NGYwd3h2bDVsdTlwMGMxdWx2b2oxNyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/MDJ9IbxxvDUQM/giphy.gif";
+const sad = "https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExMzJ3MjN5eGQ3ejh4bXVuMWQ2dWRvbDF2czV5cG53OW96MjdrNmxxNyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/OPU6wzx8JrHna/giphy.gif";
+const question = "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXFoNjJvZmU1ZXE0eDJyeHdtOXBocXB4Zm82ZHVpeHBhM3g2eGtnZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xT0xeuOy2Fcl9vDGiA/giphy.gif";
+
+gif.src=question;
+
+
+yesButton.addEventListener('click', () => {
+ gif.src = happy;
+ text.innerHTML = "Yay! You're my valentine! Love you <3";
+ noButton.style.display = "none";
+ yesButton.style.display = "none";
+});
+
+noButton.addEventListener('click', () => {
+ gif.src = sad;
+ text.innerHTML = "Noooooo! You're not my valentine! I hate you!!!!!";
+ noButton.style.display = "none";
+ yesButton.innerHTML = "Im sorry Pookie! I changed my mind!";
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index e69de29..fed572f 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,42 @@
+@font-face {
+ font-family: 'Cookiemonster'; /*a name to be used later*/
+ src: url('/assets/Cookiemonster-gv11.ttf'); /*URL to font*/
+}
+
+body {
+ background-color:black;
+ font-family: Cookiemonster;
+ color: white;
+ text-align: center;
+}
+
+.yes {
+ color: white;
+ background-color: green;
+ border: none;
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.no {
+ color: white;
+ background-color: red;
+ border: none;
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.yes:hover {
+ background-color: darkgreen;
+}
+
+.no:hover {
+ background-color: darkred;
+}
+
+.text {
+ font-size: 30px;
+ margin-top: 100px;
+}
\ No newline at end of file