Witam serdecznie,
Robię mały projekt w Bootstrap 4 i napotkałem na mały problem.
Mam taką stronę (podgląd problemu) http://serwer1356363.home.pl/_nauka/
Chciałbym uzyskać taki efekt: https://ibb.co/Hddz7gG
Tj na pomarańczowych "planszach" ma się znaleŹć:
- strzałka (jest dodana w kodzie - ale nie wyświetla się na stronie),
- napis "poznaj ofertę" ma być na dole pomarańczowego boxa
Mój aktualny kod:
<section class="front-banners">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 pb-4 mb-md-1">
<div class="card bg-dark text-white">
<a href="/produkty"><img class="card-img" src="/img/front1.jpg" alt="Kuchnie"></a>
<a href="/produkty">
<div class="card-img-overlay front-banner-overlay">
<h5 class="card-title">Kuchnie </h5>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
<p>Poznaj ofertę</p>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-6 pb-4 mb-md-1">
<div class="card bg-dark text-white">
<a href="/produkty"><img class="card-img" src="/img/front2.jpg" alt="Szafy"></a>
<a href="/produkty">
<div class="card-img-overlay front-banner-overlay">
<h5 class="card-title">Szafy </h5>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
<p>Poznaj ofertę</p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
.front-banner-overlay{
background-color:#FFC700;
width: 180px;
height: 180px;
margin: 20px;
}
.front-banner-overlay h5{
font-family: Inter;
font-style: normal;
font-weight: 500;
font-size: 36px;
}
.front-banner-overlay p{
font-family: Inter;
font-style: normal;
font-size: 13px;
line-height: 16px;
}
W jaki sposób mogę to zrobić?
Bardzo proszę o pomoc :)