| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>Our Story</title>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1">
|
| <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
| <style>
|
| body, html {
|
| height: 100%;
|
| font-family: "Inconsolata", sans-serif;
|
| background-color: rgb(199, 185, 159);
|
| }
|
| .no-btn {
|
| position: absolute;
|
| transition: all 0.2s ease-in-out;
|
| }
|
|
|
| .bgimg {
|
| background-position: center;
|
| background-size: cover;
|
| background-image: url("main1.png");
|
| min-height: 100%;
|
| }
|
|
|
| @keyframes upDownShake {
|
| 0% { transform: translateY(0px); }
|
| 50% { transform: translateY(-30px); }
|
| 100% { transform: translateY(0px); }
|
| }
|
|
|
| .shake-animation {
|
| animation: upDownShake 0.2s infinite ease-in-out;
|
| }
|
|
|
| .envelope {
|
| transition: transform 1s ease-in-out;
|
| }
|
|
|
| .envelope.open {
|
| transform: rotateX(180deg);
|
| }
|
|
|
| .card {
|
| transition: transform 1s ease-in-out;
|
| }
|
|
|
| .card.slide-out {
|
| transform: translateY(-50px);
|
| }
|
|
|
| #message {
|
| opacity: 0;
|
| transition: opacity 1s ease-in;
|
| }
|
|
|
|
|
| .navbar {
|
| position: fixed;
|
| top: 0;
|
| width: 100%;
|
| display: flex;
|
| justify-content: space-evenly;
|
| background: black;
|
| padding: 10px 0;
|
| z-index: 1000;
|
| }
|
|
|
|
|
| .navbar a {
|
| color: white;
|
| text-decoration: none;
|
| padding: 10px 20px;
|
| font-size: 18px;
|
| }
|
|
|
| .navbar a:hover {
|
| background: #444;
|
| }
|
| .photobooth-btn {
|
| background: linear-gradient(135deg, #d06f85, #e3b63c);
|
| border: none;
|
| color: white;
|
| font-size: 18px;
|
| font-weight: bold;
|
| margin-top: 30px;
|
| padding: 12px 24px;
|
| border-radius: 50px;
|
| cursor: pointer;
|
| transition: 0.3s;
|
| box-shadow: 0px 0px 10px rgba(255, 75, 43, 0.6);
|
| text-transform: uppercase;
|
| letter-spacing: 1.5px;
|
| outline: none;
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .photobooth-btn::before {
|
| content: "";
|
| position: absolute;
|
| top: -100%;
|
| left: -100%;
|
| width: 300%;
|
| height: 300%;
|
| background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, transparent 40%);
|
| transition: 0.5s ease-out;
|
| }
|
|
|
| .photobooth-btn:hover::before {
|
| top: 0;
|
| left: 0;
|
| }
|
|
|
| .photobooth-btn:hover {
|
| box-shadow: 0px 0px 20px rgba(255, 75, 43, 0.9);
|
| transform: scale(1.05);
|
| }
|
|
|
|
|
| .photobooth-frame {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| background: white;
|
| padding: 15px;
|
| border-radius: 12px;
|
| box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
|
| width: fit-content;
|
| max-width: 100%;
|
| }
|
|
|
| .photo-slot {
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| margin-bottom: 10px;
|
| background: #f8f8f8;
|
| padding: 5px;
|
| border-radius: 8px;
|
| width: 250px;
|
| height: auto;
|
| }
|
|
|
| .photo-slot img {
|
| max-width: 100%;
|
| height: auto;
|
| object-fit: contain;
|
| border-radius: 5px;
|
| }
|
|
|
| .photobooth-container {
|
| text-align: center;
|
| padding: 20px;
|
| }
|
|
|
| .photobooth-preview {
|
| display: none;
|
| margin-top: 20px;
|
| background: black;
|
| padding: 10px;
|
| }
|
|
|
| .color-options button {
|
| width: 40px;
|
| height: 40px;
|
| border-radius: 50%;
|
| border: none;
|
| margin: 5px;
|
| cursor: pointer;
|
| transition: transform 0.2s;
|
| }
|
|
|
| .color-options button:hover {
|
| transform: scale(1.2);
|
| }
|
|
|
| .btn {
|
| margin: 10px;
|
| padding: 10px 15px;
|
| font-size: 16px;
|
| border: none;
|
| cursor: pointer;
|
| background: black;
|
| color: white;
|
| border-radius: 5px;
|
| transition: 0.3s;
|
| }
|
|
|
| .btn:hover {
|
| background: #444;
|
| }
|
|
|
| .envelope_container {
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| height: 100vh;
|
| }
|
|
|
|
|
|
|
|
|
| .valentines {
|
| position: relative;
|
| top:50px;
|
| cursor: pointer;
|
| animation: up 3s linear infinite;
|
| }
|
| .envelope {
|
| position: relative;
|
| width: 300px;
|
| height:200px;
|
| background-color: #f08080;
|
| }
|
|
|
| .envelope:before {
|
| background-color: #f08080;
|
| content:"";
|
| position: absolute;
|
| width: 212px;
|
| height: 212px;
|
| transform: rotate(45deg);
|
| top:-105px;
|
| left:44px;
|
| border-radius:30px 0 0 0;
|
| }
|
|
|
| .card {
|
| position: absolute;
|
| background-color: #eae2b7;
|
| width: 270px;
|
| height: 170px;
|
| top:5px;
|
| left:15px;
|
| box-shadow: -5px -5px 100px rgba(0,0,0,0.4);
|
| }
|
|
|
| .card:before {
|
| content:"";
|
| position: absolute;
|
| border:3px solid #003049;
|
| border-style: dotted;
|
| width: 240px;
|
| heighT: 140px;
|
| left:12px;
|
| top:12px;
|
| }
|
|
|
| .text {
|
| position: absolute;
|
| font-family: 'Brush Script MT', cursive;
|
| font-size: 28px;
|
| text-align: center;
|
| line-height:25px;
|
| top:19px;
|
| left:85px;
|
| color: #003049;
|
| }
|
|
|
| .heart {
|
| background-color: #d62828;
|
| display: inline-block;
|
| height: 30px;
|
| margin: 0 10px;
|
| position: relative;
|
| top: 110px;
|
| left:105px;
|
| transform: rotate(-45deg);
|
| width: 30px;
|
| }
|
|
|
| .heart:before,
|
| .heart:after {
|
| content: "";
|
| background-color: #d62828;
|
| border-radius: 50%;
|
| height: 30px;
|
| position: absolute;
|
| width: 30px;
|
| }
|
|
|
| .heart:before {
|
| top: -15px;
|
| left: 0;
|
| }
|
|
|
| .heart:after {
|
| left: 15px;
|
| top: 0;
|
| }
|
| .front {
|
| position: absolute;
|
| border-right: 180px solid #f4978e;
|
| border-top: 95px solid transparent;
|
| border-bottom: 100px solid transparent;
|
| left:120px;
|
| top:5px;
|
| width:0;
|
| height:0;
|
| z-index:10;
|
| }
|
|
|
| .front:before {
|
| position: absolute;
|
| content:"";
|
| border-left: 300px solid #f8ad9d;
|
| border-top: 195px solid transparent;
|
| left:-120px;
|
| top:-95px;
|
| width:0;
|
| height:0;
|
| }
|
| .shadow {
|
| position: absolute;
|
| width: 330px;
|
| height: 25px;
|
| border-radius:50%;
|
| background-color: rgba(0,0,0,0.3);
|
| top:265px;
|
| left:-15px;
|
| animation: scale 3s linear infinite;
|
| z-index:-1;
|
| }
|
| @keyframes up {
|
| 0%, 100% {
|
| transform: translateY(0);
|
| }
|
| 50% {
|
| transform: translateY(-30px);
|
| }
|
| }
|
| @keyframes scale {
|
| 0%, 100% {
|
| transform: scaleX(1);
|
| }
|
| 50% {
|
| transform: scaleX(0.85);
|
| }
|
| }
|
| .hearts {
|
| position: absolute
|
| }
|
|
|
| .one, .two, .three, .four, .five {
|
| background-color: red;
|
| display: inline-block;
|
| height: 10px;
|
| margin: 0 10px;
|
| position: relative;
|
| transform: rotate(-45deg);
|
| width: 10px;
|
| top:50px;
|
| }
|
|
|
| .one:before,
|
| .one:after, .two:before, .two:after, .three:before, .three:after, .four:before, .four:after, .five:before, .five:after {
|
| content: "";
|
| background-color: red;
|
| border-radius: 50%;
|
| height: 10px;
|
| position: absolute;
|
| width: 10px;
|
| }
|
|
|
| .one:before, .two:before, .three:before, .four:before, .five:before {
|
| top: -5px;
|
| left: 0;
|
| }
|
|
|
| .one:after, .two:after, .three:after, .four:after, .five:after {
|
| left: 5px;
|
| top: 0;
|
| }
|
|
|
| .one {
|
| left:10px;
|
| animation: heart 1s ease-out infinite;
|
| }
|
|
|
| .two {
|
| left:30px;
|
| animation: heart 2s ease-out infinite;
|
| }
|
|
|
| .three {
|
| left:50px;
|
| animation: heart 1.5s ease-out infinite;
|
| }
|
|
|
| .four {
|
| left:70px;
|
| animation: heart 2.3s ease-out infinite;
|
| }
|
|
|
| .five {
|
| left:90px;
|
| animation: heart 1.7s ease-out infinite;
|
| }
|
|
|
| @keyframes heart {
|
| 0%{
|
| transform: translateY(0) rotate(-45deg) scale(0.3);
|
| opacity: 1;
|
| }
|
| 100%{
|
| transform: translateY(-150px) rotate(-45deg) scale(1.3);
|
| opacity: 0.5;
|
| }
|
| }
|
|
|
|
|
|
|
| .xyz {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: flex-start;
|
| height: auto;
|
|
|
| margin: 0;
|
| min-height: 100vh;
|
| overflow: hidden;
|
| padding: 40px 20px;
|
| }
|
|
|
| .w3-container {
|
| text-align: center;
|
| max-width: 700px;
|
| }
|
|
|
|
|
| .xyz p {
|
| font-size: 18px;
|
| color: #333;
|
| line-height: 1.6;
|
| margin-bottom: 20px;
|
| }
|
| #hedlinecontainer {
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| margin-top: 20px;
|
| margin-bottom: 60px;
|
| }
|
|
|
| #shine {
|
| font-size: 60px;
|
| font-weight: bold;
|
| color: rgba(255, 0, 102, 0.3);
|
| z-index: 10;
|
| background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
|
| -webkit-background-size: 150px;
|
| -webkit-background-clip: text;
|
| -webkit-animation-name: shine;
|
| -webkit-animation-duration: 3s;
|
| -webkit-animation-iteration-count: infinite;
|
| text-shadow: 0 0px 0px rgba(233, 85, 189, 0.419);
|
| }
|
|
|
| @-webkit-keyframes shine {
|
| 0%, 10% { background-position: -1000px; }
|
| 20% { background-position: top left; }
|
| 90% { background-position: top right; }
|
| 100% { background-position: 1000px; }
|
| }
|
|
|
|
|
| .gallery {
|
| --d: 10s;
|
| display: grid;
|
| place-items: center;
|
| width: 220px;
|
| margin: auto;
|
| }
|
|
|
| .gallery > img {
|
| grid-area: 1/1;
|
| width: 100%;
|
| aspect-ratio: 1;
|
| object-fit: cover;
|
| border: 10px solid #f2f2f2;
|
| box-shadow: 0 0 4px #0007;
|
| z-index: 2;
|
| animation: slide var(--d) infinite, z-order var(--d) infinite steps(1);
|
| }
|
|
|
| .gallery img:last-child {
|
| animation-name: slide, z-order-last;
|
| }
|
|
|
| .gallery > img:nth-child(1) { animation-delay: calc(0*var(--d)); --r: 16deg; }
|
| .gallery > img:nth-child(2) { animation-delay: calc(-0.2*var(--d)); --r: -1deg; }
|
| .gallery > img:nth-child(3) { animation-delay: calc(-0.4*var(--d)); --r: -19deg; }
|
| .gallery > img:nth-child(4) { animation-delay: calc(-0.6*var(--d)); --r: 6deg; }
|
| .gallery > img:nth-child(5) { animation-delay: calc(-0.8*var(--d)); --r: -8deg; }
|
|
|
| @keyframes slide {
|
| 10% { transform: translateX(120%) rotate(var(--r)); }
|
| 0%, 100%, 20% { transform: translateX(0%) rotate(var(--r)); }
|
| }
|
|
|
| @keyframes z-order {
|
| 10%, 20% { z-index: 1; }
|
| 80% { z-index: 2; }
|
| }
|
|
|
| @keyframes z-order-last {
|
| 10%, 20% { z-index: 1; }
|
| 90% { z-index: 2; }
|
| }
|
|
|
|
|
| @media only screen and (max-width: 600px) {
|
| #shine { font-size: 22px; }
|
|
|
| .gallery {
|
| width: 150px;
|
| margin-left: auto;
|
| margin-right: auto;
|
| }
|
| }
|
| #photobooth h5 {
|
| font-size: 26px;
|
| margin-bottom: 30px;
|
| }
|
|
|
| .photobooth-container {
|
| text-align: center;
|
| padding: 20px;
|
| }
|
|
|
|
|
| .file-upload {
|
| font-size: 18px;
|
| margin-bottom: 20px;
|
| }
|
|
|
| h4 {
|
| font-size: 22px;
|
| margin-top: 20px;
|
| margin-bottom: 15px;
|
| }
|
|
|
|
|
| .color-options {
|
| display: flex;
|
| justify-content: center;
|
| gap: 15px;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .color-options button {
|
| width: 40px;
|
| height: 40px;
|
| border: none;
|
| cursor: pointer;
|
| border-radius: 50%;
|
| transition: transform 0.3s ease-in-out;
|
| }
|
|
|
| .color-options button:hover {
|
| transform: scale(1.1);
|
| }
|
|
|
|
|
| .btn {
|
| font-size: 20px;
|
| padding: 12px 24px;
|
| margin-top: 15px;
|
| margin-bottom: 20px;
|
| cursor: pointer;
|
| }
|
|
|
|
|
| .photobooth-preview {
|
| margin-top: 30px;
|
| }
|
|
|
|
|
| #downloadBtn {
|
| font-size: 18px;
|
| padding: 10px 20px;
|
| margin-top: 20px;
|
| }
|
|
|
| .center-content {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| text-align: center;
|
| width: 100%;
|
| }
|
|
|
|
|
| #photobooth {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| text-align: center;
|
| margin: auto;
|
| width: 100%;
|
| max-width: 600px;
|
| }
|
|
|
|
|
| #question-section {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| text-align: center;
|
| margin: auto;
|
| width: 100%;
|
| max-width: 600px;
|
| }
|
|
|
|
|
| </style>
|
| </head>
|
| <body>
|
|
|
|
|
| <div class="navbar">
|
| <a href="#home">Home</a>
|
| <a href="#about">About</a>
|
| <a href="#photobooth">Photobooth</a>
|
| <a href="#thequestion">THE QUESTION</a>
|
| </div>
|
|
|
|
|
| <header class="bgimg w3-display-container w3-grayscale-min" id="home">
|
| <div class="w3-display-middle w3-center">
|
| <span class="w3-text-white" style="font-size:70px; background: rgba(0, 0, 0, 0.5); padding: 10px;">
|
| Our Story
|
| </span>
|
| </div>
|
| </header>
|
|
|
|
|
| <div class="xyz">
|
| <div class="w3-container" id="about">
|
| <div class="w3-content" >
|
| <h5 class="w3-center w3-padding-64">
|
| <span class="w3-text-white" style="font-size:70px; background: rgba(0, 0, 0, 0.5); padding: 10px;">
|
| About
|
| </span>
|
| <h2>US</h2>
|
| </h5>
|
| <p>
|
| Some love stories are written in the stars, but ours was crafted in the little moments—the laughter,
|
| the inside jokes, the late-night conversations, and the quiet understanding in each other's eyes.
|
| This space is a celebration of those moments, a digital time capsule of our journey together. ❤️
|
| </p>
|
|
|
| <section id="about-us"></section>
|
| <h2>Our Story: A Timeless Symphony</h2>
|
|
|
| <p><strong>Ananya Dhiman</strong>—a name as graceful as the rhythm of our journey.</p>
|
| <p class="quote">Some people love with soft words and quiet gestures.<br>
|
| She loves like a storm—loud, relentless, impossible to ignore.</p>
|
|
|
| <p class="description">
|
| She fights with me over everything—big things, small things, things that don’t even matter.
|
| But beneath all the stubbornness, I see it… the way she chooses me, over and over again.
|
| Even when I make it difficult. Even when I don't deserve it.
|
| </p>
|
|
|
| <p class="description">
|
| Loving me isn’t easy, I know that. Yet, somehow, she does it anyway—with fierce arguments,
|
| with late-night apologies, with the kind of patience only she can have for me.
|
| </p>
|
|
|
| <p class="ending">
|
| She is the hurricane and the safe place all at once. And maybe that’s the most beautiful kind of love there is.
|
| </p>
|
|
|
| <p><strong>April 11</strong></p>
|
|
|
| <li>✨ First glance at <strong>12:30 PM</strong>, a quiet spark.</li>
|
| <li>✨ First ‘yes’ at <strong>4:40 PM</strong>, a promise whispered between us.</li>
|
| <li>✨ First kiss at <strong>5:15 PM</strong>, where words became unnecessary.</li>
|
|
|
|
|
| <p><strong>April 25</strong></p>
|
|
|
| <li>🖤 First hickey at <strong>5:25 PM</strong>, a stolen moment that lingered.</li>
|
|
|
|
|
| <p><strong>April 28</strong></p>
|
|
|
| <li>💌 Officially together. ACTUALLY, It is 11th !!!!!!!!!!!</li>
|
|
|
|
|
| <p><strong>May 7</strong></p>
|
|
|
| <li>💞 Completely in my arms.</li>
|
|
|
|
|
|
|
|
|
|
|
| <p><strong>May 20</strong></p>
|
|
|
| <li>💫 Hehe.</li>
|
|
|
|
|
| <p><strong>June 26</strong></p>
|
|
|
| <li>🌧️ A day where time stood still.</li>
|
|
|
|
|
| <p><strong>July 14</strong></p>
|
|
|
| <li>💧 Saw her cry for the first time, a moment that made me want to shield her forever.</li>
|
|
|
|
|
| <h3>What She Loves</h3>
|
|
|
| <li>☕ Cold coffee</li>
|
| <li>🥝 Kiwi</li>
|
| <li>🥭 Mango</li>
|
| <li>🍜 Maggi</li>
|
|
|
|
|
| <h3>Her Favorite Moments</h3>
|
|
|
| <li>🌅 Watching the sunrise while enjoying <strong>Yeh Jawaani Hai Deewani</strong>, where love felt infinite.</li>
|
|
|
| </section>
|
|
|
|
|
|
|
| <div id="hedlinecontainer">
|
| <div id="shine">The Day We Celebrate US! 💞</div>
|
| </div>
|
|
|
|
|
| <div class="gallery">
|
| <img src="p.jpg" alt="a girl">
|
| <img src="p1.jpg" alt="a girl">
|
| <img src="p2.jpg" alt="a girl">
|
| <img src="p3.jpg" alt="a girl">
|
| <img src="p4.jpg" alt="a girl">
|
| <img src="p5.jpg" alt="a girl">
|
| <img src="p6.jpg" alt="a girl">
|
| <img src="p7.jpg" alt="a girl">
|
| </div>
|
| <p>
|
| I still remember that night like it was yesterday. The soft hum of the engine had faded, leaving just the quiet rustle of the trees and the warmth between us. This wasn’t just any place—it became our place. The spot where nervous glances turned into steady gazes, where unspoken words found their meaning, and where, in the stillness of the moment, we shared our first kiss.
|
|
|
| It was gentle, electric, perfect. The kind of kiss that lingers, not just on lips but in memory—forever tied to this place, this feeling, us. Now, every time I see this photo, my heart rewinds to that night, to you, to us. And I smile, knowing that was just the beginning.
|
| </p>
|
|
|
| <img src="place1.jpg" style="width:100%;max-width:1000px" class="w3-margin-top">
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
|
|
|
|
| <div class="w3-container" id="photobooth" class="center-content">
|
| <div class="w3-content" style="max-width:700px">
|
| <h5 class="w3-center w3-padding-64">
|
| <span class="w3-text-white" style="font-size:70px; background: rgba(0, 0, 0, 0.5); padding: 10px;">
|
| Photobooth
|
| </span>
|
| <button class="photobooth-btn" onclick="window.location.href='https://retroflash.netlify.app/';">
|
| 📸 Open Photobooth
|
| </button>
|
|
|
|
|
|
|
|
|
| <script>
|
| function openPhotobooth() {
|
| window.open("photobooth\index.html", "_self");
|
| }
|
|
|
| function moveNoButton() {
|
| let noBtn = document.getElementById("no-btn");
|
|
|
|
|
| noBtn.style.position = "relative";
|
| noBtn.classList.add("shake-animation");
|
| }
|
|
|
|
|
| function stopShaking() {
|
| let noBtn = document.getElementById("no-btn");
|
| noBtn.classList.remove("shake-animation");
|
| }
|
|
|
| </script>
|
|
|
| <div class="w3-container w3-center w3-padding-64" style="background: radial-gradient(circle, rgb(199, 185, 159), rgb(199, 185, 159)); border-radius: 10px; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.1);">
|
|
|
| <h5 class="w3-padding-64">
|
| <span style="font-size: 70px; color: white; background: rgba(252, 217, 89, 0.5); padding: 15px; border-radius: 10px; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;">
|
| The Question
|
| </span>
|
| </h5>
|
|
|
| <h6 class="w3-padding-48">
|
| <span style="font-size: 24px; color: #fff; background: #ff007f; padding: 10px 20px; border-radius: 5px; display: inline-block; text-shadow: 0 0 10px white;">
|
| Do you wish to continue, kind women?
|
| </span>
|
| </h6>
|
|
|
| <div style="margin-top: 40px; position: relative;">
|
|
|
| <button id="yes-btn" onclick="goToNextPage()"
|
| style="font-size: 24px; padding: 15px 30px; margin: 20px; border: none; border-radius: 10px; font-weight: bold; cursor: pointer; background: #bac873; color: black; box-shadow: 0 0 10px #abc5a7, 0 0 20px #a4ac77; transition: all 0.3s ease;">
|
| yea, I guess 🥱
|
| </button>
|
|
|
| <button id="no-btn" onmouseover="moveNoButton()"
|
| style="font-size: 24px; padding: 15px 30px; margin: 20px; border: none; border-radius: 10px; font-weight: bold; cursor: pointer; background: #c48995; color: white; box-shadow: 0 0 10px #bc6f7e, 0 0 20px #db7a8e; transition: all 0.3s ease; position: relative;">
|
| NO!!!! EWWWW WTF 🤮
|
| </button>
|
|
|
| </div>
|
| </div>
|
| <script>
|
|
|
|
|
|
|
| function goToNextPage() {
|
| document.body.innerHTML = `
|
| <div class="w3-container w3-center w3-padding-64">
|
| <div class="envelope_container" onclick="openEnvelope()">
|
| <div class="valentines">
|
| <div class="envelope"></div>
|
| <div class="front"></div>
|
| <div class="card">
|
| <div class="text" id="message">HEHEH Good!<br> lubu forever! 💖</div>
|
| <div class="heart"></div>
|
|
|
| </div>
|
| </div>
|
| </div>
|
| <h6 class="w3-padding-48">
|
| <span style="font-size: 24px; color: #fff; background: rgb(199, 185, 159); padding: 10px 20px; border-radius: 5px; display: inline-block; text-shadow: 0 0 10px white;">
|
| Well, i guess thats it. Its not much but its honest work. Please like, share and subscribe LOLLLLLL!!!! Whenever in doubt, or during fights, open this website and know that I always love you and I ain't going anywhere.
|
| </span>
|
| </h6>
|
| </div>
|
| `;
|
| }
|
|
|
| function openEnvelope() {
|
| let envelope = document.querySelector(".envelope");
|
| let card = document.querySelector(".card");
|
| let message = document.getElementById("message");
|
|
|
| // Add opening animation
|
| envelope.classList.add("open");
|
| card.classList.add("slide-out");
|
|
|
| // Reveal message after delay
|
| setTimeout(() => {
|
| message.style.opacity = "1";
|
| }, 1000);
|
| }
|
|
|
|
|
| </script>
|
| </script>
|
|
|
|
|
| <audio id="bg-music" autoplay loop>
|
| <source src="musik.mp3" type="audio/mp3">
|
| Your browser does not support the audio element.
|
| </audio>
|
|
|
|
|
| </body>
|
| </html>
|
|
|
