NFT Preview Card with CSS Custom Properties

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey!

  My suggestions:

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <section>
        //...
     </section>
  </main>
  

  • I also suggest you center the component on the page with Flexbox, by giving the parent element <main> the following properties:

  /* Card container */
  main {       /* <---Add */
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
   }  
  
  /* card */
  .card{
      width: 350px;
      /* margin: 10% auto;      <---Rmove */
      background-color: var(--Very-dark-blue2);
      padding: 1.25em;
      border-radius: 1em;
      box-shadow:1em 1em 50px
      rgb(23, 18, 36);
  }  
  

  Hope this is helpful to you... Keep coding👍

  Marked as helpful

  1

  ---

  

  CodeyBrodey•150

  @CodeyBrodeyPosted over 2 years ago

  @Bayoumi-dev Thanks! Very helpful.

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  I see that you have some problems with your code because of which you can't visualize your images.

  Try to use when creating the paths for your images to start with src="./...." for example.

  <img alt="Equilibrium logo" id="equilibrium-img" src="./content/images/image-equilibrium.jpg">

  This will take the origin of the folder you are in and start searching for the file. This will help you a lot and then if you can update the report to see what the errors are because I think you had put another link.

  Marked as helpful

  0