Having a hard time getting images

I’m trying to link 3 images to my #text element and every time I put a url address into the src attribute i’m getting a broken image. I’ve spent over 2 hours on this. I’ve never had any issues getting images. But for some reason I cant get any images to show.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css" />
  <title>Original Trombones</title>
</head>
<body>
  <header id="header">
    <nav id="nav-bar">
      <img id="header-img" src="https://novibonjovi.github.io/product-landing-page/img/original_trombones.png" alt="original trombone logo" width="300">
      <a href="#fetures" class="nav-link">Fetures</a>
      <a href="#how_it_works" class="nav-link">How it works</a>
      <a href="#pricing" class="nav-link">Pricing</a>
    </nav>
  </header>
  <body>
    <div id="heading">
    <form id="form">
      <h1>Handcrafted, home-made masterpieces</h1>
      <input id="email" placeholder="Enter your email address" type="email" size="30" required></input>
      <input id="submit" type="submit" value="GET STARTED" href="https://www.freecodecamp.com/email-submit"></input>
    </form>
    </div>
    <div id="text">
      <img id="materials" src="" alt="materials-logo">
      <img id="shipping" src="" alt="shipping-logo">
      <img id="quality" src="" alt="quality-logo">
    </div>
  </body>
</body>
</html>
/* file: styles.css */

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.115 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

Can you give an example of links you have tried?

I must of tried a hundred different links from google images. I finally went on Pixabay and for some reason the links to images work from there.