I'm creating something like an online store, but I'm not able to stylize my HTML right, I'd like the <div>s
empty (I put div in the example just to illustrate, but it's actually images), get the price on I have created a different div with class .linha
, but what is happening is that I am not able to handle the positions well.
How do I do this?
An example of how I want to:
WhatIhavesofar:
.imagem {
background-color: black;
border-radius: 10px;
width:200px;
height:260px;
margin-left: 55px;
}
.linha{
bottom: 125px;
background-color: #2aabd2;
width: 200px;
height: 40px;
position: absolute;
border: 4px solid #99ccff;
border-radius: 0px 0px 10px 10px;
}
.pontocartao{
text-align: center;
font-family: "Arial Black";
color: #000;
}
<div style="margin-top:100px">
<div class="imagem"></div>
<div class="imagem linha"><p class="pontocartao">10 pontos</p></div>
<div class="imagem"></div>
<div class="imagem linha"><p class="pontocartao">50 pontos</p></div>
<div class="imagem"></div>
<div class="imagem linha"><p class="pontocartao">50 pontos</p></div>
<div class="imagem"></div>
<div class="imagem linha"><p class="pontocartao">50 pontos</p></div>
<div class="imagem"></div>
<div class="imagem linha"><p class="pontocartao">50 pontos</p></div>
</div>