Add files via upload

css/style.css

@@ -0,0 +1,271 @@
+:root {
+    --sky: #B4D9D9;
+    --clover: #85BF75;
+
+    --grass: #ECF2BD;
+    --pompom: #F2CF8D;
+    --pudding: #BF8975;
+    --pudding-dark: #8B5A4A;
+    --cloud: #FFFEFF;
+
+    --yes-button: #85BF75;
+    --no-button: #BF8975;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: 'Press Start 2P', cursive;
+}
+
+
+button:hover {
+    cursor: pointer;
+}
+
+body {
+    cursor: url('../pics/cursor.png'), default;
+    max-width: 100vw;
+    overflow-x: hidden;
+    max-height: 100vh;
+    overflow-y: hidden;
+}
+
+
+
+.tamagotchi {
+    position: absolute;
+    top: -10em;
+    z-index: 1;
+}
+
+.egg {
+    background: var(--pompom);
+    border-radius: 50%;
+    width: 20em;
+    height: 23em;
+    box-shadow: 0 0 0 0.5em var(--pudding);
+
+    margin: 0 auto;
+
+}
+
+.tamagotchi>img {
+    width: 22em;
+    height: 22em;
+    top: -15em;
+}
+
+.scene {
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    height: 100vh;
+    background: var(--sky);
+
+
+}
+
+.sky {
+
+    display: grid;
+    place-items: center;
+    text-align: center;
+}
+
+.cloud {
+    background: var(--cloud);
+    border-radius: 50%;
+    position: absolute;
+    width: 10em;
+    height: 5em;
+    top: 20%;
+    left: calc(10% + 5em);
+    filter: blur(0.1em);
+
+}
+
+.puff {
+    position: absolute;
+    background: var(--cloud);
+    border-radius: 50%;
+    width: 10em;
+    height: 5em;
+}
+
+
+
+
+.grass {
+    display: grid;
+    place-items: center;
+    background: var(--grass);
+    position: relative;
+    border-top-left-radius: 50% 10%;
+    border-top-right-radius: 50% 10%;
+
+}
+
+
+.clover {
+    position: absolute;
+    width: 3em;
+    height: 3em;
+    filter: blur(0.03em);
+
+}
+
+.leaf {
+    position: absolute;
+    width: 1.5em;
+    height: 1.5em;
+    background: var(--clover);
+    border-radius: 50%;
+}
+
+.leaf:nth-child(2) {
+    top: 0;
+    left: 0.75em;
+}
+
+.leaf:nth-child(3) {
+    bottom: 0;
+    left: 0.75em;
+}
+
+.leaf:nth-child(4) {
+    top: 0.75em;
+    left: 0;
+}
+
+.leaf:nth-child(5) {
+    top: 0.75em;
+    right: 0;
+}
+
+
+
+.stem {
+    position: absolute;
+    top: 100%;
+    left: -400%;
+    width: 6em;
+    height: 30em;
+    border: solid 0.2em #000;
+    border-color: var(--pudding) transparent transparent transparent;
+    border-radius: 50%/6.25em 6.25em 0 0;
+    transform: translate(-50%, -50%) rotate(90deg);
+}
+
+.message {
+    position: absolute;
+    color: var(--pudding);
+    padding: 1em;
+    border-radius: 0.5em;
+
+    z-index: 2;
+    -webkit-text-stroke: 0.01em var(--pudding-dark);
+    width: 85vw;
+
+}
+
+.button-wrapper {
+    display: flex;
+    justify-content: center;
+    gap: 1.5em;
+    margin-top: 1.5em;
+}
+
+.cute-button {
+    padding: 0.625em 1.25em;
+    border-radius: 3.125em;
+    border: none;
+    color: white;
+    cursor: pointer;
+    transition: transform 0.2s;
+    width: 6.25em;
+    z-index: 1;
+    margin: 0 auto;
+}
+
+.cute-button:hover {
+    transform: scale(1.3);
+    cursor: url('../pics/cursor-click.png'), auto;
+}
+
+.yes-button {
+    background-color: var(--yes-button);
+}
+
+.no-button {
+    background-color: var(--no-button);
+}
+
+.message,
+.cute-button {
+    font-size: 1.5em;
+}
+
+@media (max-width: 600px),
+(max-height: 750px) {
+
+    .message,
+    .cute-button {
+        font-size: 1em;
+    }
+
+
+    .button-wrapper {
+        bottom: 15vh;
+        position: absolute;
+    }
+
+    .message {
+        top: 5vh
+    }
+
+}
+
+
+#ghostie {
+    display: none;
+}
+
+#pompom {
+    display: none;
+}
+
+
+.crack {
+    background-image: url('../pics/crack.png');
+    overflow: hidden;
+    height: 23em;
+    z-index: 3;
+    display: none;
+}
+
+
+@keyframes jiggle {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    25% {
+        transform: rotate(-10deg);
+    }
+
+    50% {
+        transform: rotate(0deg);
+    }
+
+    75% {
+        transform: rotate(10deg);
+    }
+
+    100% {
+        transform: rotate(0deg);
+    }
+}
+
+.jiggle {
+    animation: jiggle 0.5s linear;
+}

index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>🐾 PompomPurrrfect</title>
+    <link rel="stylesheet" href="css/style.css">
+
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+
+</head>
+
+<body>
+
+    <audio autoplay>
+        <source src="audio/pudding.mp3" type="audio/mpeg">
+        Your browser does not support the audio element.
+    </audio>
+
+
+
+    <main class="scene">
+
+        <div class="sky">
+
+            <div class="message">
+                <h1 id="message"> will you accept PomPomPurrin into your heart?</h1>
+            </div>
+        </div>
+
+
+
+        <div class="grass">
+            <div class="tamagotchi">
+                <div id="egg" class="egg">
+                    <div id="crack" class="crack"></div>
+
+                </div>
+                <img src="pics/ghostie.png" id="ghostie" alt="ghostie">
+                <img src="pics/pompompurrin.png" id="pompom" alt="pompom">
+            </div>
+
+
+            <div class="button-wrapper">
+                <button class="cute-button yes-button" onclick="yes()">Yes</button>
+                <button class="cute-button no-button" onclick="no()">No</button>
+            </div>
+
+        </div>
+    </main>
+
+
+
+
+    <script src="js/main.js"></script>
+
+</body>
+
+</html>