I'm encountering an issue with my code and I am unsure of how to fix it.
The current state of my code is different from the desired outcome
https://i.sstatic.net/Ti1kK.jpg
As you can see, the image above does not match the appearance of the image I aspire to achieve. How can I make the lower picture resemble the one I want?
Below are the snippets of my code:
CSS
.img-container {
height: 500px;
display: flex;
}
.img-big {
background-image: url('/assets/icons/people-crowd-child-kid-large.jpg');
background-size: cover;
flex: 1;
}
.img-small {
display: flex;
flex-direction: column;
flex: 0 0 50%;
}
.img-small1 {
background-image: url('/assets/icons/13-Cuidados-alternativos-en- familia.jpg');
background-size: cover;
flex: 50%;
}
.img-small2 {
background-image: url('/assets/icons/man-person-cute-young-large.jpg');
background-size: cover;
flex: 50%;
}
HTML
<div class="row">
<div class="col-md-8 img-container">
<div class="img-big img-responsive"></div>
</div>
<div class="col-md-4 img-small">
<div class="img-small1"></div>
<div class="img-small2"></div>
</div>