Meet Landing Page - Built with HTML, CSS Grid, and Flexbox

What are you most proud of, and what would you do differently next time?

I’m proud of successfully using CSS Grid and Flexbox for a responsive layout and handling overlapping elements like .number on .offer. I also applied linear gradients to create a semi-transparent background overlay.

I would improve my Figma navigation skills for better design accuracy and refine my approach to layering elements without relying on negative margins.

What challenges did you encounter, and how did you overcome them?

One challenge was overlaying elements properly, such as making the .number partially overlap the .offer background. I solved this by using negative margins while ensuring responsiveness.

Another challenge was adding a transparent overlay to background images. I overcame this by using linear-gradient() in the background property to blend the overlay with the image.

Extracting accurate design details from Figma was also tricky. I improved this by carefully inspecting spacing, font sizes, and layout guides to match the design more precisely.

What specific areas of your project would you like help with?

Overlaying Elements: I used negative margins to make .number partially overlap .offer. Is there a better or more maintainable approach to achieve this effect?

Background Image Overlay: I applied a linear-gradient() overlay on background images. Is this the best practice, or are there alternative techniques that offer more flexibility?

Code Optimization: Are there any areas in my CSS that could be refactored for better readability and maintainability?