NFT Preview Card Component Using Bootstrap

Hello, Sarah Grimm Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

• You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main class="card"></main>

This would help improve accessibility.

• active-state of img

<div class="item">
      <a class="hover-effect" data-overlay="rgba(52,58,64,.6)" target="_blank" rel="noreferrer"><span class="hover-effect-container">
          <span class="hover-effect-icon ">
            <span class="top-icon">
              <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
                </path>
              </svg>
            </span>
          </span>
        </span>
        <div class="p-2">
          <div class="ethereum-logo">
               <img src="./images/image-equilibrium.jpg" alt="" class="card-img-top">
         </div>
        </div>
      </a>
    </div>

• hover effect

.item {
    overflow: hidden;
    position: relative;
}


.hover-effect {
    display: block; 
    overflow: hidden;
    position: relative;
}

.hover-effect:before {
    background-color: rgba(44,45,48,0);
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}


.hover-effect-container {
    left: 50%;
    position: absolute;
    top: -1.25rem;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    transition: .4s;
}

.hover-effect-icon {
    color: #fff;
    display: inline-block;
    font-size: .75rem;
    text-align: center;
}

• active-state of h3 & p span

h1:hover, h2 a:hover{
    cursor: pointer;
    color: #25e6eb;;
}

a small transition will be more attractive.

• use modern CSS reset https://piccalil.li/blog/a-modern-css-reset/

• Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

• this is my solution of this challenge live,repo

I hope it will work. Happy coding.

Hey @sarahagrimm, great job on this project!

Some suggestions to improve you code:

• The hover isn't applied. Not sure this was a mistake. But here's a link with details on how to apply it:

https://www.w3schools.com/howto/howto_css_image_overlay.asp

• You want to wrap your "NFT image", "Equilibrium #3429" and "Jules Wyvern" in anchor tags <a>. This is because this are meant to be links that lead the user to another part of a site.

• To help keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…

It’ll look something like this:

:root {
  --primary-color: value;
  --secondary-color: value;
  --tertiary-color: value;
}

And to use the variables you’ll use the var() function. So it’ll look like this.

h1 {
color: var(—primary-color);
}

Heres are some articles regarding CSS Variables.

You can also take a look at my projects and see how I use it.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

https://www.w3schools.com/css/css3_variables.asp

Happy Coding!