Buildings and Food is a hospitality group in Cleveland with brand design done by Jack Watson (see more about the brand design on Jack’s Behance). They wanted the website to showcase not just the brand, but also the various properties belonging to the group. This was accomplished with a design I developed in Adobe XD based on the clean, playful logo concept that utilizes the central block in the logo as a “portal” to these other properties.
I built a custom block theme (utilizing “full site editing” as it used to be called) for WordPress. The frame around the entire site is a custom block purpose-built for Buildings and Food. This block is added to the main page template in the site editor with the page content as an inner block. The site frame block handles scrolling the contents, setting CSS custom properties (variables) so that the full-screen sections are only as tall & wide as the inside frame, and of course loading the other sites in a slider (using Swiper). Note that the slider functionality is not displayed in the editor.
The biggest challenge with this feature was ensuring that the sites in question would allow embedding within another site. If one doesn’t, it can still have a slide with a background image with a prominent link to visit the site. A similar screen is displayed while each embedded site iframe is lazy-loaded to improve performance.
View the site at buildings-food.com.