Submitted over 2 years ago

Equalizer LP w/ HTML, Dart Sass and Animation

#accessibility#sass/scss

Yuko Horita• 645

@Sloth247

Preview site View code

This is a solution for...

Equalizer landing page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi there, thanks for visiting my solution. I added animation to main hero image and card and make all interactive elements accessible and focusable, including svg icons.

I still have to improve the following items;

The overlap of phone image and the card is not beautiful. I don't want to change the size of phone image by display size so much.
The animation is working but they start from translateY(0) position and move to the designated position at last. I don't want to let it happen but I could not figure out.

Any other feedbacks are welcome.

Community feedback

Grace• 27,950

@grace-snow

Posted over 2 years ago

Really nice work!

I’m viewing on mobile so can’t see any animation, but sounds like it could be a good choice for this challenge. (As long as animations/transitions are turned off for those who prefer-reduced-motion)

The html on this looks good to me. The only issue is some content is going off the side of the screen for me on mobile. I expect this is because of the explicit button width. It would be better to set them to width 100% so they fill the available space instead.

Nice job once that’s fixed though

Marked as helpful

Grace• 27,950

@grace-snow

Posted over 2 years ago

One more thing actually. I wouldn’t use the gap property on flex items yet! Just this week I had to pull it out of production because too many modern devices (many android phones) still can’t support it. There’s no way to feature query it either because the same browsers do support gap when used with css grid. For now, it’s still best to use margins for wider support

Marked as helpful

Yuko Horita• 645

@Sloth247

Posted over 2 years ago

@grace-snow Hi Grace, thank you for the helpful comments as always. I have fixed button and gap property. I didn't know about prefer-reduced-motion property! I looked at mdn and included in main.scss and mixins, but it does not seem to work by looking at it in dev tool in chrome. Could you kindly take a look my code? Yes, I included animation in tablet and desktop view so you don't see it in mobile. I have issues stated in above question, so I appreciate if you could help me on the issue by looking at in desktop. please don't worry if you don't have time! 👩‍🦰

LiBee• 390

@Li-Bee

Posted about 2 years ago

Hey this looks great. I am also trying to finish this at the moment. I do have a quick question is thats okay? I am new to website design and have been having problems with the background images.May I ask the following questions:

Why for the mobile image did you put the background image in the header and not in the <body> ?

.header {
  padding-top: 2.5rem;
  background-image: url("../../img/bg-main-mobile.png");
  background-repeat: no-repeat;
  background-position: bottom left;
}

For the tablet version and desktop version I noted you then put the background-image in the <main> may i ask why you did this?Also why did you increase the background-size to 150% for tablet and 130% for desktop? How did you come up with these measurements?

@media screen and (min-width: 40em) {
  body {
    background-image: url("../../img/bg-main-tablet.png");
    background-repeat: no-repeat;
    background-position: top -10rem left -20rem;
    background-size: 150%;
  }
}

@media screen and (min-width: 62.5em) {
  body {
    background-image: url("../../img/bg-main-desktop.png");
    background-repeat: no-repeat;
    background-position: top -15rem left -18rem;
    background-size: 130%;
  }

Please log in to post a comment

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