This is a solution to the Loopstudios landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
- Solution URL: (https://github.com/ThomasAurelius/fm_loopstudios-landing-page-main/blob/master/README-template.md)
- Live Site URL: (https://thomasaurelius.github.io/fm_loopstudios-landing-page-main)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
Containers are your friend!
Possible tweak section 2 a little bit to make the inbetween sizes look a little more polished. Also, the active/hover states on the li's. The images from the documents show a shorter line than what I have made and I need to fiddle with it. Probably using ::after The end result works and produces the same layout, however I doubled up my html and used media queries to show hide duplicates, in order to put them in a different order, or to show a different size. I'd like to go back and refactor them to reduce the markup.
- Website - Thomas Aurelius
- Frontend Mentor - @thomasaurelius
- Twitter - @thomasaurelius4
Thank you frontendmentor for the challenge, and Kevin Powell for all the CSS videos!