Неправильно отображаются карточки (flex)

Прохожу мини-курс по вёрстке сайта. Почему у меня неправильно отображаются карточки? Хотя код точно такой же, как на видео (3 раза перепроверил).

flex

.specialize-container {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.specialize-container h3 {
  font-size: 35px;
}

.specialize-container p {
  font-size: 24px;
  margin-bottom: 40px;
  margin-top: 20px;
}

.first-p {
  font-size: 20px;
  color: #fff;
}

.bottom-card {
  background: #414146;
  position: relative;
  top: -30px;
}

.specialize-cards {
  display: flex;
  justify-content: space-between;
}

.top-card-bgc {
  background-color: #FE2;
}
<main>
  <section class="specialize">
    <div class="specialize-container">
      <h3>We create quality design.</h3>
      <p>We specialize in Web Design / Development and Graphic Design</p>
      <div class="specialize-cards">
        <div class="card">
          <div class="topcard">
            <img src="img/1.png" alt="1">
          </div>
          <div class="bottom-card">
            <p class="first-p">Redesigning <br> With Personality</p>
          </div>
        </div>
      </div>

      <div class="specialize-cards">
        <div class="card">
          <div class="topcard">
            <div class="top-card-bgc">
              <img src="img/2.png" alt="2">
            </div>
          </div>
          <div class="bottom-card">
            <p class="first-p">Lorem ipsum dolor sit amet, <br> consectetur.</p>
          </div>
        </div>
      </div>

      <div class="specialize-cards">
        <div class="card">
          <div class="topcard">
            <div class="top-card-bgc">
              <img src="img/3.png" alt="3">
            </div>
          </div>
          <div class="bottom-card">
            <p class="first-p">Lorem ipsum dolor sit amet, <br> consectetur.</p>
          </div>
        </div>
      </div>

      <div class="specialize-cards">
        <div class="card">
          <div class="topcard">
            <div class="top-card-bgc">
              <img src="img/4.png" alt="4">
            </div>
          </div>
          <div class="bottom-card">
            <p class="first-p">Lorem ipsum dolor sit amet, <br> consectetur.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>


Ответы (1 шт):

Автор решения: Станислав Стрижаков

.specialize-container {
  width: 80%;
  margin: 0 auto;
  text-align: center;

}

.specialize-container h3 {
  font-size: 35px;
}

.specialize-container p {
  font-size: 24px;
  margin-bottom: 40px;
  margin-top: 20px;
}

.first-p {
  font-size: 20px;
  color: #fff;
}

.bottom-card {
  background: #414146;
  position: relative;
  top: -30px;
}

.specialize-cards {
  display: flex;
  justify-content: center;
}

.top-card-bgc {
  background-color: #FE2;
}
<main>
  <section class="specialize">
    <div class="specialize-container">
      <h3>We create quality design.</h3>
      <p>We specialize in Web Design / Development and Graphic Design</p>
      <div class="specialize-cards">
        <div class="card">
          <div class="topcard">
            <img src="img/1.png" alt="1">
          </div>
          <div class="bottom-card">
            <p class="first-p">Redesigning <br> With Personality</p>
          </div>
        </div>
      </div>

      <div class="specialize-cards">
        <div class="card">
          <div class="topcard">
            <div class="top-card-bgc">
              <img src="img/2.png" alt="2">
            </div>
          </div>
          <div class="bottom-card">
            <p class="first-p">Lorem ipsum dolor sit amet, <br> consectetur.</p>
          </div>
        </div>
      </div>

      <div class="specialize-cards">
        <div class="card">
          <div class="topcard">
            <div class="top-card-bgc">
              <img src="img/3.png" alt="3">
        </div>
      </div>
      <div class="bottom-card">
        <p class="first-p">Lorem ipsum dolor sit amet, <br> consectetur.</p>
      </div>
    </div>
  </div>

  <div class="specialize-cards">
    <div class="card">
      <div class="topcard">
        <div class="top-card-bgc">
          <img src="img/4.png" alt="4">
        </div>
      </div>
      <div class="bottom-card">
        <p class="first-p">Lorem ipsum dolor sit amet, <br> consectetur.</p>
      </div>
    </div>
  </div>
</div>
  </section>
</main>

Ответ кроется в строке <img src="img/1.png" alt="1"> В каждом блоке ссылка на несуществующий файл. В корневой папке должна быть папка img в которую должны быть вложены файлы 1.png , 2.png , 3.png ...

→ Ссылка