Inspired by a tweet, I’ve built a demo website template for a book author’s landing page. The idea is a 50-50 width 2-column desktop layout – meaning each of the 2 columns is 50% of the horizontal width – that collapse down to a single column on mobile and smaller sized screens. The landing page’s design features a quote, header text, a boxed-in image, and an absolutely positioned background that’s slightly less than half the screen width.
Web Design Features
- 2 columns
- featured image
- body text
Inspired by a Tweet
Here’s the tweet that inspired my demo website design and development project.
My Fully Developed Version
I built a fully functioning responsive version of this design using WordPress and the Divi theme.
DEMO: Check out the demo.
Desktop View (large screen sizes)
I built the same 2-column 50-50 web page layout for desktop viewing. The text and image are vertically centered to each other.
Tablet View (medium screen sizes)
At this viewing width, the layout responsively collapses to a single column. As the text becomes too tall or the image becomes too narrow the layout responds. I’ve chosen to left-align the image at this range because leaving it full-width results in an image that is much too tall.
Mobile View (smallest screen sizes)
Once the screen reduces to a mobile-phone size, I’ve allowed the image to stretch the full width and become horizontally centered above the text.