Template - Pyramid of Greatness

The other day, I shared the CSS Pyramid of Greatness, based on a Parks and Recreation's joke: the Swanson Pyramid of Greatness. Which is basically a triangle, but I guess that's part of the joke.

I decided to transform the demo into a template, so it could easily be changed into a "Whatever Pyramid of Greatness," and the result is on this CodePen: https://codepen.io/alvaromontoro/pen/NPGgwaB

To make it more generic and easier to use, some things had to be updated:

• The inline styles were moved to the CSS file. It's ugly and more verbose, but it simplified the HTML, which was my goal.

• The CSS logos done in CSS Art were replaced with two placeholder images only needing a new src attribute.

• Applied a trick to adjust font-size that I had see on one of Chris Coyier's demos, so the title will automatically adjust its size to fit the whole width of the pyramid's base.

• Added instructions all across the HTML with what things should be changed and how, and also a couple of tips or two.

Overall, the HTML code is really clean and semantic, the headings are headings, the lists are lists, the container is an article... and, interestingly, there is not a single class around.

Anyway, I will later add the template into a section on the site (where? tbd). But meanwhile, give it a try, fork the demo, change it, and let me know if you end up creating your own pyramid of greatness.