Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
4

Meryem El Karati

@Cristal32Rabat, Maroc150 points

Software Engineer, aiming to master Frontend and develop my creativity. 🍀

I’m currently learning...

Pure CSS, JS, Responsive Design, Mobile First Workflow, Color Theory, ...

Latest solutions

  • Responsive Signup Newsletter with Javascript


    Meryem El Karati•150
    Submitted about 1 year ago

    1 comment
  • Interactive Article Preview Component with smooth appearing share bar


    Meryem El Karati•150
    Submitted about 1 year ago

    1 comment
  • Responsive Recipe Page with Flex and Grid Layouts


    Meryem El Karati•150
    Submitted about 1 year ago

    1 comment
  • Responsive Interactive Social Links Profile with Flexbox


    Meryem El Karati•150
    Submitted about 1 year ago

    1 comment
  • Responsive Blog Preview Card


    Meryem El Karati•150
    Submitted about 1 year ago

    1 comment
  • QR code component with CSS flexbox


    Meryem El Karati•150
    Submitted about 1 year ago

    1 comment

Latest comments

  • nco0305•10
    @nco0305
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    The way how it turned out

    What challenges did you encounter, and how did you overcome them?

    I could not use and centre the flex box, so I tried the grid as an alternative.

    What specific areas of your project would you like help with?

    Any other alternative ways to create the same component? I can't figure out why the image shows broken in GitHub live page link.

    QR code using CSS grid system

    4
    Meryem El Karati•150
    @Cristal32
    Posted about 1 year ago

    It seems the issue with the image not showing up is the the path:

    In index.html:

    <img src="images/image-qr-code.png" alt="QR Code" width="280" height="280">

    It should be :

    <img src="Images/image-qr-code.png" alt="QR Code" width="280" height="280">

    since the name of the correspondant folder is 'Images' with a capital I

    Marked as helpful
  • Christopher Mothuli•80
    @Sirch9
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Its my second project.

    What challenges did you encounter, and how did you overcome them?

    git commands...  I uploaded many documents. Double, actually, and I'm wondering how? My image isn't loading; I don't know how.

    What specific areas of your project would you like help with?

    Anything, including comments and criticisms, all welcomed.

    Centered QR code using transform: translate for alignments, & margins.

    #cube-css#accessibility
    1
    Meryem El Karati•150
    @Cristal32
    Posted about 1 year ago

    Hi, it seems there is an issue with accessing the QR code image in the index.html.

    It should be:

    <img src="assets/image-qr-code.png" class="qr" alt="image-of-QRcode">
    

    or

    <img src="./assets/image-qr-code.png" class="qr" alt="image-of-QRcode">
    

    Instead of:

    <img src="/assets/image-qr-code.png" class="qr" alt="image-of-QRcode">
    
    Marked as helpful
  • AnaghaInowei•110
    @AnaghaInowei
    Submitted about 1 year ago

    QR code project

    2
    Meryem El Karati•150
    @Cristal32
    Posted about 1 year ago

    It seems Github Pages didn't detect the index.html file, and instead is showing the content of the README file of the project. The index file should be moved to the root of the directory so Github Pages can detect it and deploy it instead.

    Marked as helpful
  • Michel•50
    @DEV-Cafe096
    Submitted about 1 year ago
    What challenges did you encounter, and how did you overcome them?

    How it works with API

    Advice Generator

    1
    Meryem El Karati•150
    @Cristal32
    Posted about 1 year ago

    This is fantastic! I absolutely love how you added your own twist to it with the background image and the choice of colors! The only remark I can find is to make the die button be more visible and interactive, add a pointer to it or make its color change on hover. Otherwise this is already very beautiful!

    Marked as helpful

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