Skip to content
Submitted almost 2 years ago

nft

Prithivi Raj•140
@prithiviraj275
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

all feedbacks are welcome, thank you

Community feedback

  • Hatem Henchir•530
    @hatemhenchirPosted almost 2 years ago

    Hey Prithivi Raj, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • replace <div class="card"> with <section class="card"> and <div class="attribution"> with <footer class="attribution"> for semantic page. You can read more about semantic HTML here: HTML Semantic Elements.
    • The background image should be in the body, so move all the main style to the body and just add this line in your class main margin: 0 auto; .
    • Consider using rem for font size. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
    • I'm notice that the card not have a box shadow. This code, it will help you to do it box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75); -webkit-box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75); -moz-box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75); .

    You can try an online box shadow generator like this Box Shadow CSS Generator.

    The rest is great!

    Great work, and happy coding.

    2
  • fResult•90
    @fResultPosted almost 2 years ago

    Hello, @prithiviraj275.
    I have some suggestions to improve your submission. You could use this snippet to reset the style of margin and box-sizing.

    * {
   margin: 0;
   box-sizing: border-box;
}

    When you reset the margin to 0px, then <body>, <p>, <h1>, <h2>, ..., <h6>, and etc., will be gotten rid of default margin, then you can add margin or gap by urself.

    Next, the box-sizing: border-box; will change the box-sizing from content- box (default) to border-box which lets you easier to style padding without concern about the sum of sizing of padding and content in the box.

    References:

    Happy coding 😍

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord