diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..1b79fa6 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,257 @@ + +@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Lato:wght@300;400;700&display=swap'); + +body { + background-color: #FFF5EE; + font-family: 'Lato', sans-serif; + color: #555; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Great Vibes', cursive; + color: #FFC0CB; + font-weight: normal; +} + +.hero { + background: radial-gradient(circle, rgba(255, 192, 203, 0.3) 0%, rgba(255, 245, 238, 0) 70%); + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #fff; +} + +.hero-text { + animation: fadeIn 2s ease-in-out; +} + +.hero h1 { + font-size: 5rem; + color: #E6A4B4; +} + +.hero p { + font-size: 1.5rem; + color: #E6A4B4; + font-family: 'Lato', sans-serif; + font-weight: 300; +} + +.section { + padding: 100px 0; +} + +.section h2 { + text-align: center; + margin-bottom: 50px; + font-size: 3.5rem; +} + +.timeline { + position: relative; + padding: 50px 0; +} + +.timeline::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 2px; + height: 100%; + background-color: #FFC0CB; +} + +.timeline-item { + margin-bottom: 50px; + position: relative; +} + +.timeline-item:last-child { + margin-bottom: 0; +} + +.timeline-content { + position: relative; + width: 45%; + padding: 20px; + background-color: #fff; + border-radius: 0.75rem; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); +} + +.timeline-item:nth-child(odd) .timeline-content { + left: 55%; +} + +.timeline-item:nth-child(even) .timeline-content { + left: 0; + text-align: right; +} + +.timeline-dot { + position: absolute; + top: 20px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #FFC0CB; + border: 4px solid #FFF5EE; +} + +.gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 15px; +} + +.gallery-item { + background-color: #fff; + padding: 10px; + border-radius: 0.75rem; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.gallery-item:hover { + transform: translateY(-5px); + box-shadow: 0 8px 12px rgba(0,0,0,0.15); +} + +.gallery-item img { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 0.5rem; +} + +.love-reasons-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; +} + +.reason-card { + background: #fff; + padding: 20px; + border-radius: 0.75rem; + text-align: center; + box-shadow: 0 4px 6px rgba(0,0,0,0.05); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.reason-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(255, 192, 203, 0.3); +} + +.poem { + max-width: 600px; + margin: 0 auto; + text-align: center; + font-family: 'Great Vibes', cursive; + font-size: 1.8rem; + line-height: 1.8; + color: #777; +} + +.final-section { + padding: 150px 0; + text-align: center; + background-color: #FFC0CB; + color: #fff; + position: relative; + overflow: hidden; +} + +.final-section h2 { + color: #fff; + font-size: 3rem; + animation: pulse 2s infinite; +} + +.floating-hearts { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.heart { + position: absolute; + width: 20px; + height: 20px; + background-color: rgba(255,255,255,0.8); + transform: rotate(-45deg); + animation: float 10s infinite; +} + +.heart::before, .heart::after { + content: ''; + position: absolute; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: rgba(255,255,255,0.8); +} + +.heart::before { + top: -10px; + left: 0; +} + +.heart::after { + top: 0; + left: 10px; +} + + +footer { + background-color: #fcebeb; + padding: 20px 0; + text-align: center; + font-size: 0.9rem; + color: #aaa; +} + +.navbar { + transition: background-color 0.3s ease; +} + +.navbar.scrolled { + background-color: rgba(255, 245, 238, 0.9) !important; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +.nav-link { + color: #E6A4B4 !important; + font-weight: 600; +} +.nav-link:hover { + color: #FFC0CB !important; +} + + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.05); } + 100% { transform: scale(1); } +} + +@keyframes float { + 0% { transform: translateY(100vh) rotate(-45deg); opacity: 1; } + 100% { transform: translateY(-10vh) rotate(-45deg); opacity: 0; } +} + diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..2d7cd50 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,48 @@ + +document.addEventListener('DOMContentLoaded', function() { + + // Smooth scrolling for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + + // Navbar scroll effect + const navbar = document.querySelector('.navbar'); + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + }); + + // Floating hearts animation + const finalSection = document.querySelector('.final-section'); + if (finalSection) { + const heartsContainer = document.createElement('div'); + heartsContainer.className = 'floating-hearts'; + finalSection.appendChild(heartsContainer); + + for (let i = 0; i < 15; i++) { + const heart = document.createElement('div'); + heart.className = 'heart'; + heart.style.left = Math.random() * 100 + 'vw'; + heart.style.animationDuration = (Math.random() * 5 + 5) + 's'; // 5-10 seconds + heart.style.animationDelay = Math.random() * 5 + 's'; + heartsContainer.appendChild(heart); + } + } + + // Music button placeholder + const musicBtn = document.getElementById('play-music-btn'); + if(musicBtn) { + musicBtn.addEventListener('click', () => { + alert('Background music coming soon!'); + }); + } +}); diff --git a/index.php b/index.php index 7205f3d..07fec00 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,169 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + For A, With Love + + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+

For A, With Love

+

"A, this website is a small piece of my heart for you."

+ +
+
+ + +
+
+

Our Story

+
+ +
+
+
+

[Date of a special memory]

+

[A short description of the memory. e.g., The day we first met and how the world seemed to stop for a moment.]

+
+
+ +
+
+
+

[Another key date]

+

[Describe another beautiful moment we shared. Maybe our first trip together or a funny inside joke.]

+
+
+ +
+
+
+

[Memorable event]

+

[Talk about a challenge we overcame or a dream we shared. This is where we show our strength as a couple.]

+
+
+
+
+
+ + +
+
+

Why I Love You

+
+ +
Your infectious laugh.
+
The way your eyes sparkle.
+
Your kindness to everyone.
+
How you always support me.
+
Our late-night talks.
+
Your passion for your dreams.
+
The comfort of your hugs.
+
Your incredible cooking.
+
How we can be silly together.
+
Your beautiful soul.
+
+
+
+ + + + + +
+
+

A Message For You

+
+

+ In a world of fleeting moments,
+ You are my constant star.
+ With every beat of my heart,
+ I find myself where you are. +

+

+ This is just a placeholder, my love,
+ For a thousand words I wish to say,
+ But for now, know this to be true,
+ I love you more each and every day. +

+
+
+
+ + +
+
+

A, I love you more every day.

+
+
+
+ + + + + + + + + + - + \ No newline at end of file