Skip to content
OverviewSolutions
22
Comments
33

Nabil Wasir

@NabilWasirChittagong,Bangladesh680 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!

I’m currently learning...

Javascript

Latest solutions

View more solutions

Latest comments

  • Nabil Wasir•680
    @NabilWasirPosted over 2 years ago

    Great work as usual

    0
  • Nabil Wasir•680
    @NabilWasirPosted over 2 years ago

    Here is how you can improve your solution:

    • Use <main></main> instead of div for the container

    • Your width and the card's height and width are way large in both the desktop and mobile versions. It doesn't even fit the mobile screen. Make the width and height smaller

    • You didn't implement the hover states, so implement them

    • The image at the bottom should have the same width and height. It should have enough border-radius to make it a circle and have a border of around 1px solid (the color of the design)

    • Use * { margin: 0 ; padding: 0 ; } to get rid of the default padding/margin that the browser put on the body

    And if you have any difficulty understanding the things I am saying, visit my solution to this challenge and have a look at the codes

    Hopefully, my feedback is helpful! :)

    0
  • Nabil Wasir•680
    @NabilWasirPosted over 2 years ago

    Here is how you can improve:

    • Using <main></main> instead of <picture></picture>

    • Use the similar icons given in the design and wrap them in a <div></div> container and give the div border of the icon color to have the circle shown in the design around the icons.

    • You have also forgotten the hover states on the button and icons. You can apply the hover effect using the <svg></svg> given in the icon file itself, you just have to click the icon file to get the <svg></svg> of that icon. Then in CSS use: svg path { fill: white; (you can use the color of the icon if it's not given) }

    • Then you apply the hover state svg path: hover { fill: cyan; (Input the hover color) }

    • In the mobile version you haven't centered the social icons, you can use a container for them and make it display: flex; justify-content: center;

    • Use some margin-top on the heading of the mobile version.

    And If you have any difficulty understanding what I am saying, then just visit my solution to this challenge.

    Hopefully my feedback is helpful! :)

    Happy Coding

    Marked as helpful
    0
  • Nabil Wasir•680
    @NabilWasirPosted over 2 years ago

    Great work

    Here is how you can improve your solution :

    • Use display: flex; justify-content: center; align-items: center; height: 100vh; ( Without it you can't center anything using align-items: center; )

    • You can use <main></main> instead of div/span to get rid of accessibility issues

    • Make the font-weight of the text to normal, they look slightly bolder

    • Use button:hover { background-color: transparent; border: 1px solid white( Use the color of the design ); transition: 400ms; color: white( Use the color of the design); }

    And if are having any issues understanding my feedback then watch my solution to this challenge to you clear your doubts

    Hopefully, you will find my feedback helpful.

    0
  • Nabil Wasir•680
    @NabilWasirPosted over 2 years ago

    Great work, well done

    You can get rid of accessibility issues by replacing div/span of the main container with <main></main>

    Marked as helpful
    0
  • Nabil Wasir•680
    @NabilWasirPosted over 2 years ago

    Great work on the desktop version

    You can use <main></main> instead of div/span to remove accessibility issues. And you haven't made the mobile version, If you want help you can visit my solution to this challenge.

    Hopefully, you will find my feedback helpful. If you do find my feedback helpful don't forget to mark this comment helpful!

    Marked as helpful
    0
View more comments