How can i get my images to show up on my page?

Question? Can someone help me and tell me what I'm doing wrong I'm trying to build this traveling website I can push my code to GitHub if that's easier to look at my code for help? I was trying to upload my picture of my code but I don't see where I can upload it so I'm just going to include my codes below my images are not showing up in my (card section)and I think I'm coding it right. & Can you only use keyframes once? I have it formatted right online 173, like the one above it for my button and it's not working, when I did the (keyframes) for the button section it works but it's working with the keyframes for cloud animation

My images for the (card section) are not showing for some reason when I remove the card and bracket on line 226 in CSS the images show up but when I put the code back like it suppose to be images disappear.

{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Poppins', sans-serif;
}

h1 {
  font-size: 2.6rem;
}

li,
button,
label,
input,
p {
  font-size: 2rem;
}

h2 {
  font-size: 4.8rem;
}

h3 {
  font-size: 3rem;
  font-weight: normal;
}

h4,
h5 {
  font-size: 2.8rem;
}

a {
  color: white;
  text-decoration: none;
}

button {
  padding: 2rem 6rem;
  background: #4c6e97;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  transition: background 0.5s ease-in-out;
  animation: button 2s infinite;
  
}

button:hover {
  background: #27394e;
}

/* Nav Section With HERO */

.main-head {
  background: #131c27;
  color: white;
  z-index: 3;
  position: sticky;
  top: 0%;
}

nav {
  display: flex;
  width: 90%;
  margin: auto;
  padding: 2rem;
  min-height: 10vh;
  align-items: center;
  flex-wrap: wrap;
}

nav ul {
  display: flex;
  flex: 1 1 40rem;
  justify-content: space-around;
  align-items: center;
  list-style: none;
}

#logo {
  flex: 2 1 40rem;
  font-family: 'Pattaya', sans-serif;
  font-weight: 400;
}

.hero {
  min-height: 90vh;
  background: linear-gradient(rgba(0, 0, 0, 0.8), transparent),
      url('./images/img/landing-page.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero h3 {
  padding: 5rem;
}

/* Locations SECTION */

#locations {
  min-height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), transparent),
  url("/images/img/new-york-page.png");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.locations-head {
  width: 90%;
  margin: auto;
}

.locations-head h2 {
  padding: 1rem 0rem;
  text-decoration: underline;
  /* Optional 
text-decoration-thickness: 0.5rem;
*/
}

.locations-head h3 {
  padding: 4rem 0rem;
  background: linear-gradient(#131c27, #663b34);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cloud {
  position:absolute ;
  top: 100%;
  left: 40%;
  overflow: hidden;
  
 
}

.moving-cloud-1 {
  animation: cloudAnimation 3s infinite alternate ease-in-out;
  
}

.moving-cloud-2 {
  top: 20%;
  z-index: -1;
  opacity: 0.5;
  animation: cloudAnimation 3.5s infinite alternate ease-in-out;
}

/*Button Animation*/
@keyframes button{

  0%{
  background: lightblue;
}
25%{
  background: teal;
}
100%{
  background: purple;
}

/* Cloud Animation */

 @keyframes cloudAnimation,button{
  from{
      transform: translate(10%,-10%);
  }
  to{
      transform:translate(0%,0%);
  }
 }



HMTL Codes Below

  enter co<!DOCTYPE html>

<html lang="en">
  <head>
      <meta charset="UTF-8" />

      <meta http-equiv="X-UA-Compatible" content="IE=edge" />

      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <link rel="stylesheet" href="style.css" />

      <link rel="preconnect" href="https://fonts.gstatic.com" />

      <link rel="preconnect" href="https://fonts.gstatic.com" />

      <link
          href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,200&display=swap"
          rel="stylesheet"
      />

      <meta
          name="description"
          content="Travelly is a travel agency website that help you pick out your holiday vacation"
      />

      <meta name="robots" content="index,follow" />

      <link rel="icons" href="/icons/icons/airplane.svg" />

      <title>Travelly | Traveling Agency</title>
  </head>

  <body>
      <header class="main-head">
          <nav>
              <h1 id="logo">Travelly</h1>
              <ul>
                  <li><a href="#locations">Locations</a></li>
                  <li><a href="#benefits">Benefits</a></li>
                  <li><a href="#contact">Contact</a></li>
              </ul>
          </nav>
      </header>

      
          <!-- Top section Image, Waterfall image attached to Css -->
         <main>
          <section class="hero">
              <h2>Travel Beyond Limits.</h2>

              <h3>
                  Start your travel at an affordable price with Travelly<br />Contact us
                  now below.
              </h3>

              <button>Book Now</button>
          </section>

          
          
 <!-- Middle section Image, new-york city image attached to Css    -->
          <section id="Locations">
              <header class="Locations-head">
                  <h2>The Perfect Traveling Experience</h2>
                  <img src="/images/img/new-york-page.png" alt="">

                  <h3>
                      We cover everything from picking the perfect hotel,<br />
                     flight and traveling destination.
                  </h3>
                <img src="/images/img/cloud.png" class="moving-cloud-1 cloud" />
                  <!-- cloud animation    -->
                <img src="/images/img/cloud.png" class="moving-cloud-2 cloud" />
                  <!-- cloud styles    -->
              </header>
          </section>

          
        <!-- Benefit section   --> 
        <section id="benefits">
       <header class="benefits-head">
       <h2>The Perfect Travel</h2> 
      <h3> We cover everything for picking the perfect hotel<br /> to flight and destination.</h3> 
      </header> 

               <!-- Cards attached to the benefit section    --> 

          <div class="cards"> 

              <div class="card"> 

                  <div class="card-icon"> 

                      <img src="/icons/icons/route-solid.svg" alt="route"> 
                     </div> 
                    <h4>Travel</h4> 
                <p>Travel in over 250 countries with no effort.</p> 
             </div> 
          </div>   

           

          <div class="card"> 

              <div class="card-icon"> 

                  <img src="/icons/icons/bed-solid.svg" alt="bed"> 
          </div> 
      <h4>Hotel</h4> 
           <p>Hotels located near popular areas.</p> 
           </div> 

                <div class="card"> 

              <div class="card-icon"> 

                  <img src="/icons/icons/plane-departure-solid.svg" alt="plane"> 

              </div> 

              <h4>Fly</h4> 

              <p>Flight included in every purchased trip.</p> 
            </div> 
         </div>  
        </section> 
      </section>
         

         <!-- Form Contact section   --> 
         <section id="contact">
          <div class="form-wrapper">
              <header class="form-head">
                  <h2>Contact Us</h2>
         </header>

         <form action="https://formspree.io/mzbbyqbo" method="POST">
             <div class="name-form">
                 <label for="name">Name</label>
                 <input id="name" type="text" name="name" required>
              </div>


             <div class="email-form">
              <label for="email">Email</label>   
              <input id="email" type="email" required name="_replyto">
             </div>
             <button value="Send" type="submit">Submit</button>
         </form>
        </div>
        </section>
        </main>

         <!-- Footer section   --> 

           <div class="footer-wrapper">
               <h5>Travelly &copy;</h5>
              </div>
           </footer>
</body>
</html>```