commit 265a44dee93e35b89f70096a63f38094d83c134d
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 03:20:12 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..5e94e43
--- /dev/null
+++ b/body.html
@@ -0,0 +1,44 @@
+<header>
+ <h1>Karine & François</h1>
+ <p class="tagline">A Tale of Two Gamers</p>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h2>Why We're Perfect Together</h2>
+ <div class="hearts-animation"></div>
+ </div>
+ </section>
+
+ <section class="interests">
+ <div class="interest-card" data-aos="fade-up">
+ <h3>Gaming Life</h3>
+ <p>PS5 gaming sessions are our favorite way to spend evenings together</p>
+ </div>
+
+ <div class="interest-card" data-aos="fade-up">
+ <h3>Our Furry Family</h3>
+ <p>Adventures with Kiki our energetic dog and lazy days with Minnie our beloved chonky cat</p>
+ </div>
+
+ <div class="interest-card" data-aos="fade-up">
+ <h3>Outdoor Adventures</h3>
+ <p>From peaceful paddleboarding to scenic hiking trails</p>
+ </div>
+
+ <div class="interest-card" data-aos="fade-up">
+ <h3>Indoor Coziness</h3>
+ <p>Board game battles and binge-watching our favorite shows</p>
+ </div>
+
+ <div class="interest-card" data-aos="fade-up">
+ <h3>Foodie Love</h3>
+ <p>Exploring Asian cuisine and our special weakness for peanut butter rolls</p>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with 💕 by Karine & François</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..5227c3c
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://karine-francois.scroll.pub
+metaTags
+ title "Karine & François - Our Story Together"
+ description "The story of Karine and François - from gaming to hiking, and all the adventures in between with their pets Kiki and Minnie"
+ author "Karine & François"
+editButton /edit.html
+title Karine & François - Our Story Together
+style.css
+body.html
+script.js
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..0337b2d
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# karine-francois.scroll.pub
+Website generated by Claude from prompt: A website saying why Karine and Francois are together. They like gaming on the ps5, walking their dog kiki. Chilling at home with Minnie their old fat cat. They like small hikes, paddleboarding, board games. They like TV shows and movies. They love good food too, particularly Thai, Vietnamese and particularly peanut butter roll
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c75caa0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Smooth scroll for internal links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Animate interest cards on scroll
+ const cards = document.querySelectorAll('.interest-card');
+
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ cards.forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ observer.observe(card);
+ });
+
+ // Create floating hearts animation
+ function createHeart() {
+ const heart = document.createElement('div');
+ heart.innerHTML = '❤️';
+ heart.style.position = 'absolute';
+ heart.style.left = Math.random() * 100 + '%';
+ heart.style.animation = `float ${Math.random() * 2 + 3}s linear`;
+ document.querySelector('.hearts-animation').appendChild(heart);
+
+ setTimeout(() => {
+ heart.remove();
+ }, 5000);
+ }
+
+ setInterval(createHeart, 1000);
+});
+
+@keyframes float {
+ 0% {
+ transform: translateY(0) rotate(0deg);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(-50px) rotate(360deg);
+ opacity: 0;
+ }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..3a6fdcd
--- /dev/null
+++ b/style.css
@@ -0,0 +1,105 @@
+:root {
+ --primary-color: #ff6b6b;
+ --secondary-color: #4ecdc4;
+ --text-color: #2d3436;
+ --background-color: #f9f9f9;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+}
+
+header {
+ text-align: center;
+ padding: 4rem 2rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+}
+
+h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+.tagline {
+ font-size: 1.5rem;
+ opacity: 0.9;
+}
+
+.hero {
+ min-height: 60vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
+ url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h20v20H0z" fill="none"/></svg>');
+}
+
+.hero h2 {
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+ color: var(--primary-color);
+}
+
+.interests {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 4rem 2rem;
+}
+
+.interest-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+}
+
+.interest-card:hover {
+ transform: translateY(-5px);
+}
+
+.interest-card h3 {
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background-color: var(--text-color);
+ color: white;
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero h2 {
+ font-size: 2rem;
+ }
+
+ .interests {
+ grid-template-columns: 1fr;
+ }
+}
+
+.hearts-animation {
+ height: 50px;
+ position: relative;
+ overflow: hidden;
+}