Welcome

Hi! Welcome to my site. Explore the moody Twin Peaks vibes, music, and gallery. :>

About Me

hii and welcome to my site! :> My name is Katie and I'm just testing this out.

More info here... (placeholder)

Blog

Post 1: Placeholder text...

Post 2: Placeholder text...

Music

Comments

Comment box placeholder.

/* Base Styles */ body { margin: 0; font-family: 'Source Serif Pro', serif; background-color: #2E0D14; /* coffee bean */ color: #4B3935; /* text brown */ overflow-x: hidden; } a { text-decoration: none; color: #F0E7D5; } nav { width: 100%; background-color: #4B3935; /* mocha bar */ position: sticky; top: 0; z-index: 100; } nav ul.menu { list-style: none; margin: 0; padding: 10px 20px; display: flex; justify-content: center; gap: 30px; } nav ul.menu li a:hover { color: #C0302E; /* muted red hover */ } .section-left, .section-right { display: flex; justify-content: flex-start; padding: 80px 10%; } .section-right { justify-content: flex-end; } .text-box { background-color: #CFC3B8; /* soft taupe/light mocha */ padding: 30px; max-width: 600px; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.5); position: relative; } /* Lace effect */ .lace { border: 10px solid transparent; border-image: url('https://i.ibb.co/dKx4L7p/lace-border.png') 30 round; /* example lace image, replace if you want */ padding: 20px; } /* Gallery */ .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .gallery img { width: 100%; border-radius: 5px; cursor: pointer; } /* Music Controls */ .music-controls { display: flex; justify-content: space-between; margin-top: 10px; } button { background-color: #4B3935; color: #F0E7D5; border: none; padding: 8px 12px; cursor: pointer; border-radius: 5px; } button:hover { background-color: #2E0D14; } /* Floating Pixels */ .pixel { position: absolute; width: 10px; height: 10px; background-color: #4B3935; opacity: 0.6; border-radius: 50%; animation: float 20s linear infinite; } @keyframes float { 0% { transform: translateY(100vh) translateX(0); } 100% { transform: translateY(-10vh) translateX(50px); } } // Floating pixels const pixelContainer = document.getElementById('pixel-container'); const numPixels = 15; for (let i = 0; i < numPixels; i++) { const pixel = document.createElement('div'); pixel.classList.add('pixel'); pixel.style.left = Math.random() * window.innerWidth + 'px'; pixel.style.top = Math.random() * window.innerHeight + 'px'; pixel.style.width = (5 + Math.random() * 10) + 'px'; pixel.style.height = pixel.style.width; pixel.style.opacity = 0.3 + Math.random() * 0.7; pixelContainer.appendChild(pixel); } // Music Player Cycling const tracks = [ "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1884582286&color=%234B3935", "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/203948573&color=%234B3935", "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/209384758&color=%234B3935", "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/217384759&color=%234B3935" ]; let currentTrack = 0; const player = document.getElementById('soundcloud-player'); document.getElementById('next').addEventListener('click', () => { currentTrack = (currentTrack + 1) % tracks.length; player.src = tracks[currentTrack]; }); document.getElementById('prev').addEventListener('click', () => { currentTrack = (currentTrack - 1 + tracks.length) % tracks.length; player.src = tracks[currentTrack]; });