✍🏻 Log Date: 9 June 2025
For the past two days, I focused on recreating a more advanced landing page layout — experimenting with overlapping elements and visual transitions.
🛠️ What I Coded (Highlights):
Landing Page for Suite (a hypothetical product) (Attempt 1 & 2)
Live Demo: https://edwardcjianken.github.io/suite-landing-page/
GitHub Repo: https://github.com/edwardcjianken/suite-landing-page
I did two separate attempts for this layout to reinforce how to handle more complex designs. The layout features a 3-column hero section, with certain elements from the first column intentionally overflowing into the second — a style I haven’t tried before.
✨ Things I Learned:
1. Gradient Button with Smooth Transition
Learned how to simulate a smooth gradient transition using the ::before pseudo-element underneath the button. Since CSS can’t transition between background-image values (e.g., gradients), I had to apply a transparent background on the button itself and animate the pseudo-element underneath it.
Button without mouse hover:
Button with mouse hovered:
2. Overflowing Image Beyond Container
Positioned an image (of a person) so that the head appears above the container boundary. Surprisingly, this was simple — it just required a negative margin-top.
3. Understanding flex-basis and min-width
Got more comfortable with using flex-basis to control column widths in a flex container.
💡 Reflection:
Practicing this layout helped solidify how layout mechanics like flex-basis, min-width, and pseudo-elements interact under the hood.
Next, I will start to use incorporate some JavaScript to add more interactivity to the designs. Onward! 🚀
Top comments (2)
Growth like this is always nice to see. Kinda makes me wonder - what keeps stuff going long-term? Like, beyond just the early hype?
Hi Nevo, in all honesty, I think its too early for me to give a meaningful answer as I'm just at the beginning of my journey 😂 But for me - I think it would be the desire to actually build something end-to-end to understand the process. I'm really looking forward to that!
FYI this is the first comment I have gotten! 🤯 Thanks for reading!