ThomasAurelius / fm_loopstudios-landing-page-main

Example mock-up of a music website.

Frontend Mentor - Loopstudios landing page solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

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

Screenshot

Links

• 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)

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

Containers are your friend!

Continued development

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.

Useful resources

Author

• Website - Thomas Aurelius
• Frontend Mentor - @thomasaurelius
• Twitter - @thomasaurelius4

Acknowledgments

Thank you frontendmentor for the challenge, and Kevin Powell for all the CSS videos!