This is a solution to the Equalizer landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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

Users should be able to:

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

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

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

Working on this project helped me identify areas in which I need to improve in terms of time management. Setting strict deadlines leads to better results. The second "a-ha" moment came when I attempted to use custom properties. I didn't use them frequently, but I'm glad I used them every now and then. Another thing I had to figure out was how to use relative position and design to replicate nearly the same layout. The last but not the least aspect of this project was to make icons change color when hovered over. This project was a lot of fun for me.

Here are some snippets of code:

<h2 class="fs-700">Premium EQ</h2>

.mobile-image {
    width: 270px;
    height: 555px;
    position: relative;
    top: -155px;
    left: -200px;
  }

.social-icon:hover {
    cursor: pointer;
    filter: invert(73%) sepia(55%) saturate(591%) hue-rotate(327deg) brightness(106%) contrast(102%);
    -webkit-filter: invert(73%) sepia(55%) saturate(591%) hue-rotate(327deg) brightness(106%) contrast(102%);
  }

When the opportunity arises, I would like to continue using the filter property to match the color of the image, background, or border that needs to be changed to the layout.

• Example resource 1 - This helped me for figuring out how tochange the icons color. I really liked this pattern and will use it going forward.
• Example resource 2 - This is an amazing video which helped me finally understand custom properties and utility classes. I'd recommend it to anyone still learning this concept.

• Website - Doina
• Frontend Mentor - @Doileo
• Twitter - @Dleovchin