{"id":118,"date":"2026-02-13T16:36:45","date_gmt":"2026-02-13T16:36:45","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/l_rankins\/?p=118"},"modified":"2026-02-13T16:43:43","modified_gmt":"2026-02-13T16:43:43","slug":"blog-20-valentines-madness","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/l_rankins\/2026\/02\/13\/blog-20-valentines-madness\/","title":{"rendered":"BLOG 20: Valentines Madness"},"content":{"rendered":"\n<p>Today I made a Valentines website thingy from a tutorial<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\" \/>\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n  &lt;title>Be My Valentine \ud83d\udc98&lt;\/title>\n\n\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@500;600;700&amp;family=Poppins:wght@300;400;500&amp;display=swap\" rel=\"stylesheet\">\n\n\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.6.0\/dist\/confetti.browser.min.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<p><strong>This is the main HTML starter code and font and effects.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style>\n    * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n\n    body {\n      min-height: 100vh;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);\n      background-size: 400% 400%;\n      animation: bgMove 12s ease infinite;\n      font-family: \"Poppins\", sans-serif;\n      overflow: hidden;<\/code><\/pre>\n\n\n\n<p><strong>This is the code for the main site and the body.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    @keyframes bgMove {\n      0% { background-position: 0% 50%; }\n      50% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n\n    .card {\n      width: min(92%, 420px);\n      padding: 40px 30px 45px;\n      background: rgba(255, 255, 255, 0.75);\n      backdrop-filter: blur(18px);\n      border-radius: 28px;\n      text-align: center;\n      box-shadow:\n        0 30px 80px rgba(0,0,0,0.25),\n        inset 0 0 0 1px rgba(255,255,255,0.4);\n      position: relative;\n      animation: cardIn 1.1s ease;\n    }<\/code><\/pre>\n\n\n\n<p><strong>This is the code for moving the background and the moving choice.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    @keyframes cardIn {\n      from { opacity: 0; transform: translateY(30px) scale(0.95); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n\n    .card::before {\n      content: \"\";\n      position: absolute;\n      inset: -2px;\n      border-radius: 30px;\n      background: linear-gradient(120deg, #ff4d6d, #ff9a9e, #fbc2eb);\n      z-index: -1;\n      filter: blur(20px);\n      opacity: 0.7;\n    }<\/code><\/pre>\n\n\n\n<p><strong>This is the code for actually moving the choice and choosing its color and such.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    .emoji {\n      font-size: 68px;\n      margin-bottom: 12px;\n      animation: heartbeat 1.8s infinite;\n    }\n\n    @keyframes heartbeat {\n      0%,100% { transform: scale(1); }\n      25% { transform: scale(1.08); }\n      50% { transform: scale(1); }\n      75% { transform: scale(1.12); }\n    }<\/code><\/pre>\n\n\n\n<p><strong>This is the code for the emoji animation and such.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    h2 {\n      font-family: \"Playfair Display\", serif;\n      font-size: 28px;\n      color: #4a1c2f;\n      margin-bottom: 30px;\n      line-height: 1.35;\n    }\n\n    .buttons {\n      position: relative;\n      height: 78px;\n    }\n\n    button {\n      position: absolute;\n      padding: 14px 36px;\n      border-radius: 40px;\n      border: none;\n      font-size: 16px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.25s ease;\n      box-shadow: 0 10px 25px rgba(0,0,0,0.15);\n    }\n<\/code><\/pre>\n\n\n\n<p><strong>This is the code for the buttons.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    button:active {\n      transform: scale(0.94);\n    }\n\n    #yes {\n      left: 12%;\n      background: linear-gradient(135deg, #ff4d6d, #ff758f);\n      color: #fff;\n      box-shadow: 0 15px 35px rgba(255,77,109,0.55);\n    }\n\n    #yes:hover {\n      transform: translateY(-3px);\n      box-shadow: 0 20px 40px rgba(255,77,109,0.7);\n    }\n\n    #no {\n      left: 55%;\n      background: rgba(255,255,255,0.9);\n      color: #777;\n    }<\/code><\/pre>\n\n\n\n<p><strong>This is the code for the choices.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    .hint {\n      margin-top: 28px;\n      font-size: 13px;\n      color: #6b6b6b;\n      font-style: italic;\n    }\n\n    .heart {\n      position: absolute;\n      bottom: -20px;\n      animation: floatUp linear forwards;\n      pointer-events: none;\n      filter: blur(0.3px);\n    }\n\n    @keyframes floatUp {\n      from {\n        transform: translateY(0) scale(1);\n        opacity: 1;\n      }\n      to {\n        transform: translateY(-120vh) scale(1.8);\n        opacity: 0;\n      }\n    }<\/code><\/pre>\n\n\n\n<p><strong>This is the code for moving the buttons.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    @media (max-width: 480px) {\n      h2 { font-size: 23px; }\n      .emoji { font-size: 58px; }\n      button { padding: 12px 28px; font-size: 15px; }\n      #yes { left: 8%; }\n      #no { left: 55%; }\n    }\n  &lt;\/style>\n&lt;\/head>\n\n&lt;body>\n\n  &lt;div class=\"card\">\n    &lt;div class=\"emoji\">\ud83d\udc31\u2764\ufe0f&lt;\/div>\n    &lt;h2>Anon,&lt;br>will you be my Valentine?&lt;\/h2>\n\n    &lt;div class=\"buttons\">\n      &lt;button id=\"yes\">Yes \ud83d\udc96&lt;\/button>\n      &lt;button id=\"no\">No \ud83d\ude48&lt;\/button>\n    &lt;\/div>\n\n    &lt;div class=\"hint\">(:\u2728&lt;\/div>\n  &lt;\/div>\n\n\n  &lt;audio id=\"hoverSound\" src=\"https:\/\/assets.mixkit.co\/sfx\/preview\/mixkit-cartoon-voice-laugh-343.mp3\">&lt;\/audio>\n  &lt;audio id=\"yesSound\" src=\"https:\/\/assets.mixkit.co\/sfx\/preview\/mixkit-achievement-bell-600.mp3\">&lt;\/audio>\n<\/code><\/pre>\n\n\n\n<p><strong>This is the code for the hint text and sounds for hovering over the buttons.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;script>\n    const noBtn = document.getElementById(\"no\");\n    const yesBtn = document.getElementById(\"yes\");\n    const card = document.querySelector(\".card\");\n    const hoverSound = document.getElementById(\"hoverSound\");\n    const yesSound = document.getElementById(\"yesSound\");\n\n    noBtn.addEventListener(\"mouseenter\", () => {\n      hoverSound.currentTime = 0;\n      hoverSound.play();\n\n      const cardRect = card.getBoundingClientRect();\n      const btnRect = noBtn.getBoundingClientRect();\n\n      const maxX = cardRect.width - btnRect.width - 10;\n      const maxY = cardRect.height - btnRect.height - 10;\n\n      noBtn.style.left = Math.random() * maxX + \"px\";\n      noBtn.style.top = Math.random() * maxY + \"px\";\n    });\n\n    yesBtn.addEventListener(\"click\", () => {\n      yesSound.play();\n\n      confetti({\n        particleCount: 260,\n        spread: 120,\n        origin: { y: 0.65 }\n      });\n\n      setTimeout(() => {\n        alert(\"YAY \ud83d\udc95 I can\u2019t wait for Valentine\u2019s Day with you!\");\n      }, 500);\n    });\n\n    function createHeart() {\n      const heart = document.createElement(\"div\");\n      heart.className = \"heart\";\n      heart.innerHTML = Math.random() > 0.5 ? \"\u2764\ufe0f\" : \"\ud83d\udc97\";\n      heart.style.left = Math.random() * 100 + \"vw\";\n      heart.style.fontSize = Math.random() * 22 + 14 + \"px\";\n      heart.style.animationDuration = Math.random() * 3 + 4 + \"s\";\n      heart.style.opacity = Math.random() * 0.5 + 0.4;\n\n      document.body.appendChild(heart);\n      setTimeout(() => heart.remove(), 8000);\n    }\n\n    setInterval(createHeart, 380);\n  &lt;\/script>\n\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p><strong>This is the code that decides the math for the Animations.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"776\" src=\"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-content\/uploads\/2026\/02\/Screenshot-1-1-1024x776.png\" alt=\"\" class=\"wp-image-123\" srcset=\"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-content\/uploads\/2026\/02\/Screenshot-1-1-1024x776.png 1024w, https:\/\/theroyalscode.com\/students\/l_rankins\/wp-content\/uploads\/2026\/02\/Screenshot-1-1-300x227.png 300w, https:\/\/theroyalscode.com\/students\/l_rankins\/wp-content\/uploads\/2026\/02\/Screenshot-1-1-768x582.png 768w, https:\/\/theroyalscode.com\/students\/l_rankins\/wp-content\/uploads\/2026\/02\/Screenshot-1-1.png 1203w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today I made a Valentines website thingy from a tutorial This is the main HTML starter code and font and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-118","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":4,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/118\/revisions"}],"predecessor-version":[{"id":124,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/posts\/118\/revisions\/124"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/media?parent=118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/categories?post=118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/l_rankins\/wp-json\/wp\/v2\/tags?post=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}