Skip to content
OverviewSolutions
13
Comments
8
Agnar
@agnar-nomad

All comments

  • Agnar•220
    @agnar-nomadSubmitted about 2 years ago

    This one was fairly simple after the previous experience.

    I will appreciate all critique and help. Didn't quite manage to complete the box shadow and the background to 100%, but there are more important things in life.

    Profile Card Component solution

    1
    Agnar•220
    @agnar-nomadPosted about 2 years ago

    EDIT: I think I did better than I expected. What wonders a night's sleep does.

    0
  • Agnar•220
    @agnar-nomadPosted about 2 years ago

    hey Edmond.

    congrats on the solution. I appreciate your class names, they are well descriptive.

    A few notes:

    • your description text needs a little more breathing space, on the other hand, your buttons have too much padding
    • double check the how the headings should look according to the design
    • no biggie, but your <main> could have been the card container, no need for another level of complexity
    • the buttons are supposed to take you to another page, the anchor tag is more appropriate, considering that only CSS is supposed to be used for this task
    • consider using shorthand variants of certain properties, such as margins, border radii and similar
    0
  • Agnar•220
    @agnar-nomadPosted about 2 years ago

    Hi,

    congrats on the challenge completion.

    • I wonder why you did not use the proper fonts, even though you imported them.
    • Your class names should be more descriptive, tied to the element they represent.
    • Fixed lengths in px are the enemy of responsive design. Consider using relative units on element widths and heights.
    • You should always start headlines with an h1 element, not h2, so that it semantically makes sense and increases accessibility.
    • You are repeating yourself when setting up button properties - a LOT
    • You are repeating yourself a LOT in the media queries too, I suggest to look into how media queries only change certain aspects of the base code, otherwise they also read the base code.
    Marked as helpful
    0
  • Nikola•30
    @Nikola-MiticSubmitted about 2 years ago

    What did I do right or wrong?

    What did I write that was unecessary and what didn't I write that was necessary?

    Solution to QR code excercise

    2
    Agnar•220
    @agnar-nomadPosted about 2 years ago

    Hey Nicola,

    Good job on the solution!

    As Alex mentioned, make sure to adjust the size of the card compared to the document body and adjust border radii. I believe you wanted to use margin on the main element instead of body.

    Take a look at the font-size ratio between <h1> and <p> in the design. Yours does not match it. I think using <br> is the best way to distribute your lines. Rather consider setting max-widths on the proper block elements, which also helps with responsiveness later when building mobile layouts (if thats what you build in the later stages)

    Marked as helpful
    1
  • Agnar•220
    @agnar-nomadPosted about 2 years ago

    Hey friend, congrats on your solution.

    A few notes: make sure to increase padding a little on the main card (or margin on the elements) considering spacing out elements using flexbox properties instead of manually giving margin values in pixels

    To your issue, i would try: remove the right and bottom properties from .overlay give .overlay display:block consider wrapping the image in a container and placing the overlay relative to this container, not relative to the image itself

    Marked as helpful
    1
  • Agnar•220
    @agnar-nomadPosted about 2 years ago

    Hey,

    congrats on your solution. A few notes: make sure to revise the font that you used here and revise the padding on the main card (or margins on the components inside)

    The easiest way to do a simple overlay is detailed here https://www.w3schools.com/howto/howto_css_image_overlay.asp very quick and simple.

    You can check out my solution too, where I used ::before and ::after pseudoelements to solve this.

    0
  • Juan Ayala•170
    @juan26468818Submitted about 2 years ago

    Hello! Hope everyone is doing well.

    I need to say that giving the color to the image in the hover gave me a hard time, even now that I managed to give the color, I know it's not 100% the color it should be, I would love if anyone could help me through this so I know what I'm doing wrong, and how can I improve it!

    NFT preview card component

    1
    Agnar•220
    @agnar-nomadPosted about 2 years ago

    Hey, a couple notes: you should definitely increase the padding on the container (the card)

    make sure to style the price ETH text exactly as in the design

    Cover image on hover: use the same colour as is given for the fancy text, use cyan with opacity 0.5 I used the ::before and ::after pseudoelements to create that effect, but it might be easier to do it with another <div> inside your icon-view-container, making it position absolute and placing it above the nft image. A quick Google search should give you all needed.

    Marked as helpful
    0
  • Quindara Corbin•70
    @dquindara8Submitted about 2 years ago

    Can you let me know if I formatted the @media queries correctly for the screen sizes of 375px and 1440px? I added 768px for those screens. Is there a way to make all screen sizes responsive at once using HTML and CSS instead of catering to each viewport breakpoints? Also, how to get the item/s in the center of the page using either Flexbox or CSS or by using margins and padding. Do you use margin and padding on the body and HTML elements? How do you get the item on the page to be centered on various screen sizes for responsiveness? Thanks very much.

    Product Preview Card Component using HTML, CSS and Flexbox

    1
    Agnar•220
    @agnar-nomadPosted about 2 years ago

    I can't comment on the code since the link is broken to it.

    Centering is fairly easy with Flexbox, use justify-content and align-items, both centre. These properties should be used on the body element.

    0