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

Fatima S

@Zarah679100 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Responsive Four feature card section using HTML, CSS flexbox and grid

    #pure-css

    P
    Fatima S•100
    Submitted about 2 months ago

    I need help with grid responsiveness on mobile and tablet


    1 comment
  • Responsive product preview card component


    P
    Fatima S•100
    Submitted 4 months ago

    I would like to know how to apply border radius on my container. i tried doing that but its not showing on my design. I dont know why that is happening.


    1 comment
  • Responsive recipe page using html and css

    #pure-css

    P
    Fatima S•100
    Submitted 4 months ago

    I'd like to know how to create space between my list style(bullets) and the text preceding it.


    0 comments
  • Responsive social links profile using HTML & CSS

    #pure-css

    P
    Fatima S•100
    Submitted 4 months ago

    1 comment
  • Responsive blog preview card component using HTML & CSS

    #pure-css

    P
    Fatima S•100
    Submitted 4 months ago

    1 comment
  • QR card component using HTML and CSS

    #pure-css

    P
    Fatima S•100
    Submitted 4 months ago

    1 comment

Latest comments

  • Chidindu Emmanuel•130
    @heisemmanuell
    Submitted 2 months ago

    Responsive four card feature with html and css

    #pure-css
    1
    P
    Fatima S•100
    @Zarah679
    Posted about 2 months ago

    Hello! that's a pretty good solution you have there, but i noticed there isn't a breakpoint for tablets. You can use media queries to achieve that i.e. @media screen and (max-width: 760px)

  • sally-se•110
    @sally-se
    Submitted 4 months ago

    design and layout using CSS

    #pure-css
    1
    P
    Fatima S•100
    @Zarah679
    Posted 4 months ago

    hi Sally! great effort! although i think researching on and applying media queries would take your solution to the next level by making it as close to the design as possible and also making it more responsive. Also following the figma file design dimensions will give you a more accurate result.

    Marked as helpful
  • coder-dcoder•10
    @coder-dcoder
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    i am very happy about the fact that i did it. i have learn lot of things especially about git and GitHub.

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

    coloring and modify bullet points was challenging and managing sass file for 1st time was also challenging. but there are lots of good people out there on internet.

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

    maybe how to write good and effective code. or maybe with everything.

    Mobile-first solution using CSS Flexbox and Sass

    #sass/scss#pure-css
    1
    P
    Fatima S•100
    @Zarah679
    Posted 4 months ago

    Great work! i noticed some background colors do not match the one on the design. also on the nutrition section, theres no margin applied to the rows to give them a more spaced look. Here's another suggestion. try using flexbox and use space between for the justify content to make it more accurate.

  • NEMH•140
    @Baphomet-998
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    It took me less time to finish the design of this challenge. I tried to be as simple as possible though if there is a more efficient way, i would not mind trying.

    Mobile approach social links profile

    #pure-css
    1
    P
    Fatima S•100
    @Zarah679
    Posted 4 months ago

    Great work!

  • shivak818•120
    @shivak818
    Submitted 9 months ago

    html and css

    #pure-css
    1
    P
    Fatima S•100
    @Zarah679
    Posted 4 months ago

    Impressive work Shivak! your result looks very close to the design but i think you forgot to add one thing which is the box shadow property. It gives the dark edges at the right and bottom.

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

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