Skip to content
OverviewSolutions
17
Comments
28
Antonio Novak
@Nova988

All comments

  • Nelson Rosario•50
    @NellyisDevvSubmitted over 2 years ago

    • This challenge was pretty straight forward and I had a really fun time making it. It was a bit easier than the NFT component card in my opinion.

    • I think I did a pretty decent job making everything work I'm not sure if there is any part of my code I could have made much better from my current understanding.

    • Is there anything anyone thinks I can do to better improve my code. Or is there anything that would make my code much easier to read and or understand?

    Order Summary Component

    1
    Antonio Novak•480
    @Nova988Posted over 2 years ago

    Hello, nice card. I have some things to point out.

    • Try to put the card in a div box and center it with flexbox. Card is divided into pieces in the main component. If you create a div and replace the <main> styles on the div. Then center the card with flexbox on the <main>, your card should be centered. Now it is on the bottom of my screen plus I need to scroll down to see the card.
    • Change the font-weight of the price tag. It is to bold compared to the design.

    Hope it helps.

    Marked as helpful
    1
  • Antonio Novak•480
    @Nova988Posted over 2 years ago

    Hello,

    In 2022 you should try to avoid using var. Instead of var use let and const.

    Here you can read why you shouldn't use it : https://medium.com/@codingsam/awesome-javascript-no-more-var-working-title-999428999994.

    Hope it helps.

    0
  • Antonio Novak•480
    @Nova988Posted over 2 years ago

    Hello,

    You should look into responsiveness design. If you set the width to 950px, you can see that the dashboard is not fully in the window. You can try looking into grid with using minmax(). I also have a solution, not saying it is perfect, but maybe you can see how i have made it more responsive so it fits the window.

    Hope it helps.

    Marked as helpful
    1
  • Antonio Novak•480
    @Nova988Posted about 3 years ago

    Hello, Nice app!

    You style the cursor on the light/dark mode button to pointer. It will make it nicer

    0
  • Antonio Novak•480
    @Nova988Posted about 3 years ago

    Hello, nice card!

    • Try to add some padding between the image en text in the middle text box.
    • The change button needs to be an other color. I think you have the default color for the a tag.
    • Also add some box shadow on the payment button and add some spacing between the button and cancel order to fit the design.

    Hope it helps.

    0
  • Krista Calleja•300
    @KristaCallejaSubmitted about 3 years ago

    UPDATE take 2: Addressed accessibility errors; and design. Thanks for the tips FEM community!

    UPDATED: Added opacity.

    I am having a hard time finding the correct color for the primary-button hover. And also how to arrange the elements in the middle text box (including image). Any tips appreciated.

    semantic HTML, CSS

    2
    Antonio Novak•480
    @Nova988Posted about 3 years ago

    Hello,

    For the background color on hover: did you try opacity? And you need to reduce the width of the image in the middle text box. It is set to 100%

    Hope it helps

    Marked as helpful
    0
  • Antonio Novak•480
    @Nova988Posted about 3 years ago

    Hello,

    The background is not showing. Did you add it ?

    0
  • Antonio Novak•480
    @Nova988Posted about 3 years ago

    Nice card!

    Maybe just change the font-size and color of the socials text.

    0
  • Antonio Novak•480
    @Nova988Posted about 3 years ago

    Hello,

    Nice card just a few things you could change:

    • The background-color needs to be a different color.
    • Try to add some vertical padding on the Proceed payment button to match the design.

    Hope it helps!

    Marked as helpful
    0
  • Antonio Novak•480
    @Nova988Posted about 3 years ago

    Hello,

    You forgot some things:

    • Background image is not covering the whole background and it is repeating.
    • The description text needs to be a different color.
    • The 'change' button has a different font-weight and an underline.
    • The 'Proceed' button has a box-shadow and a different color.
    • You need to change the background of the annual plan container.
    • Try to center the card using flexbox.

    Hope it helps.

    Marked as helpful
    3
  • Antonio Novak•480
    @Nova988Posted about 3 years ago

    Hi,

    When i click the share button on mobile view. The card goes full width to adjust the size for the share menu. Maybe you can fix this?

    0
  • Antonio Novak•480
    @Nova988Posted about 3 years ago

    Hello,

    • Try to set the pointer cursor on the share button

    Nice Card! I have a question : How did you position the image in the card.

    0