Skip to content
OverviewSolutions
14
Comments
5
OmarRefaee
@OmarRefaee

All comments

  • mohammedreddah•50
    @mohammedreddah
    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
    @OmarRefaee

    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
  • OmarRefaee•200
    @OmarRefaee

    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
  • OmarRefaee•200
    @OmarRefaee

    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
  • OmarRefaee•200
    @OmarRefaee

    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.

  • OmarRefaee•200
    @OmarRefaee

    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