diff --git a/img/cat-0.jpg b/img/cat-0.jpg
new file mode 100644
index 0000000..39828c6
Binary files /dev/null and b/img/cat-0.jpg differ
diff --git a/img/cat-1.jpg b/img/cat-1.jpg
new file mode 100644
index 0000000..b8c48f1
Binary files /dev/null and b/img/cat-1.jpg differ
diff --git a/img/cat-2.jpg b/img/cat-2.jpg
new file mode 100644
index 0000000..084af00
Binary files /dev/null and b/img/cat-2.jpg differ
diff --git a/img/cat-3.jpg b/img/cat-3.jpg
new file mode 100644
index 0000000..4463469
Binary files /dev/null and b/img/cat-3.jpg differ
diff --git a/img/cat-4.jpg b/img/cat-4.jpg
new file mode 100644
index 0000000..eba0fea
Binary files /dev/null and b/img/cat-4.jpg differ
diff --git a/img/cat-5.jpg b/img/cat-5.jpg
new file mode 100644
index 0000000..8496c34
Binary files /dev/null and b/img/cat-5.jpg differ
diff --git a/img/cat-yes.jpg b/img/cat-yes.jpg
new file mode 100644
index 0000000..19edc09
Binary files /dev/null and b/img/cat-yes.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..38d5a5d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+ Valentine
+
+
+
+ 
+ Will you be my Valentine?
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8303092
--- /dev/null
+++ b/script.js
@@ -0,0 +1,63 @@
+"use strict";
+
+const titleElement = document.querySelector(".title");
+const buttonsContainer = document.querySelector(".buttons");
+const yesButton = document.querySelector(".btn--yes");
+const noButton = document.querySelector(".btn--no");
+const catImg = document.querySelector(".cat-img");
+
+const MAX_IMAGES = 5;
+
+let play = true;
+let noCount = 0;
+
+yesButton.addEventListener("click", handleYesClick);
+
+noButton.addEventListener("click", function () {
+ if (play) {
+ noCount++;
+ const imageIndex = Math.min(noCount, MAX_IMAGES);
+ changeImage(imageIndex);
+ resizeYesButton();
+ updateNoButtonText();
+ if (noCount === MAX_IMAGES) {
+ play = false;
+ }
+ }
+});
+
+function handleYesClick() {
+ titleElement.innerHTML = "Yayyy!! :3";
+ buttonsContainer.classList.add("hidden");
+ changeImage("yes");
+}
+
+function resizeYesButton() {
+ const computedStyle = window.getComputedStyle(yesButton);
+ const fontSize = parseFloat(computedStyle.getPropertyValue("font-size"));
+ const newFontSize = fontSize * 1.6;
+
+ yesButton.style.fontSize = `${newFontSize}px`;
+}
+
+function generateMessage(noCount) {
+ const messages = [
+ "No",
+ "Are you sure?",
+ "Pookie please",
+ "Don't do this to me :(",
+ "You're breaking my heart",
+ "I'm gonna cry...",
+ ];
+
+ const messageIndex = Math.min(noCount, messages.length - 1);
+ return messages[messageIndex];
+}
+
+function changeImage(image) {
+ catImg.src = `img/cat-${image}.jpg`;
+}
+
+function updateNoButtonText() {
+ noButton.innerHTML = generateMessage(noCount);
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a9b9e86
--- /dev/null
+++ b/style.css
@@ -0,0 +1,70 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 62.5%;
+}
+
+body {
+ background-color: #fff0f6;
+ font-family: "Protest Riot", sans-serif;
+}
+
+.container {
+ height: 100vh;
+ margin: 0 auto;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.cat-img {
+ width: 30rem;
+ height: 30rem;
+ margin-bottom: 2rem;
+}
+
+.title {
+ font-size: 3.6rem;
+ color: #f53699;
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.buttons {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+
+ gap: 1rem;
+}
+
+.btn {
+ padding: 1.5rem 2.5rem;
+ border: none;
+ border-radius: 4px;
+
+ color: white;
+ font-size: 1.6rem;
+ font-weight: 600;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.btn--yes {
+ background-color: #40c057;
+}
+
+.btn--no {
+ background-color: #f03e3e;
+}
+
+.hidden {
+ display: none;
+}