Responsive Web Poster

Web design & Illustration

After watching a Buzzfeed Video where they debunk common myths composable and recycled plastic, I created a Web Poster (using HTML, CSS Grid, SASS) clarifying the hierarchy:
Reduce → Reuse → Recycle.

TDLR; - Reduce should be the first and initial step out of the three steps because most recycled plastics ends up in the landfill – which is why wanted to portray recycling in a detrimental context.

The poster changes based on the window's width because I thought the act of minimizing the browser window behaved similarly to the decomposition of plastic.
✌ INTERACT WITH THE POSTER →

Final Illustration

CSS Grid System

Using CSS Grid, I organized the illustration elements in each grid. All illustration and animation is done using CSS and SVG and most of them are illustrated using rounded rectangle divs! 

The code detects the window height and divides it equally by 4! So it looks consistent regardless of monitor size and resolution!

Contact me!

Let's talk! I don't bite (just harmlessly quack here and there) and love talking about everything and anything! Ask me about anything: projects, design philosophy, work-flow, even birb memes!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.