├── README.md
├── cause.css
├── cause.html
├── cause.js
├── d1.jpg
├── d2.jpg
├── d3.jpg
├── d4.jpg
├── gif1.gif
├── gif2.gif
├── index.html
├── last.html
├── script.js
└── style.css


/README.md:
--------------------------------------------------------------------------------
1 | # BestFriend_
2 | You can download.. modify and Grow it
3 | 


--------------------------------------------------------------------------------
/cause.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Comic+Neue:wght@700&family=Quicksand:wght@500&display=swap');
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     cursor: none;
  8 | }
  9 | 
 10 | body {
 11 |     min-height: 100vh;
 12 |     background: linear-gradient(-45deg, #ffe6e6, #e6e6ff, #ffebf5);
 13 |     background-size: 400% 400%;
 14 |     animation: gradientBG 15s ease infinite;
 15 |     font-family: 'Quicksand', sans-serif;
 16 |     overflow-x: hidden;
 17 |     padding: 2rem;
 18 | }
 19 | 
 20 | .custom-cursor {
 21 |     width: 30px;
 22 |     height: 30px;
 23 |     position: fixed;
 24 |     pointer-events: none;
 25 |     z-index: 9999;
 26 |     mix-blend-mode: difference;
 27 |     transition: transform 0.1s;
 28 | }
 29 | 
 30 | .custom-cursor svg {
 31 |     width: 100%;
 32 |     height: 100%;
 33 |     filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.5));
 34 | }
 35 | 
 36 | .container {
 37 |     max-width: 1200px;
 38 |     margin: 0 auto;
 39 |     text-align: center;
 40 |     position: relative;
 41 |     z-index: 1;
 42 | }
 43 | 
 44 | h1 {
 45 |     font-family: 'Bubblegum Sans', cursive;
 46 |     font-size: 3rem;
 47 |     color: #ff69b4;
 48 |     text-shadow: 2px 2px 4px rgba(255, 105, 180, 0.3);
 49 |     margin-bottom: 2rem;
 50 |     animation: bounce 1s ease infinite;
 51 | }
 52 | 
 53 | .reason-card {
 54 |     background: rgba(255, 255, 255, 0.9);
 55 |     border-radius: 20px;
 56 |     padding: 2rem;
 57 |     margin: 1.5rem;
 58 |     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 59 |     transition: transform 0.3s, box-shadow 0.3s;
 60 |     cursor: pointer;
 61 |     position: relative;
 62 |     overflow: hidden;
 63 | }
 64 | 
 65 | .reason-card:hover {
 66 |     transform: translateY(-5px);
 67 |     box-shadow: 0 8px 25px rgba(255, 105, 180, 0.2);
 68 | }
 69 | 
 70 | .reason-text {
 71 |     font-size: 1.2rem;
 72 |     margin-bottom: 1rem;
 73 |     position: relative;
 74 |     z-index: 2;
 75 | }
 76 | 
 77 | .gif-overlay {
 78 |     position: absolute;
 79 |     top: 0;
 80 |     left: 0;
 81 |     width: 100%;
 82 |     height: 100%;
 83 |     background: rgba(255, 255, 255, 0.95);
 84 |     display: flex;
 85 |     align-items: center;
 86 |     justify-content: center;
 87 |     opacity: 0;
 88 |     transition: opacity 0.3s;
 89 |     z-index: 1;
 90 | }
 91 | 
 92 | .reason-card:hover .gif-overlay {
 93 |     opacity: 1;
 94 | }
 95 | 
 96 | .shuffle-button {
 97 |     background: linear-gradient(45deg, #ff69b4, #ff99cc);
 98 |     border: none;
 99 |     border-radius: 50px;
100 |     padding: 1rem 2rem;
101 |     font-size: 1.2rem;
102 |     color: white;
103 |     margin: 2rem 0;
104 |     cursor: pointer;
105 |     transition: transform 0.3s;
106 |     font-family: 'Comic Neue', cursive;
107 |     box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);
108 | }
109 | 
110 | .shuffle-button:hover {
111 |     transform: scale(1.1);
112 | }
113 | 
114 | .floating {
115 |     position: fixed;
116 |     pointer-events: none;
117 |     animation: float 3s ease-in-out infinite;
118 | }
119 | 
120 | .ending-section {
121 |     margin-top: 4rem;
122 |     padding: 2rem;
123 |     text-align: center;
124 | }
125 | 
126 | .ending-text {
127 |     font-family: 'Bubblegum Sans', cursive;
128 |     font-size: 2rem;
129 |     color: #ff69b4;
130 |     margin-bottom: 2rem;
131 |     opacity: 0;
132 |     transform: translateY(20px);
133 | }
134 | 
135 | .teddy-hug {
136 |     width: 200px;
137 |     margin: 0 auto;
138 |     transform: scale(0);
139 | }
140 | 
141 | @keyframes gradientBG {
142 |     0% { background-position: 0% 50%; }
143 |     50% { background-position: 100% 50%; }
144 |     100% { background-position: 0% 50%; }
145 | }
146 | 
147 | @keyframes float {
148 |     0%, 100% { transform: translateY(0); }
149 |     50% { transform: translateY(-20px); }
150 | }
151 | 
152 | @keyframes bounce {
153 |     0%, 100% { transform: translateY(0); }
154 |     50% { transform: translateY(-10px); }
155 | }
156 | 
157 | @media (max-width: 768px) {
158 |     h1 { font-size: 2rem; }
159 |     .reason-card { margin: 1rem; }
160 |     .reason-text { font-size: 1rem; }
161 | }
162 | .shuffle-button {
163 |     background: linear-gradient(45deg, #ff69b4, #ff99cc);
164 |     border: none;
165 |     border-radius: 50px;
166 |     padding: 1rem 2rem;
167 |     font-size: 1.2rem;
168 |     color: white;
169 |     margin: 2rem 0;
170 |     cursor: pointer;
171 |     transition: all 0.3s;
172 |     font-family: 'Comic Neue', cursive;
173 |     box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);
174 | }
175 | 
176 | .shuffle-button.story-mode {
177 |     background: linear-gradient(45deg, #9b6dff, #ff6dc7);
178 |     transform: scale(1.1);
179 | }
180 | 
181 | .shuffle-button:hover {
182 |     transform: scale(1.1);
183 | }
184 | 
185 | .shuffle-button.story-mode:hover {
186 |     transform: scale(1.2);
187 | }
188 | 
189 | .reason-counter {
190 |     font-size: 0.9rem;
191 |     color: #ff69b4;
192 |     margin-top: 1rem;
193 |     opacity: 0.7;
194 | }


--------------------------------------------------------------------------------
/cause.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Why You're My Best Friend! 💖</title>
 7 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
 8 |     <link rel="stylesheet" href="./cause.css">
 9 |     <style>
10 |        
11 |     </style>
12 | </head>
13 | <body>
14 |     <div class="custom-cursor">
15 |         <svg viewBox="0 0 24 24">
16 |             <path fill="#ff69b4" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
17 |         </svg>
18 |     </div>
19 | 
20 |     <div class="container">
21 |         <h1>Why You're My Best Friend! 💖</h1>
22 |         
23 |         <div id="reasons-container"></div>
24 |         
25 |         <button class="shuffle-button">Tell Me Another Reason 💕</button>
26 |         <div class="reason-counter"></div>
27 | 
28 |         <div class="ending-section">
29 |             <div class="teddy-hug">
30 |                 <img src="./d1.jpg" alt="Teddy Hug">
31 |             </div>
32 |             <div class="ending-text">You're the BESTEST Best Friend EVER! 💖</div>
33 |         </div>
34 |     </div>
35 | 
36 |     <script src="cause.js">
37 |        
38 |     </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/cause.js:
--------------------------------------------------------------------------------
  1 |  // Reasons database
  2 |  const reasons = [
  3 |     { 
  4 |         text: "You always know how to make me laugh, even on my worst days! 😊", 
  5 |         emoji: "🌟",
  6 |         gif: "gif1.gif"
  7 |     },
  8 |     { 
  9 |         text: "jo plan hua tha , In bengali ota dee 🙈💗 ", 
 10 |         emoji: "😆",
 11 |         gif: "gif2.gif"
 12 |     },
 13 |     { 
 14 |         text: "Kitnii Chillati hy mere upar isliyee, hehehe 💕", 
 15 |         emoji: "👂",
 16 |         gif: "gif1.gif"
 17 |     },
 18 |     { 
 19 |         text: "Our inside jokes are literally the best thing ever~", 
 20 |         emoji: "🚀",
 21 |         gif: "gif2.gif"
 22 |     }
 23 | ];
 24 | 
 25 | // State management
 26 | let currentReasonIndex = 0;
 27 | const reasonsContainer = document.getElementById('reasons-container');
 28 | const shuffleButton = document.querySelector('.shuffle-button');
 29 | const reasonCounter = document.querySelector('.reason-counter');
 30 | let isTransitioning = false;
 31 | 
 32 | // Create reason card with gif
 33 | function createReasonCard(reason) {
 34 |     const card = document.createElement('div');
 35 |     card.className = 'reason-card';
 36 |     
 37 |     const text = document.createElement('div');
 38 |     text.className = 'reason-text';
 39 |     text.innerHTML = `${reason.emoji} ${reason.text}`;
 40 |     
 41 |     const gifOverlay = document.createElement('div');
 42 |     gifOverlay.className = 'gif-overlay';
 43 |     gifOverlay.innerHTML = `<img src="${reason.gif}" alt="Friendship Memory">`;
 44 |     
 45 |     card.appendChild(text);
 46 |     card.appendChild(gifOverlay);
 47 |     
 48 |     gsap.from(card, {
 49 |         opacity: 0,
 50 |         y: 50,
 51 |         duration: 0.5,
 52 |         ease: "back.out"
 53 |     });
 54 | 
 55 |     return card;
 56 | }
 57 | 
 58 | // Display new reason
 59 | function displayNewReason() {
 60 |     if (isTransitioning) return;
 61 |     isTransitioning = true;
 62 | 
 63 |     if (currentReasonIndex < reasons.length) {
 64 |         const card = createReasonCard(reasons[currentReasonIndex]);
 65 |         reasonsContainer.appendChild(card);
 66 |         
 67 |         // Update counter
 68 |         reasonCounter.textContent = `Reason ${currentReasonIndex + 1} of ${reasons.length}`;
 69 |         
 70 |         currentReasonIndex++;
 71 | 
 72 |         // Check if we should transform the button
 73 |         if (currentReasonIndex === reasons.length) {
 74 |             gsap.to(shuffleButton, {
 75 |                 scale: 1.1,
 76 |                 duration: 0.5,
 77 |                 ease: "elastic.out",
 78 |                 onComplete: () => {
 79 |                     shuffleButton.textContent = "Enter Our Storylane 💫";
 80 |                     shuffleButton.classList.add('story-mode');
 81 |                     shuffleButton.addEventListener('click', () => {
 82 |                         gsap.to('body', {
 83 |                             opacity: 0,
 84 |                             duration: 1,
 85 |                             onComplete: () => {
 86 |                                 window.location.href = 'last.html'; // Replace with the actual URL of the next page
 87 |                             }
 88 |                         });
 89 |                     });
 90 |                 }
 91 |             });
 92 |         }
 93 | 
 94 |         // Create floating elements
 95 |         createFloatingElement();
 96 |         
 97 |         setTimeout(() => {
 98 |             isTransitioning = false;
 99 |         }, 500);
100 |     } else {
101 |         // Handle navigation to new page or section
102 |         window.location.href = "#storylane";
103 |         // Or trigger your next page functionality
104 |     }
105 | }
106 | 
107 | // Initialize button click
108 | shuffleButton.addEventListener('click', () => {
109 |     gsap.to(shuffleButton, {
110 |         scale: 0.9,
111 |         duration: 0.1,
112 |         yoyo: true,
113 |         repeat: 1
114 |     });
115 |     displayNewReason();
116 | });
117 | 
118 | // Floating elements function (same as before)
119 | function createFloatingElement() {
120 |     const elements = ['🌸', '✨', '💖', '🦋', '⭐'];
121 |     const element = document.createElement('div');
122 |     element.className = 'floating';
123 |     element.textContent = elements[Math.floor(Math.random() * elements.length)];
124 |     element.style.left = Math.random() * window.innerWidth + 'px';
125 |     element.style.top = Math.random() * window.innerHeight + 'px';
126 |     element.style.fontSize = (Math.random() * 20 + 10) + 'px';
127 |     document.body.appendChild(element);
128 | 
129 |     gsap.to(element, {
130 |         y: -500,
131 |         duration: Math.random() * 10 + 10,
132 |         opacity: 0,
133 |         onComplete: () => element.remove()
134 |     });
135 | }
136 | 
137 | // Custom cursor (same as before)
138 | const cursor = document.querySelector('.custom-cursor');
139 | document.addEventListener('mousemove', (e) => {
140 |     gsap.to(cursor, {
141 |         x: e.clientX - 15,
142 |         y: e.clientY - 15,
143 |         duration: 0.2
144 |     });
145 | });
146 | 
147 | // Create initial floating elements
148 | setInterval(createFloatingElement, 2000);


--------------------------------------------------------------------------------
/d1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shubhajiit/BestFriend_/5bb50dd0033eb941de3bdef7bdc04ad878930293/d1.jpg


--------------------------------------------------------------------------------
/d2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shubhajiit/BestFriend_/5bb50dd0033eb941de3bdef7bdc04ad878930293/d2.jpg


--------------------------------------------------------------------------------
/d3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shubhajiit/BestFriend_/5bb50dd0033eb941de3bdef7bdc04ad878930293/d3.jpg


--------------------------------------------------------------------------------
/d4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shubhajiit/BestFriend_/5bb50dd0033eb941de3bdef7bdc04ad878930293/d4.jpg


--------------------------------------------------------------------------------
/gif1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shubhajiit/BestFriend_/5bb50dd0033eb941de3bdef7bdc04ad878930293/gif1.gif


--------------------------------------------------------------------------------
/gif2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shubhajiit/BestFriend_/5bb50dd0033eb941de3bdef7bdc04ad878930293/gif2.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>The Cutest Best Friend</title>
 7 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     
10 | </head>
11 | <body>
12 |     <div class="cursor"></div>
13 |     <div class="container">
14 |         <h1>The Cutest Best Friend..🤭💗</h1>
15 |         <div class="greeting"></div>
16 |         <button class="cta-button">Click to Enter Our World 💕</button>
17 |     </div>
18 | 
19 |     <script src="script.js">
20 |         
21 |     </script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/last.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Our Beautiful Memories ✨</title>
  7 |     <style>
  8 |         @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Quicksand:wght@300;400;500;600&display=swap');
  9 | 
 10 |         * {
 11 |             margin: 0;
 12 |             padding: 0;
 13 |             box-sizing: border-box;
 14 |         }
 15 | 
 16 |         body {
 17 |             min-height: 100vh;
 18 |             background: linear-gradient(
 19 |                 135deg, 
 20 |                 #ffd1dc 0%,
 21 |                 #e6e6fa 25%,
 22 |                 #ffefd5 50%,
 23 |                 #e6e6fa 75%,
 24 |                 #ffd1dc 100%
 25 |             );
 26 |             background-size: 400% 400%;
 27 |             animation: gradientFlow 15s ease infinite;
 28 |             font-family: 'Quicksand', sans-serif;
 29 |             overflow-x: hidden;
 30 |             color: #4a4a4a;
 31 |         }
 32 | 
 33 |         @keyframes gradientFlow {
 34 |             0% { background-position: 0% 50%; }
 35 |             50% { background-position: 100% 50%; }
 36 |             100% { background-position: 0% 50%; }
 37 |         }
 38 | 
 39 |         /* Enhanced Sparkle Effect */
 40 |         .magic-sparkles {
 41 |             position: fixed;
 42 |             top: 0;
 43 |             left: 0;
 44 |             width: 100%;
 45 |             height: 100%;
 46 |             pointer-events: none;
 47 |             z-index: 1;
 48 |         }
 49 | 
 50 |         .sparkle {
 51 |             position: absolute;
 52 |             width: 6px;
 53 |             height: 6px;
 54 |             border-radius: 50%;
 55 |             background-color: white;
 56 |             animation: twinkle var(--duration, 4s) ease-in-out infinite;
 57 |             opacity: 0;
 58 |         }
 59 | 
 60 |         @keyframes twinkle {
 61 |             0%, 100% { opacity: 0; transform: scale(0.5); }
 62 |             50% { opacity: 0.8; transform: scale(1); }
 63 |         }
 64 | 
 65 |         /* Generate 50 sparkles with different positions and animations */
 66 |         .magic-sparkles::before,
 67 |         .magic-sparkles::after {
 68 |             content: '';
 69 |             position: absolute;
 70 |             width: 100%;
 71 |             height: 100%;
 72 |             background-image: radial-gradient(circle, white 1px, transparent 1px);
 73 |             background-size: 50px 50px;
 74 |             animation: sparkleLayer 8s linear infinite;
 75 |             opacity: 0.5;
 76 |         }
 77 | 
 78 |         .magic-sparkles::after {
 79 |             animation-delay: -4s;
 80 |             transform: rotate(45deg);
 81 |         }
 82 | 
 83 |         @keyframes sparkleLayer {
 84 |             0% { transform: translateY(0); }
 85 |             100% { transform: translateY(-50px); }
 86 |         }
 87 | 
 88 |         /* Floating Hearts */
 89 |         .floating-hearts {
 90 |             position: fixed;
 91 |             width: 100%;
 92 |             height: 100%;
 93 |             pointer-events: none;
 94 |             z-index: 2;
 95 |         }
 96 | 
 97 |         .heart {
 98 |             position: absolute;
 99 |             font-size: 1.5rem;
100 |             color: rgba(255, 105, 180, 0.6);
101 |             animation: floatHeart var(--float-duration, 6s) ease-in-out infinite;
102 |             animation-delay: var(--delay, 0s);
103 |         }
104 | 
105 |         @keyframes floatHeart {
106 |             0% { transform: translate(0, 100vh) rotate(0deg); }
107 |             100% { transform: translate(var(--translate-x, 0), -100vh) rotate(360deg); }
108 |         }
109 | 
110 |         /* Welcome Section */
111 |         .welcome {
112 |             text-align: center;
113 |             padding: 4rem 2rem;
114 |             position: relative;
115 |             z-index: 3;
116 |         }
117 | 
118 |         .welcome h1 {
119 |             font-family: 'Dancing Script', cursive;
120 |             font-size: 4rem;
121 |             color: #ff69b4;
122 |             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
123 |             animation: fadeInScale 2s ease;
124 |         }
125 | 
126 |         .welcome p {
127 |             font-size: 1.2rem;
128 |             max-width: 600px;
129 |             margin: 1.5rem auto;
130 |             line-height: 1.6;
131 |             animation: fadeIn 2s ease 0.5s both;
132 |         }
133 | 
134 |         /* Enhanced Memory Cards */
135 |         .memory-container {
136 |             max-width: 1200px;
137 |             margin: 0 auto;
138 |             padding: 2rem;
139 |             display: grid;
140 |             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
141 |             gap: 2rem;
142 |             z-index: 3;
143 |             position: relative;
144 |         }
145 | 
146 |         .memory-card {
147 |             background: rgba(255, 255, 255, 0.9);
148 |             border-radius: 20px;
149 |             padding: 1.5rem;
150 |             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
151 |             transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
152 |             position: relative;
153 |             overflow: hidden;
154 |         }
155 | 
156 |         .memory-card:hover {
157 |             transform: translateY(-10px) scale(1.02);
158 |             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
159 |         }
160 | 
161 |         .memory-card::before {
162 |             content: '';
163 |             position: absolute;
164 |             top: 0;
165 |             left: 0;
166 |             width: 100%;
167 |             height: 100%;
168 |             background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
169 |             transform: translateX(-100%);
170 |             transition: 0.5s;
171 |         }
172 | 
173 |         .memory-card:hover::before {
174 |             transform: translateX(100%);
175 |         }
176 | 
177 |         .memory-img {
178 |             width: 100%;
179 |             height: 250px;
180 |             object-fit: cover;
181 |             border-radius: 15px;
182 |             margin-bottom: 1rem;
183 |             transition: transform 0.5s ease;
184 |         }
185 | 
186 |         .memory-card:hover .memory-img {
187 |             transform: scale(1.05);
188 |         }
189 | 
190 |         .memory-date {
191 |             font-family: 'Dancing Script', cursive;
192 |             color: #ff69b4;
193 |             font-size: 1.3rem;
194 |             margin-bottom: 0.5rem;
195 |         }
196 | 
197 |         .memory-caption {
198 |             font-size: 1rem;
199 |             line-height: 1.5;
200 |             color: #666;
201 |         }
202 | 
203 |         /* Final Message Section */
204 |         .final-message {
205 |             text-align: center;
206 |             padding: 4rem 2rem;
207 |             background: rgba(255, 255, 255, 0.3);
208 |             backdrop-filter: blur(10px);
209 |             margin-top: 3rem;
210 |             position: relative;
211 |             z-index: 3;
212 |         }
213 | 
214 |         .final-message h2 {
215 |             font-family: 'Dancing Script', cursive;
216 |             font-size: 3rem;
217 |             color: #ff69b4;
218 |             margin-bottom: 2rem;
219 |             animation: heartbeat 2s infinite;
220 |         }
221 | 
222 |         @keyframes heartbeat {
223 |             0%, 100% { transform: scale(1); }
224 |             50% { transform: scale(1.1); }
225 |         }
226 | 
227 |         .final-message p {
228 |             font-size: 1.2rem;
229 |             max-width: 800px;
230 |             margin: 0 auto 2rem;
231 |             line-height: 1.8;
232 |         }
233 | 
234 |         .goodbye-btn {
235 |             display: inline-block;
236 |             padding: 1rem 2rem;
237 |             font-size: 1.2rem;
238 |             background: linear-gradient(45deg, #ff69b4, #da70d6);
239 |             color: white;
240 |             border: none;
241 |             border-radius: 50px;
242 |             cursor: pointer;
243 |             text-decoration: none;
244 |             transition: all 0.3s ease;
245 |             box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
246 |             animation: float 3s infinite ease-in-out;
247 |         }
248 | 
249 |         .goodbye-btn:hover {
250 |             transform: translateY(-5px);
251 |             box-shadow: 0 8px 20px rgba(255, 105, 180, 0.6);
252 |         }
253 | 
254 |         @keyframes float {
255 |             0%, 100% { transform: translateY(0); }
256 |             50% { transform: translateY(-10px); }
257 |         }
258 | 
259 |         /* Animations */
260 |         @keyframes fadeInScale {
261 |             0% { opacity: 0; transform: scale(0.8); }
262 |             100% { opacity: 1; transform: scale(1); }
263 |         }
264 | 
265 |         @keyframes fadeIn {
266 |             0% { opacity: 0; }
267 |             100% { opacity: 1; }
268 |         }
269 | 
270 |         /* Generate Hearts */
271 |         .js-generate-hearts {
272 |             position: fixed;
273 |             width: 100%;
274 |             height: 100%;
275 |             pointer-events: none;
276 |             z-index: 2;
277 |         }
278 | 
279 |         /* Custom Scrollbar */
280 |         ::-webkit-scrollbar {
281 |             width: 12px;
282 |         }
283 | 
284 |         ::-webkit-scrollbar-track {
285 |             background: rgba(255, 255, 255, 0.4);
286 |         }
287 | 
288 |         ::-webkit-scrollbar-thumb {
289 |             background: linear-gradient(45deg, #ff69b4, #da70d6);
290 |             border-radius: 6px;
291 |         }
292 | 
293 |         /* Responsive Design */
294 |         @media (max-width: 768px) {
295 |             .welcome h1 {
296 |                 font-size: 3rem;
297 |             }
298 | 
299 |             .memory-container {
300 |                 grid-template-columns: 1fr;
301 |             }
302 | 
303 |             .final-message h2 {
304 |                 font-size: 2.5rem;
305 |             }
306 |         }
307 |     </style>
308 | </head>
309 | <body>
310 |     <div class="magic-sparkles"></div>
311 |     <div class="floating-hearts">
312 |         <!-- Hearts will be generated via CSS -->
313 |         <div class="heart" style="--float-duration: 6s; --delay: 0s; --translate-x: 20px;">💝</div>
314 |         <div class="heart" style="--float-duration: 8s; --delay: 1s; --translate-x: -30px;">💖</div>
315 |         <div class="heart" style="--float-duration: 7s; --delay: 2s; --translate-x: 40px;">💗</div>
316 |         <div class="heart" style="--float-duration: 9s; --delay: 3s; --translate-x: -20px;">💓</div>
317 |         <div class="heart" style="--float-duration: 5s; --delay: 4s; --translate-x: 30px;">💕</div>
318 |     </div>
319 | 
320 |     <section class="welcome">
321 |         <h1>Our Beautiful Journey Together</h1>
322 |         <p>Every moment spent with you has been magical. Let's cherish these precious memories forever...</p>
323 |     </section>
324 | 
325 |     <div class="memory-container">
326 |         <div class="memory-card">
327 |             <img src="./d1.jpg" alt="First Date" class="memory-img">
328 |             <div class="memory-date">December 15, 2023</div>
329 |             <div class="memory-caption">Our first candlelight dinner. Your smile lit up the entire room! ✨</div>
330 |         </div>
331 |         <div class="memory-card">
332 |             <img src="./d2.jpg" alt="Beach Day" class="memory-img">
333 |             <div class="memory-date">January 1, 2024</div>
334 |             <div class="memory-caption">Watching the sunrise together on New Year's Day. Pure magic! 🌅</div>
335 |         </div>
336 |         <div class="memory-card">
337 |             <img src="./d3.jpg" alt="Movie Night" class="memory-img">
338 |             <div class="memory-date">January 20, 2024</div>
339 |             <div class="memory-caption">Our cozy movie night. You fell asleep on my shoulder! 🎬💕</div>
340 |         </div>
341 |         <div class="memory-card">
342 |             <img src="./d4.jpg" alt="Adventure Day" class="memory-img">
343 |             <div class="memory-date">February 14, 2024</div>
344 |             <div class="memory-caption">Valentine's Day adventure. Getting lost was the best part! 🗺️❤️</div>
345 |         </div>
346 |     </div>
347 | 
348 |     <section class="final-message">
349 |         <h2>Thank You for the Memories</h2>
350 |         <p>Every laugh, every tear, every moment spent together has been a precious gift. Though this chapter ends, the memories we've created will forever stay in my heart. You've made my world brighter and more beautiful than I could have ever imagined.</p>
351 |         <p>May your path ahead be filled with joy, love, and endless possibilities. Thank you for sharing these magical moments with me. ✨</p>
352 |         <a href="#" class="goodbye-btn">Until We Meet Again 💝</a>
353 |     </section>
354 | </body>
355 | </html>


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | // Cursor following effect
 2 | const cursor = document.querySelector('.cursor');
 3 | document.addEventListener('mousemove', (e) => {
 4 |     cursor.style.left = e.clientX + 'px';
 5 |     cursor.style.top = e.clientY + 'px';
 6 | });
 7 | 
 8 | // Typing effect for greeting
 9 | const greetingText = "Hey Bestie! You're the most adorable human ever! 💖";
10 | const greetingElement = document.querySelector('.greeting');
11 | let charIndex = 0;
12 | 
13 | function typeGreeting() {
14 |     if (charIndex < greetingText.length) {
15 |         greetingElement.textContent += greetingText.charAt(charIndex);
16 |         charIndex++;
17 |         setTimeout(typeGreeting, 100);
18 |     }
19 | }
20 | 
21 | // Create floating elements
22 | const floatingElements = ['💖', '✨', '🌸', '💫', '💕'];
23 | function createFloating() {
24 |     const element = document.createElement('div');
25 |     element.className = 'floating';
26 |     element.textContent = floatingElements[Math.floor(Math.random() * floatingElements.length)];
27 |     element.style.left = Math.random() * 100 + 'vw';
28 |     element.style.top = Math.random() * 100 + 'vh';
29 |     element.style.fontSize = (Math.random() * 20 + 20) + 'px';
30 |     document.body.appendChild(element);
31 | 
32 |     gsap.to(element, {
33 |         y: -500,
34 |         x: Math.random() * 100 - 50,
35 |         rotation: Math.random() * 360,
36 |         duration: Math.random() * 5 + 5,
37 |         opacity: 1,
38 |         ease: "none",
39 |         onComplete: () => element.remove()
40 |     });
41 | }
42 | 
43 | // Initialize animations
44 | window.addEventListener('load', () => {
45 |     // Title animation
46 |     gsap.to('h1', {
47 |         opacity: 1,
48 |         duration: 1,
49 |         y: 20,
50 |         ease: "bounce.out"
51 |     });
52 | 
53 |     // Button animation
54 |     gsap.to('.cta-button', {
55 |         opacity: 1,
56 |         duration: 1,
57 |         y: -20,
58 |         ease: "back.out"
59 |     });
60 | 
61 |     // Start typing effect
62 |     typeGreeting();
63 | 
64 |     // Create floating elements periodically
65 |     setInterval(createFloating, 1000);
66 | });
67 | 
68 | // Hover effects
69 |        // Hover effects
70 |        document.querySelectorAll('.cta-button').forEach(button => {
71 |         button.addEventListener('mouseenter', () => {
72 |             gsap.to(button, {
73 |                 scale: 1.1,
74 |                 duration: 0.3
75 |             });
76 |         });
77 | 
78 |         button.addEventListener('mouseleave', () => {
79 |             gsap.to(button, {
80 |                 scale: 1,
81 |                 duration: 0.3
82 |             });
83 |         });
84 | 
85 |         // Smooth page transition on click
86 |         button.addEventListener('click', () => {
87 |             gsap.to('body', {
88 |                 opacity: 0,
89 |                 duration: 1,
90 |                 onComplete: () => {
91 |                     window.location.href = 'cause.html'; // Replace with the actual URL of the next page
92 |                 }
93 |             });
94 |         });
95 |     });


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |     cursor: none;
 6 | }
 7 | 
 8 | body {
 9 |     min-height: 100vh;
10 |     display: flex;
11 |     flex-direction: column;
12 |     align-items: center;
13 |     justify-content: center;
14 |     background: linear-gradient(-45deg, #fee9f7, #e8f5fe, #fef2e8, #f0ffe8);
15 |     background-size: 400% 400%;
16 |     animation: gradientBG 15s ease infinite;
17 |     font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
18 |     overflow: hidden;
19 |     position: relative;
20 | }
21 | 
22 | .cursor {
23 |     width: 20px;
24 |     height: 20px;
25 |     background: pink;
26 |     border-radius: 50%;
27 |     position: fixed;
28 |     pointer-events: none;
29 |     mix-blend-mode: difference;
30 |     transition: transform 0.2s;
31 | }
32 | 
33 | .container {
34 |     text-align: center;
35 |     z-index: 1;
36 | }
37 | 
38 | h1 {
39 |     font-size: 3.5rem;
40 |     color: #ff69b4;
41 |     text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
42 |     margin-bottom: 2rem;
43 |     opacity: 0;
44 | }
45 | 
46 | .greeting {
47 |     font-size: 1.5rem;
48 |     color: #8a2be2;
49 |     margin-bottom: 3rem;
50 |     min-height: 2em;
51 | }
52 | 
53 | .cta-button {
54 |     padding: 1rem 2rem;
55 |     font-size: 1.2rem;
56 |     background: linear-gradient(45deg, #ff69b4, #ff99cc);
57 |     border: none;
58 |     border-radius: 50px;
59 |     color: white;
60 |     cursor: pointer;
61 |     box-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
62 |     transition: transform 0.3s, box-shadow 0.3s;
63 |     opacity: 0;
64 | }
65 | 
66 | .cta-button:hover {
67 |     transform: scale(1.1);
68 |     box-shadow: 0 0 25px rgba(255, 105, 180, 0.7);
69 | }
70 | 
71 | .floating {
72 |     position: absolute;
73 |     pointer-events: none;
74 |     opacity: 0;
75 | }
76 | 
77 | @keyframes gradientBG {
78 |     0% { background-position: 0% 50%; }
79 |     50% { background-position: 100% 50%; }
80 |     100% { background-position: 0% 50%; }
81 | }
82 | 
83 | @media (max-width: 768px) {
84 |     h1 { font-size: 2rem; }
85 |     .greeting { font-size: 1.2rem; }
86 |     .cta-button { font-size: 1rem; }
87 | }


--------------------------------------------------------------------------------