I Met You In The Ocean of Fate

Welcome!

Follow the magical love story of Ally Kazam and WaffleJack as they navigate fate, adventure, and romance.

About the Webcomic

"I Met You In The Ocean of Fate" is a colorful and heartfelt webcomic following the relationship between Ally Kazam, a whimsical cat-unicorn, and WaffleJack, a free-spirited shark-ferret. Their journey is filled with discovery, friendship, and the magic of destiny.

Read the Latest Episodes

Episode 1: The Beginning

Episode 1

Read Episode 1

Episode 2: The Journey Continues

Episode 2

Read Episode 2

Meet the Characters

Ally Kazam

Ally Kazam

Species: Cat-Unicorn

Personality: Sweet, intelligent, and ocean-obsessed.

Style: Y2K aesthetic with lots of sparkles.

Fun Fact: Ally adores seashell collecting!

WaffleJack

WaffleJack

Species: Shark-Ferret

Personality: Laid-back, nerdy, and competitive.

Style: A mix of grunge and cottagecore.

Fun Fact: Despite their height, WaffleJack is a track star!

/* 🌈 Scene/2000s Aesthetic Styles */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700&display=swap'); body { background: linear-gradient(270deg, #ff00ff, #0099ff, #00ff99, #ffcc00, #ff00ff); background-size: 400% 400%; animation: rainbowBG 12s infinite alternate ease-in-out; font-family: 'Orbitron', sans-serif; color: white; margin: 0; padding: 0; text-align: center; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); } /* 🌟 Animated Gradient */ @keyframes rainbowBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* 🔥 Scene-Style Header */ header { background: url('checkerboard.png'), rgba(0, 0, 0, 0.8); background-size: 100px 100px; padding: 20px 0; position: fixed; width: 100%; top: 0; left: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); } header h1 { font-family: 'Press Start 2P', cursive; font-size: 30px; color: #ff00ff; text-shadow: 3px 3px 10px #ff00ff; } /* 💀 Scene-Style Navbar */ nav ul { list-style: none; padding: 0; margin: 15px 0; text-align: center; } nav ul li { display: inline; margin: 0 15px; } nav ul li a { color: white; text-decoration: none; font-size: 18px; font-weight: bold; text-transform: uppercase; padding: 5px 15px; background: rgba(255, 255, 255, 0.2); border-radius: 10px; transition: 0.3s; } nav ul li a:hover { background: #ff00ff; color: black; text-shadow: 2px 2px 5px white; } /* 🌊 Sections */ section { padding: 100px 10%; } /* 💖 Comic Display */ .comic { background: rgba(255, 255, 255, 0.2); padding: 20px; border-radius: 15px; margin: 20px auto; max-width: 600px; border: 3px solid #ff00ff; box-shadow: 0 0 20px #ff00ff; } .comic img { max-width: 80%; border-radius: 10px; border: 4px solid white; } /* 🖤 Scene Character Profiles */ #characters { padding: 80px 10%; } .character { display: flex; align-items: center; justify-content: center; background: url('grunge-texture.png'), rgba(0, 0, 0, 0.6); background-size: cover; padding: 25px; border-radius: 20px; margin: 20px auto; max-width: 800px; border: 3px solid #ff00ff; box-shadow: 0 0 15px #ff00ff; } .character img { width: 160px; height: auto; border-radius: 50%; border: 4px solid white; margin-right: 20px; } .char-info { text-align: left; color: white; font-size: 18px; font-family: 'Orbitron', sans-serif; } .char-info h3 { font-size: 26px; color: #ff00ff; text-shadow: 2px 2px 5px black; } /* 🌟 Sparkly Button Effects */ a { text-decoration: none; } button, .sparkle-btn { background: linear-gradient(45deg, #ff00ff, #00ffcc); border: 2px solid white; color: white; font-size: 18px; padding: 10px 20px; text-transform: uppercase; font-weight: bold; cursor: pointer; transition: 0.3s; border-radius: 10px; text-shadow: 2px 2px 5px black; } button:hover, .sparkle-btn:hover { background: white; color: black; text-shadow: none; } /* 🌙 Scene Footer */ footer { text-align: center; padding: 15px; background: rgba(0, 0, 0, 0.8); position: fixed; width: 100%; bottom: 0; left: 0; border-top: 2px