Skip to content
OverviewSolutions
14
Comments
5

OmarRefaee

@OmarRefaeeAlexandria, Egypt200 points

Hello! I'm a Front-End Web Developer, 16 years old. Work Hard Everyday! 🔥

I’m currently learning...

JavaScript 💡

Latest solutions

View more solutions

Latest comments

  • mohammedreddah•50
    @mohammedreddahSubmitted 9 months ago
    What specific areas of your project would you like help with?

    hi everyone!!

    1\ I faced a problem in positioning the marker of " li " elements, although i searched a lot still i didn't find a solution .

    2\ In active state exactly in the picture , i have positioned the eye picture using
    position : fixed ; & top : 14%;
    my question is: is there a better way & more Professional ?

    nft-card

    2
    OmarRefaee•200
    @OmarRefaeePosted 9 months ago

    Hi Mohammed,

    The solution for the first problem which is positioning of marker of li elements you should use list-style-position css property, but it will still not well positioned, so what i did in my solution is to use the icon as svg or img and give the parent container display flex so i can position them well.

    The solution for the active state eye picture is to use it in ::before selector with opacity 0 when hover change the opacity.

    and that's it good luck in the next project.

    Marked as helpful
    1
  • OmarRefaee•200
    @OmarRefaeePosted about 1 year ago

    Well Done 👏 You Did Great, i have some suggestion for you that can make the project better:

    • border-radius for the image.
    • instead of using card-wrapper and container just center the card using body element:
    body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
    • since you made media queries you need to make it more responsive add some work on mobile and medium screens and it will be perfect.
    • better than using padding inside the card use:
    .card {
    height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    and that's the feedback good luck in your career.

    Marked as helpful
    1
  • OmarRefaee•200
    @OmarRefaeePosted about 1 year ago

    Well Done Great Job 👏.

    • I noticed that the website is not mobile friendly you can do that using "Media queries".
    /* Small devices */
@media (max-width: 576px) { 
    .container {
        width: 300px;
    }
}

@media (min-width: 576px) {
    .container {
        width: auto;
    }
}

    Other Than That Perfect.👌

    Marked as helpful
    0
  • OmarRefaee•200
    @OmarRefaeePosted over 1 year ago

    Hi Mennatallah

    Well done doing the challenge.

    here are some suggestions:

    1 - it will look better if all card padding are 2rem instead of 2rem 1.5rem

    2 - Make the label display flex so the icon aligned with the text

    3 - and icon margin-right 0.5rem

    Good Luck in the next challenge.

    0
  • OmarRefaee•200
    @OmarRefaeePosted over 1 year ago

    Hi Mennatallah

    Great Work you did amazing

    Suggestion:

    • Use Github Pages as a hosting and add the URL in Github README file or in Github "About" section
    0