50-50 Website Template for Book Author Landing Page

by | May 6, 2023 | Website Design

This page may contain affiliate links to recommended products or services. If you choose to purchase after clicking a link, I may receive a commission at no additional cost to you.

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
  • heading
  • body text
  • quote

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.

Design Considerations

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.

Floyd Hartford is a website developer from southern Maine. He's focused on creating and building WordPress websites and loves spending time digging into code like HTML, CSS, scss, jQuery, PHP, and MySQL.


Submit a Comment

Your email address will not be published. Required fields are marked *

two × 5 =

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Looking for WordPress Help?

I’m a freelance web developer specializing in small business and corporate marketing websites.

Pin It on Pinterest