My 2nd CodePen pen is picked!

I’ve been working on a very large website for an engineering firm that specializes in projects that improve communities and the environment like restoring wetlands and estuaries.

The site uses beautiful images that fill the entire screen with bold text titles. These large images are called “hero” images. I wanted to display the pictures and titles in a way that would look great on all devices. The titles need to be very readable even on a small screen and I wanted to keep the title and images in the same ratios.

After some research and experimentation I found the perfect balance and created a codepen pen to show it off. In the screen print the white title sits in the top left corner of the dramatic night sky with the milky way. No matter how big or small the screen is the image and title remain in the same scale. This is an example of responsive web design.

The image is also a link to codepen.io so you can play around with the screen sizes to see how it adapts.

Responsive Hero Image & Bold Title

My pen was picked!

Codepen.io is a great website where you can make your own “sandbox” to play in and try new programming code. Developers post some interesting and very helpful ideas there. Web developers have new ways to layout web pages which are very flexibile. In fact, one of the layouts is called flex box. Its been eclipsed somewhat by CSS Grids which has more features. I read many articles that talked about using CSS Grids to divide a site into header, body, side bar and footer.

Most sites have way more sections than that. I wanted to create a template that I could use over and over again. I started playing around and came up with reusable, responsive grid layout that I posted on CodePen. It isn’t easy coming up with a new idea for codepen so I was thrilled when my pen was “picked” today.

I’ve attached a few screenshots as well as the link if you want to try it yourself.



Scroll to Top