Hey everyone! I'm excited to share my latest project where I explored the creative possibilities of CSS and built a captivating dynamic logo using 83 different-sized divs!
🟨 The Idea:
The inspiration behind this project came from my passion for CSS and graphic design. I wanted to challenge myself to create something unique, and the idea of crafting a logo purely with CSS divs seemed like an exciting prospect.
🟨 Designing Process:
To begin, I used Adobe XD to design the logo layout and calculate the precise positions for all the 83 divs. (I used **uiverse.io **logo. uiverse.io is a great website for hundreds of custom elements made with CSS.)This step helped me visualize the final outcome and fine-tune the logo's overall appearance.
🟨 Data Organization:
To efficiently implement the design, I created an Excel sheet where I documented all the necessary information for each div, such as size and position coordinates. This allowed me to keep track of every element and streamline the coding process.
🟨 HTML and SCSS Implementation:
With the design and data ready, I started coding the project using HTML and SCSS. The random placement of the divs within the card was the first step to achieve a dynamic and playful effect when the logo is not formed yet.
Arranging the 83 divs to random places in the card was no small task! It took a substantial amount of time and dedication to ensure that the divs didn't overlap during the hover effect.
🟨 Hover Effect – Unveiling the Logo:
The magic happens when you hover over the card! All the divs smoothly transition to their designated positions, coming together to form the stunning logo I envisioned.