Can anyone review this code I did cause I can't find why its is affecting the top container?
<style>
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.pulsing-photo {
animation: pulse 1.5s infinite;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.center-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.center-container img,
.center-container p {
margin: 0;
}
</style>
<div class="container">
<img class="pulsing-photo" src="https://i.imgur.com/g6GtMTW.jpg" alt="Your Image" />
<p></p> <!-- Blank space paragraph -->
<font color="4fb9af">CHRO </font>
<font color="BA001">NOIR </font>
<p></p> <!-- Blank space paragraph -->
<div class="container">
<img src="https://stickershop.line-scdn.net/stickershop/v1/product/12111142/LINEStorePC/main.png;compress=true" alt="Image description" />
<p><font color="4fb9af">KANAE(かなかな)</font></p>
</div>
<div class="container center-container">
<img src="https://m.chibi-akihabara.com/31007-home_default/nijisanji-figurine-kuzuha-nendoroid.jpg" alt="Image description" />
<p><font color="BA001">KUZUHA(くずは)</font></p>
</div>
</div>