This project began routinely enough. I spotted an interesting design on Dribbble and wanted to see if I could make it work as a one-page website (some may call the result a two-page site, but the second page is just an overlay and not a separate file).
Building this site was a lot of fun. I’ve never done anything quite like it before. It was overkill to use a content management system (WordPress) for this task, but I found a simple theme with “backstretch” capability (see below) built in, so I thought I’d give it a try.
The whole concept hinges on the perfect background photo, so the first thing I did was a “reverse image search” on Google. And lo and behold … there it was — The perfect rubber plant photo was available on Unsplash.
After finding the ideal background, I went searching for a couple suitable typefaces to complement the mood I had in mind. I chose Futura PT for the headings (from Adobe Typekit), and Cormorant Garamond for the body text (from Google Fonts). I’m not a typographer, but I think they go nicely together.
Big round button
Positioning the main headline to the left of the plant was easy. The thorny part was building the big round “button” with concentric discs and a delicate shadow effect. That’s not an image — it’s assembled, styled, and positioned solely with CSS (see below).
The content for the overlay was swiped from my own Ern Berck “About” page and slightly revised to fit the new context. Using Photoshop, I resized the rubber plant photo and modified its background color a bit before optimizing it for the web.
The overlay is triggered by clicking the green triangle in the big round button. Within the overlay sits a “letter” with a subtle shadow effect created with CSS. The finished design looks fine on desktop machines but could be better on mobile devices. I’m working on it.
Take a peek
- Website: brandie.wpengine.com (login required)
- User Name: demo
- Password: brandie
What is CSS?
Cascading style sheets (CSS) is the language for describing the presentation of web pages; including colors, layout, and fonts. It allows you to adapt a web page to different types of devices, such as large screens, small screens, or printers. CSS is very powerful, but can be immensely frustrating.
What is backstretch?