Skip to content
OverviewSolutions
11
Comments
4

101Amine

@101AmineRabat, Morocco260 points

Hello, my name is Amine. I am a front-end enthusiast developer from morocco. I am a mid-senior in ReactJS , I've been trying to expend my knowledge on that topic. I enjoy competitive programming and I am interested in learning more about web development.

I’m currently learning...

Typescript, Good practices to adapt when working on a reactjs project, clean code

Latest solutions

View more solutions

Latest comments

  • 101Amine•260
    @101Amine

    Hello @serFar , congratulation on completing this challenge!

    1 - There's a way to center your container without using the position absolute and stuff, you can add .container { align-self: center; } and then add this to your body

    body {
       height: 100vh;
       display: flex;
       align-content: center;
       justify-content: center;
}

    2 - Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but all sizes as well.

    3 - If you want to add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%. but i don't think you can use it with the background-img:

    img {
mix-blend-mode: multiply;
opacity: 82%;}

    And just a last tip that was given to me too, add the correct size for the container max-width: 1110px to dont have it growing more than it should.

    I hope this helps you and happy coding!

    Marked as helpful
  • 101Amine•260
    @101Amine

    • Hello @SamedLepir, congratulation on completing this challenge!

    1 - The image doesn't show because u'll need to add a dot before the image path, './images/..'

    2 - I think it would be much better to just use the img tag directly <img src='..' alt='..' />

    3 - And as Mr @Hyron mentioned in one of his comments, instead of using margin to center the div you can use flexbox

    body {
    background-color: hsl(212, 46%, 89%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    Hope this was helpful for you, happy coding

    Marked as helpful
  • 101Amine•260
    @101Amine

    👨‍💻 Hello @solomonade1, Congratulations on completing this challenge!

    • Good work, you just need to decrease the fonts a little bit and add more padding to make it look better, In the p tag p { padding-block: 1rem; }

    • Use relative units as rem or em instead of px to improve your performance, because a pixel is not responsive and that's why it's better to use REM

    Hope that was helpful for you, have a good day

  • 101Amine•260
    @101Amine

    I've actually struggled hard how to get image to look like that, with the purple layout.

    I would love if someone knows how to do it with css, I've tried mix-blend-mode : multiply but it just made it almost completely invisible.

    Thanks for that challenge it was pretty interesting, see you in the next one!