Hey everyone, I’m a newbie in the world of web development and I recently put together something using bootstrap 5. If you want to check it out, here’s the link to my project on CodePen.
I have a specific request though - instead of having icons displayed on the front of the card, I’d like to showcase images. And when the card is flipped, I want the content to remain intact, just like I’ve demonstrated in the CodePen link. Is there anyone who could help me achieve this?
Below is the CSS code I'm currently working with:
.services .icon-box {
// Your CSS code goes here
}
// More CSS code...
And here is a snippet of the HTML code for reference:
<!-- Your HTML goes here -->
<section id="services" class="services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch flip-card" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box flip-card-inner" style="text-align: center;">
<div class="flip-card-front">
<div class="icon"><i class="bx bxl-dribbble"></i></div>
<h4><a href="">Lorem</a></h4>
</div>
<div class="flip-card-back">
<p>Modi nostrum vel laborum...</p>
</div>
</div>
</div>
// More HTML snippets...
</div>
</div>
</section>
If you’re able to assist, thank you so much!