Most websites we’re building have a layout consisting of a block of text, and then an image block, and this is a staggered pattern. The Cochran website group wanted something innovative to help introduce the new Electric Vehicle technology to their customers. They designed a “text in a square” pattern with several tile squares that fit together in one larger square and provided a mockup to every single page on the website.
Keeping the padding “exactly” the same for all responsive sizes was the trickiest part, and required some hard coding of the widths along with flexbox. It was amazing once a row of boxes was finished, but then every page had a different tile pattern so I had to start over and readjust – including stacked tiles. I had to reach out for some assistance to get the final adjustments in place (hurray for mentors!), but it’s one of the prettiest sites I’ve ever built!
Each tile has either a background image or a colored tile with the image in the center. And every tile is either a link to another page or a popup modal with more text. These differences caused all the responsive positions to change and had to be accounted for.
Tools: HTML5, CSS3, Bootstrap4.
