Неправильно отображаются карточки (flex)
Прохожу мини-курс по вёрстке сайта. Почему у меня неправильно отображаются карточки? Хотя код точно такой же, как на видео (3 раза перепроверил).
.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 ...
