How do I create a div with borders and position an image with a discount value above that div coming out of it and just below a centered button in the middle of the div as the attached image;
Image coming out of the div at the top and in the footer [closed]
-2
asked by anonymous 23.11.2017 / 18:05
1 answer
1
Take a look at the code, I think that's what you wanted ... But it's not just for you to copy and paste. Try to take a look at the code to see how things work etc. I myself just did it because I think it's a way for me to learn things myself, have this maindset tb []'s
html, body {
width: 100%;
height: 100%;
display: flex;
margin: 0;
padding: 0;
background-color: black;
}
.container {
margin: auto;
background-color: black;
border: 1px solid snow;
height: 200px;
width: 150px;
display: flex;
position: relative;
justify-content: center;
}
.produto {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
background: url(https://www.placecage.com/c/100/100) no-repeat center;
}
.valor{
position: absolute;
top: -20px;
left: -20px;
background-color: red;
padding: 0.5em;
color: #fff;
}
.comprar{
position: absolute;
bottom: -20px;
background-color: red;
padding: 0.5em;
color: #fff;
}<div class="container">
<div class="valor">$000,00</div>
<div class="produto"></div>
<div class="comprar">comprar</div>
</div>
23.11.2017 / 18:44