I came across a designer’s personal site and was initially interested in the typography. But as I dug down into the CSS, I found that the split-screen layout is relatively simple. The following is basically how it breaks down:
The page is broken into two sections – one for left/right.
- top: 0; Left: 0; position: absolute; width: 50%; height: 100%;
Each section has a div class of “box”
position: relativel width: 100%; Height: 100% padding: 50%
Within the box is an image class with the author image
float: none; display: block; clear: both; width: 146px; margin: 120px auto 20px auto;
Finally, the typography. The larger typography is an h2 class of Playfair Display type like this:
The byline typography is a span class that looks like this:
Overall, this is fairly simple CSS to use to position elements and typography on a page. The site also uses subtle animation that adds interactivity and direction to the user. The layout is unique and I think is a clever solution to display this content.