index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link rel="stylesheet" href="css/styles.css" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <title>Frontend Mentor | NFT preview card component</title>
  </head>
  <body>
    <!--Main conteiner -->
    <main class="mainContainer">
      <!--The image container-->
      <div class="imageContainer">
        <!--The hover container-->

        <div class="colorContainer">
          <div class="eyeContainer"></div>
        </div>
      </div>

      <!--The section of the principal header and paragraph-->
      <section class="textContainer">
        <!--The header container-->
        <header class="textHeader">
          <h1>Equilibrium #3429</h1>
        </header>

        <!--The paragraph-->
        <p class="paragraphContainer">
          Our Equilibrium collection promotes balance and calm.
        </p>
      </section>

      <div class="statsContainer">
        <div class="imageNFT">
          <img src="images/icon-ethereum.svg" alt="icon ethereum" />
        </div>

        <div class="priceContainer">0.041 ETH</div>
        <div class="imgTime">
          <img src="images/icon-clock.svg" alt="icon clock" />
        </div>
        <time class="timeContainer">3 days left</time>
      </div>

      <div class="line"></div>
      <!--And the footer container-->
      <footer class="creatorContainer">
        <div class="imageFooter"></div>

        <p class="creator">
          Creation of <span class="text">Jules Wyvern</span>
        </p>
      </footer>

      <!--End of the card an i will see if all the elements are place correctly-->
    </main>

    <!-- <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div> -->
  </body>
</html>