Skip to content
OverviewSolutions
12
Comments
3

Berlianto Ferdynand Pongbubun

@xvferdySt. Gentleman's Bakery200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

🎯 Organizing Media Query 🎯 Accessibility 🎯 HTML5 Semantic 🎯 CSS Layouting 🎯 And learning any State Management for Javascript

Latest solutions

View more solutions

Latest comments

  • Berlianto Ferdynand Pongbubun•200
    @xvferdy

    Hey this is cool man, are my comments gonna stay there forever?

  • Berlianto Ferdynand Pongbubun•200
    @xvferdy

    Great now the background is not repeated anymore 👌, but the text on the card is hard to see because it's now white.

    You can add this code below to tweak up the design,

    In the body selector, switch the property for color: var(--pale-neutral) to color: var(--de-neutral) to have the card text readable, then add background-color: var(--primary-color) and background-size: cover so the background have some color and covered all the body.

    body {
  margin: var(--card-width) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--smaller-font-size);
  background-image: url("../images/pattern-background-desktop.svg");
  background-repeat: no-repeat;
  color: var(--de-neutral); 
  height: 100%;
  width: 100%;
  line-height: 1.6;
  background-color: var(--primary-color);
  background-size: cover;
}
  • Berlianto Ferdynand Pongbubun•200
    @xvferdy

    So cool 👌

    Just add this little code so your button will have a hover effect like in the mockup:

    #grow2:hover {
  text-decoration: none;
}

.card_footer > .link__order:hover {
  color: var(--darkblue-color);
}
    Marked as helpful