I’m writing a code to make a sort of card. Each of the cards has a main div (card1, card2, card3 in the code below), and a smaller div at the top to contain the title (card1i, card2i, card3i in the code below). Here is the code for that and here are pictures:
<div id="howitworks">
<div id="cards">
<div id="card1">
<div id="card1i">
</div>
</div>
<div id="card2">
<div id="card2i">
</div>
</div>
<div id="card3">
<div id="card3i">
</div>
</div>
</div>
</div>
(css)
#cards {
margin: auto;
width: 85%;
display: flex;
justify-content: space-evenly;
}
#card1 {
border-radius: 5px;
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(122, 112, 112, 0.8);
}
#card2 {
border-radius: 5px;
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(122, 112, 112, 0.8);
}
#card3 {
border-radius: 5px;
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(122, 112, 112, 0.8);
}
#card1i {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
width: 100%;
height: 20%;
background-color: rgb(193, 197, 134);
}
#card2i {
width: 100%;
height: 20%;
background-color: rgb(193, 197, 134);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#card3i {
width: 100%;
height: 20%;
background-color: rgb(193, 197, 134);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
Here is what it looks like before I add a title to the card:
But when I add a paragraph, or an h2 or any other element to the smaller divs(card1i, card2i, card3i), the divs come down.
Please is there something I’m doing wrong?