NFT Preview Card Component

Community feedback

• 

  Hamzat Lawal•560

  @EngineerHamziey

  Posted almost 3 years ago

  Hello there you have done a great job, I'll think:

  • the card need some margin-top and bottom because of short screens(in height) like mobile landscape, it almost enter the edge of the browser on landscape.
  • including the word "image" in your image alt attribute is like repetition because screen readers reads it as image already once they notice the img tag and that will make it say image twice.
  • and also images that are only meant for decoration do not need alt attribute, you can just add an empty alt like: alt=""
  • awwwn 😁 you used SCSS you are a hero 😂😂😂 since you using SCSS, you already have the power and you are strong enough to ignore that ugly stressful CSS variables 😆 also you don't need to declare it in the :root. now your code should look like this:

  /* 
  and once you declare it up here, it is is global, you can use it anywhere below it
  even in your partials(you will just have to import the partials below the variables )
  */
  $color-soft-blue: hsl(215, 51%, 70%);
  $color-cyan: hsl(178, 100%, 50%);
  $color-cyan-with-opacity: hsl(178, 100%, 50%, 0.5);
  $color-very-dark-blue-main-bg: hsl(217, 54%, 11%);
  $color-very-dark-blue-card-bg: hsl(216, 50%, 16%);
  $color-very-dark-blue-line: hsl(215, 32%, 27%);
  $color-white: hsl(0, 0%, 100%);
  /*notice the way i use/call the variable below
  one of the sweetest thing about SCSS variable is that, it doesn't compile to variable in
  your CSS it instead replate the variables with the values*/
  
  body {
    min-height: 100vh;
    font-family: "Outfit", sans-serif;
    background-color: var($color-very-dark-blue-main-bg);
    color: var($color-soft-blue);
    padding-inline: 1.5rem;
    display: grid;
    place-items: center;
  }
  

  I hope you found this ver helpful 😊😁 Happy coding 😊😁

  11
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello again Prabu, congratulations for your new solution!

  😎 I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code:

  1.You can create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  main>.nft-details {
      display: flex;
      flex-direction: column;
  }
  }
  

  2.The value you’ve used for the shadow make it too much dark and strong, to create a smooth shadow you need to give it less opacity and more blur try this value for example:

  main {
      box-shadow: rgb(0 0 0 / 0%) 0px 24px 38px, rgb(0 0 0 / 4%) 0px 20px 20px;
  }
  

  ✌️ I hope this helps you and happy coding!

  10
• 

  Daud Ismail Olakunle•20

  @Eminentdio

  Posted almost 3 years ago

  I admire your work, bro. I really wish I could be a guru like you.

  00