Fin - Heartfelt Aquarium Landing Page Template
Fin is a masonry-style landing page template built for volunteer-run fish rescue and adoption services. It leads with a full-viewport betta macro photograph, then walks visitors through a gallery of adoptable fish cards. Each card carries a rescue name, species, temperament tag, and tank-size minimum. Two conversion paths serve adopters and fish surrenders alike.
by Rocket studio
Quick summary
Fin is a single-page aquarium rescue landing page built around a masonry card gallery and a macro close-up header. It introduces visitors to individual adoptable fish before asking anything of them. The layout balances emotional storytelling with practical adoption details, serving both first-time fish keepers and seasoned aquarium hobbyists.
Who this template is for
This template is designed for volunteer-run fish rescue groups that rehab surrendered bettas, cichlids, and other freshwater species. It suits any small rescue operation that wants to present adoptable animals with warmth and clarity.
- Aquarium rescue volunteers matching fish with informed adopters
- Hobbyists running community rehoming networks for surrendered fish
- Parents or educators using adoption storytelling to teach responsible fishkeeping
What problem this template solves
Most fish rescue pages bury the animals in text-heavy lists or plain tables. Visitors never form a connection before they click away. Fin solves that by leading with personality: a name, a face, and a temperament before any form appears.
- Visitors abandon pages that list fish without visual or emotional context
- Surrender inquiries get lost when there is no clear second conversion path
- Impulse adopters need care requirements front and center to reduce returns
What you get with this template
Fin delivers a complete single-page layout structured around one guiding idea: let the fish do the persuading. Every design decision supports that goal, from the opening header to the adoption inquiry modal.
- A full-viewport macro betta header with a floating geometric sans headline
- A staggered masonry card grid with hexagonal and trapezoid soft-polygon frames
- Full-width interstitial story panels placed between card clusters
- Individual fish detail modals with care notes, compatibility details, and an adoption inquiry form
- A sticky navigation bar with a visible "Surrender a Fish" secondary call to action
Feature list
The template's core capabilities are described below. Each feature is drawn directly from the design brief and page structure.
Macro Close-Up Hero Header
The header fills the entire viewport with a single large betta portrait photograph. Iridescent scale detail and a creamy java fern bokeh background create an immediate emotional connection. A geometric sans headline fades in after the first visual beat.
Masonry Fish Card Gallery
Each card in the staggered grid represents one adoptable fish. Cards display a candid rescue photo, a human-style rescue name such as Gerald or Diane, species label, temperament tag, and a minimum tank-size requirement. Soft-polygon frames give the grid geometric rhythm without rigidity.
Full-Width Interstitial Story Panels
Between card clusters, wide panels tell short rescue micro-stories. Examples include a before-and-after of a neglected oscar and a time-lapse of a quarantine tank clearing up. Adopter quotes are woven in to build trust without a lecture tone.
Fish Detail Modal with Adoption Form
Tapping "Meet This Fish" opens a focused modal for each animal. The modal presents care requirements, compatibility notes, and an adoption inquiry form. The form collects tank size in gallons, current tank inhabitants, and a photo of the applicant's setup.
Dual Conversion Navigation
A sticky navigation bar stays visible as visitors scroll. It carries two clear paths: one for adopters and one for owners who need to surrender a fish. Both calls to action remain accessible without scrolling back to the top.
Playful Geometric Card Frames
Cards use soft hexagonal and trapezoidal polygon shapes instead of plain rectangles. The frames stagger at gentle angles across the masonry grid. Interactive cards and hover states glow with neon tetra blue, making clickable elements easy to spot.
Page sections overview
| Section | Purpose |
|---|---|
| Hero header | Opens with full-viewport betta portrait and floating headline |
| First card cluster | Introduces first batch of adoptable fish with masonry cards |
| Interstitial story panel | Shares a before-and-after rescue micro-story |
| Second card cluster | Continues the adoptable gallery with more fish personalities |
| Adopter quote panel | Displays a short quote from a past adopter |
| Third card cluster | Closes the gallery with remaining adoptable residents |
| Sticky navigation bar | Holds dual calls to action across the full scroll |
| Fish detail modal | Shows care details and adoption inquiry form per fish |
Design & branding system
The Soft Mist color system draws from a low-tech planted tank at golden hour. Every color decision reinforces calm trust and visual warmth rather than clinical pet-store brightness.
- Backgrounds use foggy aquarium morning white (#EEF0F2) and pale driftwood tan (#D5C7A3) to keep the atmosphere soft and readable
- Body type and headings sit in deep planted-tank green (#3B6B5E) for strong contrast against light backgrounds
- Interactive cards and hover states use neon tetra blue (#5BC0EB) as a focused accent that signals clickability without cluttering the palette
Mobile & speed optimization
The masonry layout is structured to reflow cleanly on smaller screens. Card staggering and polygon frames adapt so the gallery remains legible and visually engaging on mobile viewports.
- Cards stack into a single or double column on narrow screens without losing their geometric frame styling
- The sticky navigation stays condensed and thumb-accessible on mobile devices
- Modal overlays are designed to open in full-screen view on small screens for easy form completion
How this template helps you convert
Fin earns conversions by building attachment before presenting any action. By the time a visitor reaches a call-to-action button, they already care about the animal behind it.
- The macro hero photograph creates an immediate personal connection, pulling visitors in before any text asks them to act.
- Named fish cards with temperament tags and tank-size minimums pre-qualify adopters naturally, so inquiries arrive with more context and better fit.
- The dual sticky navigation keeps both the adoption path and the surrender path visible throughout the scroll, reducing drop-off for either audience.
Other information about this template
Fin is a purpose-built template for the fish rescue and adoption niche. It is part of a broader library of pet and animal service templates built around the Playful Geometric theme and Soft Mist color system.
- The template style is Masonry/Pinterest, suited to any adoption marketplace displaying multiple individual animals
- The creative direction follows a Gallery Walk structure, meaning the scroll experience mimics moving through a physical fish room tank by tank
- The header concept is a Macro Close-Up, a single oversized photograph intended to anchor the emotional tone of the entire page
- The landing page direction is Marketplace/Multi, supporting two distinct visitor goals within one scrollable page layout
- This template fits within the Fish and Aquarium Services subcategory and is designed for the Fish and Aquarium Rescue and Adoption niche




Theme
Playful Geometric
Creative direction
Gallery Walk
Color system
Soft Mist
Style
Masonry/Pinterest
Direction
Marketplace/Multi
Page Sections
Macro Close-up Hero Header
Masonry Fish Card Gallery
Interstitial Rescue Story Panels
Fish Detail Modal with Adoption Form
Dual Conversion Sticky Navigation
Related questions
Can I add more fish cards to the masonry grid?
Does the adoption inquiry form collect setup photos?
Can the template handle both adoption and surrender inquiries?
Does the template work if I only have a few fish available?
Can I change the colors and typeface to match my rescue group?