Skip to content
OverviewSolutions
14
Comments
3
Adritriz
@Adritriz

All comments

  • Adritriz•220
    @Adritriz

    Hello your solution is well thought out! I used your code as a lesson for my own mistakes made when tackling this challenge; I learned quite a bit from your creative solution. Two things I would like to point out:

    • Make sure your HTML file is semantically accurate in this case: <Header>and <Footer> should never be inside the <Main> tag

    • Your bg img in body at media queries 60rem+ can be improved by changing the background-size: 100vw 100vh; and adding height: 100vh;. The background img will fill the entire screen size.

    Hope that helps, if anything I learned much more from you ^^

    Marked as helpful
  • Karim Hussein•270
    @karim-abd-hussein
    What specific areas of your project would you like help with?

    How do I make a gradient color in a circle

    Results summary

    1
    Adritriz•220
    @Adritriz

    The layout looks great in different screen size ranges! Very well structured and readable. The only pointer I would give is to code for mobile design first so you don't run into layout issues for bigger projects. This is how to change the gradient for the backgrounds: <selector> { background-image: linear-gradient (to [direction] , color 1, color 2); }

    The directions can be to top, to bottom, to right, to left..... whatever way you want your gradient to go. Hope this helped!

    Marked as helpful
  • Adritriz•220
    @Adritriz

    Hi! You wanted some feedback on changing the color for the list marker, here's a simple way of styling markers:

    ul li::marker, ol li::marker { color: var(--NUTMEG-COLOR); }

    using the ::marker pseudo element you can style the markers easily.

    Marked as helpful