DEV Community

Cover image for #CodepenChallenge 100 DIVS: Living Room
Takane Ichinose
Takane Ichinose

Posted on

#CodepenChallenge 100 DIVS: Living Room

Using DIV HTML elements, I created this 3D living room, with functionalities using Vanilla Javascript.

I added touch events, so this image can be controlled using your smart phone.

I still retained the Pug source code, because I had so much edit with the HTML codes until I got exactly 100 DIV elements.

I created a 3D mixin for Pug, and SCSS, for me to draw 3D elements easier.

Top comments (1)

Collapse
 
sharixralex profile image
sharixralex

For the #CodepenChallenge "100 DIVS: Living Room," imagine creating a cozy, layered layout using 100 individual divs to build a virtual living room space. Each div can represent different elements like sofas, tables, and posters for the living room, adding depth and personality to the scene. With some clever CSS, you can arrange divs to mimic the textures of rugs, the look of a coffee table, or even the frames of wall art. By incorporating well-placed colors, patterns, and layouts, the room comes alive visually, with each div contributing to an inviting space where every detail—from furniture to wall art—transforms the scene into a realistic living room that feels both creative and welcoming.