Submitted 5 months ago

Responsive Component using flex box & media queries

sass/scss

Haley Underwood•190

@underhr

A solution to the Results summary component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of using SCSS during this project, as this was my first time. I definitely got a bit carried away using the nesting feature, so I'm looking forward to learning how to use that efficiently without making my code confusing.

What specific areas of your project would you like help with?

As usual, any input on how I can improve my code, make it cleaner, any ways I could have done anything more efficient!

Code

Please log in to post a comment

Community feedback

Marzia Jalili•7,310

@MarziaJalili

Posted 5 months ago

Great work!

A cherry on the top?

For a smoother color change we usually use the transition property, but unfortunately it doesn't work with non-solid colors like linear-gradient.

Therefore, we have to use the ::before or ::after pseudo elements.

Take the code below as an example for html:

<button>
  <!-- to prevent the text of being hidden we have to wrapp it inside an element -->
  <div>Continue</div>
</button>

Then, apply this in css:

button {
  position: relative;
  background: black; /* or the code of that dark blue color */
  cursor: pointer;
   
  /* ensure that the text doesn't get hidden */
  & > * {
    position: relative;
  }
}

button::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  background: linear-gradient(codes of the two or more colores);
  /* we will only show it on hover so now it will be hidden... */
  opacity: 0;
  transition: opacity .4s;
}

button:hover::before {
  /* make the pesudo element appear */
  opacity: 1;
}

This definitely works!

If you find any difficulties, let me know.

😎😎😎

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