Hello, Frontend Mentor Coding community. I have almost completed this challenge but I have a question, How to use a more appropriate color combination for the first container, and how to add just Hsl color in an easy method?
Hi,
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.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
I still have no idea why any of my pictures won't load on the website. I also don't know why the font-family didn't work on the brand name (I removed it before uploading it) and I don't know how to place the cart icon on the button next to the text in a proper manner so any tips would be appreciated :)
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!