CASA GIANNASELECTED WORK
CUSTOM SITE PAGES
The project
Three custom-coded pages on casagianna.com: a neighborhood guide with a map, outdoor dining and an FAQ. The site runs on BentoBox, a restaurant website platform whose fixed section types include no maps, card grids or accordions, so I built them as custom HTML and CSS blocks inside it.
What I did
I planned, wrote and coded the three pages: a downtown map with nearby-place cards, an outdoor dining page and an FAQ accordion, all in the site’s own colors and type.
Your neighborhood guide
A map of downtown with Casa Gianna at the center, and a card for each nearby place saying what it is and how long the walk takes.
What’s nearby
| Place | Walk |
|---|---|
| Miami Worldcenter | 1 minute |
| Brightline MiamiCentral | 3 minutes |
| Kaseya Center | 5 minutes |
| Bayside Marketplace | 7 minutes |
| Ferré Park, PAMM and Frost | 10 minutes |
| Bayfront Park | 10 minutes |
| Adrienne Arsht Center | 12 minutes |
Outdoor dining
I built the page for the Terrazza, Casa Gianna’s outdoor dining room: happy hour at the outdoor bar with every item $9 on weekdays from 4 to 7, dinner on the Terrazza, private events outside and the hours for each.
Frequently asked questions
Nine guest questions in an accordion that opens one answer at a time: location, hours, reservations, parking, private dining, outdoor seating, takeout and delivery, Cafe Gianna and contact.
Rules for every custom block
Every custom block I add to the site follows these four rules.
- The site’s colors
- The copper, brown and ivory used on the live site, instead of the print values from the brand guide
- Inherited fonts
- Every block uses the fonts BentoBox already loads, so nothing looks pasted in
- A prefix per page
- Each page gets its own class prefix, so blocks never interfere with each other
- One reference block
- The neighborhood map and cards became the pattern for new blocks on the site