CSS Grid Test: Replica of a Porsche Advertisement


See the CSS Grid Porsche Ad!

This one is pretty simple, but I wanted to test the transform property to achieve the slanted center-line.
To achieve the slant, I used skew — 5 degrees, I think — on both of the colored halves. What that did, though, is cause the other sides to stick out of their respective grids. So, as a hack, I added some additional columns to use as a cover-up for the overdraw. It’s a hack, but it works.
Everything is HTML & CSS. The only image is the car.

See the Pen Porsche Ad Using CSS Grid by Alec (@GrayHulk) on CodePen.

1 Comment

Leave a Reply

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

CSS Grid Project: Nike Air Span+ 6 Advert

See the CSS Grid Nike Air Span+ 6 Advertisement. CSS is pretty fuckin’ fun. I haven’t even delved into the depths of animation and I’m already seeing the great potential. After browsing “iconic print ads” on Google Images for 20 minutes, I came across this interesting, albeit a bit questionable …

My first CSS Grid Project: Old Porsche Ad Replica

See the CSS Grid Porsche Ad! See the Pen CSS Grid Advertisement (overlap) by Alec (@GrayHulk) on CodePen. Since this was my first foray into CSS Grid, I wanted to start off with an achievable goal but not make it too simple. At first glance, this might look like just …