fylo-dark-theme-landing-page

Fylo dark theme landing page

Solution : Live Site URL

This is a solution to the Fylo dark theme landing page challenge on Frontend Mentor.

The challenge

Your challenge is to build out this landing page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Built with

• HTML
• CSS
• CSS Grid
• CSS Flexbox
• CSS Animations
• JavaScript

Experience, Challenges and Learning

The layout was big and had several components but most of it was easy to structure. There are few things I could not figure out how to do, I was unable to

• position the background image as per the specs.
• .feature_link has a svg icon with it. On hover, the link + the icon switch to color white, I am unable to change the svg's fill color to white with the link, it does only when hovered on the icon but not on the link.
• .img_quote' for bigger screen hides behind the .template_item`, no matter how I do the z-index, I am unable to move it behind the item box.

Apart from those hurdles everything else is as close to the specs as I can make it.

---

Pending tasks

• Live solution screenshot(s)
• Submit to frontendmentor and add Solution submitted at Frontend Mentor - Submission link