Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
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

  • Huddle | HTML | SCSS

    #sass/scss

    101Amine•260
    Submitted over 2 years ago

    0 comments
  • News homepage

    #sass/scss

    101Amine•260
    Submitted over 2 years ago

    0 comments
  • clipboard-landing-page


    101Amine•260
    Submitted over 2 years ago

    0 comments
  • Fylo landing page with two column layout

    #sass/scss

    101Amine•260
    Submitted over 2 years ago

    0 comments
  • Notifications page using ReactJS

    #sass/scss#react

    101Amine•260
    Submitted over 2 years ago

    0 comments
  • Stats preview using HTML & CSS

    #sass/scss

    101Amine•260
    Submitted over 2 years ago

    2 comments
View more solutions

Latest comments

  • Sérgio Faria•70
    @serFar
    Submitted over 2 years ago

    Stats Preview Card

    4
    101Amine•260
    @101Amine
    Posted over 2 years ago

    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
  • Samed•10
    @SamedLepir
    Submitted over 2 years ago

    QR Code Challange

    4
    101Amine•260
    @101Amine
    Posted over 2 years ago

    • 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
  • Solomon Adegboyega•10
    @solomonade1
    Submitted over 2 years ago

    Responsive QR code Page using HTML and CSS

    #accessibility
    2
    101Amine•260
    @101Amine
    Posted over 2 years ago

    👨‍💻 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
    Submitted over 2 years ago

    Stats preview using HTML & CSS

    #sass/scss
    2
    101Amine•260
    @101Amine
    Posted over 2 years ago

    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!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub