https://i.sstatic.net/WthBW.png
I'm struggling to generate the necessary code to display images properly on my website. Despite numerous attempts, I can't seem to position the images correctly and it's becoming quite challenging...
Below is the code I have been experimenting with:
<div class="row">
<div class="col-lg-9 col-md-9">
<div class="row adventure-detail-card">
<!--Grid column-->
<div class="col-lg-9 col-md-8 gd-cont">
<img src="../../../assets/adventures/resort/resort1.jpg" class="img-cont"
alt="">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-4 gd-cont">
<img src="../../../assets/adventures/resort/resort2.jpg" class="right-img mb-4 mt-4"
alt="">
<img src="../../../assets/adventures/resort/resort3.jpg" class="right-img"
alt="">
</div>
</div>
<div class="col">
</div>
</div>
</div>
</div>
Css here:
.img-cont {
width: 100%;
height: 100%;
background-size: cover;
flex: 1;
}
.right-cont {
display: flex;
flex-direction: column;
flex: 0 0 50%;
}
.gd-cont {
padding: 0px 0px, 0px 0px;
}
.right-img {
width: 190px;
height: 190px;
background-size: cover;
flex: 50%;
}