Day 7 | 50 Projects in 50 Days

#css #webdev #programming #beginners

Split Landing Page

This project shows two sections side by side — one for PlayStation 5 and one for Xbox Series X. When you hover over a section, it expands while the other one shrinks.

Each side has a background image, but I added a linear gradient overlay to make the text and buttons stand out more. I didn’t even know before that you can make a gradient go from one color to the same color — it just creates a soft, semi-transparent overlay. That felt like a small win.

For the interactivity, I used mouseenter and mouseleave in JavaScript to toggle an active class. When a section becomes active, its flex value increases, making it grow wider while the other side shrinks back.

My layout was quite different from the instructor’s. He used absolute positioning, but I used Flexbox. The funny thing is, both methods gave almost the same result, just with different behaviors underneath.

Absolute positioning made the hover animations more independent and easier to control, while Flexbox made things resize smoothly but also pushed elements around a bit. For this project, absolute positioning was probably the better fit, but I like that I’m learning these differences by trying things my own way. That’s really the point of this whole process for me.

Here is what it looks like normally