Image exiting outside the div at the top and footer

Asked

Viewed 1,396 times

-2

How do I create a border div and position an image with a discount value above that div coming out of it and just below it centralized a button in the middle of the div as the attached image;

inserir a descrição da imagem aqui

html5 css3 bootstrap-3 div

  • what you already have of code ready or tried to do ?

  • @Viniciusshiguemori I still have nothing I need only a raw example even if it follows this logic!

  • I imagined, well dear here the goal is to help you with problems in the code or concept/knowledge not give the ready answer, after all this would be wrong for your learning, it would be good to have a studied in the bootstrap classes in your https documentation://getbootstrap.com/Docs/3.3/Getting-Started/ or a website that I have used a lot https://www.w3schools.com/bootstrapstrapstrap/default.asp, before publishing questions like this from an https://pt.meta.stackoverflow.com/questions/1084/howto ask a question

  • @Viniciusshiguemori so I’ve created several site in the market using bootstrap already read all the documentation of bootstrap the problem is not this is that I’m having doubts on how to do the mentioned above, I know the forum policies.

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 just did it myself because I think a way for myself to learn things, 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>

Browser other questions tagged html5 css3 bootstrap-3 div

You are not signed in. Login or sign up in order to post.