Skip to content
OverviewSolutions
8
Comments
2

HipsterShaggy

@Jakub-Gryczka170 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!

Latest solutions

View more solutions

Latest comments

  • HipsterShaggy•170
    @Jakub-Gryczka

    Hi,

    1. For me, on the first container I just applied background: linear-gradient() that goes from top to bottom, the same for the circle thing around the primary score. You can check how I solved it in my profile.
    2. I don't really understand the second question. To add HSL, you simply do hsl(hue, saturation, lightness) and the color shows up. Also I recommend the coolors website, it really helps with picking colors for your project. Once you have entered the site, click Explore trening palettes and paste your color in RGB format and it will show some well-matched colours with the specified.

    Hope it helps :D

    Marked as helpful
  • HipsterShaggy•170
    @Jakub-Gryczka

    Hi!

    1.As someone above me mentioned about the images. You're pointing to the images/ folder where all your images would be, but you didn't uploaded this folder into Github. That's why the images aren't showing. You should do path either image-product-desktop.jpg or upload the images folder to github and move all of the assets into that folder. This should work.

    2.The font-family isn't working for brand name because the text is in <pre> tag, which has different font and isn't inheriting it by default. Just set the font-family: inherit on the <pre> and it would work :D.

    3.To place the image next to the text I would recommend using Flexbox. Use it on the parent element (in your case on the-button). Moreover you could perfectly center those items. It would be like that:

    .the-button {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1em;
}
    • display: flex sets the display to flex, allowing you to use flexbox on this item.
    • justify-content allows you to justify the items along main axis which is x-axis (from left to right in this case)
    • align-items allows you to align items along cross axis, which is y-axis (from top to bottom again, in that case)
    • gap as the name shows, creates a gap between flex-items. You could also use it on grid elements. You should learn flexbox, so those properties will be clear, I just wrote some simplification for you to understand why those things happens.

    4.After opening the website, the main part of website isn't in the center. It's aligned with hard-coded margin-top and margin-left. Again, better solution for this is flexbox. Add those lines to make it perfectly centered:

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 95vh;
}

    min-height is a property for minimum height of an element. In this case, 95vh and the vh stands for viewport height, so of the screen height.

    Also, there's some HTML semantics lacks, I recommend Kevin Powell's latest video on YouTube: https://www.youtube.com/watch?v=K_EVuLegRZ0&t=875s

    Hope it helps!

    Marked as helpful