Submitted about 1 year ago

Great task for a "speed run" with a quick Grid layout + flyout menu

Ted Rinquest• 440

@climb512

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Agency landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Layout: How to structure elements in html when some sections change ordering between mobile/desktop.
Defining geometric shapes (right triangle) in css using border settings.
Pros and cons of using background-image: url(xyz); rather than <img src="xyz">
More practice with CSS-Grid and grid-areas.
Interesting hover effects using psuedo-elements.
Using svg color filters.

Community feedback

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord