NFT Preview Card Solution | HTML + CSS

Community feedback

• 

  Krzysztof Rozbicki•370

  @KrzysztofRozbickiPosted almost 2 years ago

  Hey! Good Job! Few minor things:

  • instead of <hr> you can either use border-bottom for the element above, you can also use ::before or ::after pseudoelement, or simply made a css style for <div class="line"> that you made - as you can see <hr> is not looking as in design.

  • Your all overlay is transparent - together with the eye white icon. Instead you can set the div and background-colour to half transparent e.g. using rgba or hsla and then make it from opacity:0 to opacity:1 and then only the background of your overlay div will be transparent, but the eye icon itself will change itself from 0 to 1 and it will be plain white :)

  • I would check the width and height you have set up - because now on smaller screens (less than 340px the layout is not responsive) you can e.g. delete width on img class (default will be just fine) and e.g. change the width: 340px property in your container to max-width: 340px but this is only for full responsive and you would have to change quite a bit to make it work with your current design.

  All together great work! it looks very good.

  1
• 

  Felipe Salazar•140

  @andressalazar08Posted almost 2 years ago

  Hello Geo,

  First of all, I congratulate you on the delivery. I also tackled this challenge and I can suggest a few things to you.

  1.Try to include the README in a custom way in each repository. I see you have a few on your github and it would be helpful to anyone who visits your site if a description of each project is provided. Ideal also that in the README you use the links to the deploy.

  2.You can use variables as colors in root. This way it is easier to control multiple elements that share the color. It helps you to be more precise and avoid possible errors. Colors defined in root are accessed with var(). I share an article that compares the traditional way and the use of it: Link to variables in root

  3.You can use relative measures of length like rem in properties associated with length like width or height. Note that by default 1rem equals 16px. Because a pixel is an absolute measurement and rem is relative. If you use this, it can help not only for accessibility aspects but also for responsive design.

  4.One last detail related to the aspect of relevance in your html. The text "Our Equilibrium collection promotes balance and calm." it should be a <p> instead of a header.

  I think that for now is what I can offer you. Keep delivering projects. Happy coding!!

  0