Skip to content
Submitted almost 3 years ago

Equalizer landing page

accessibility, bem, sass/scss
Galina McKoy•150
@GalinaM-G
A solution to the Equalizer landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! I would really appreciate if someone could help me with:

  1. I still find hard to understand a design file. Where is the correct position for the background decoration bg-pattern-1? Do I add it to body or .container?
  2. Is there an easy way to convert px to em or rem? I've just started using them.
  3. How to set an image correctly, so it would be perfectly responsive))?
  4. I applyed :hover on icons. How do I make the transition between colors smoother?
  5. What is the best way to make a responsive website? I've got an idea what to do, but when I need to match a website to a designer view of a responsive layout, I really struggle;)

Thank you a lot in advance!

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾Hello Galina , congratulations for your new solution!

    ❓ Answering your question:

    1.If you're using VSCODE there is a plugin that allows you to convert automatically px to rem. The name is pixel to rem. Here's the link:

    https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem

    Here's an online tool to convert: https://codebeautify.org/rem-to-px-converter

    2.Its better you add the background images ever in the bodyto make it stays underneath everything.

    3.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

    img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
  • Ndupu Adaeze•110
    @vermilion4

    Hi Galina, nicely done👏... regarding your 4th question, you can add an ease-in-out, ease-in or ease-out to your transition as per your preference.

    5th question: it depends on you really, most times you find yourself using flexbox or grid depending on if the layout is 1D or 2D, other times you might end up using frameworks like bootstrap and not to leave out your media queries. It's more like using what feels right at the moment?

    Marked as helpful

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