Trying to achieve a layout similar to the last element at the bottom of the footer] 1, but getting something like this instead: https://i.sstatic.net/lXazk.png
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-3 pad">
<img src="img/footer.png" class="img_footer img-responsive" alt="" />
</div>
<div class="col-md-9 col-sm-9">
<div class="row test">
<div class="col-md-8 col-lg-8">
<p class="apropos text-justify">A Propos</p>
<p class="text_footer text-justify">Créée en zzrklzkrjzqlqzjflq zedokq zd^q zcw qsmldkqzmdk qzmdpzqùdp qzmdkqzmdkzqmdkqmz lqmzkmqqkzmdqmkzdqmqmqmqzkmzqzdkmqzdqodzmoz</p>
</div>
<div class="col-md-4 col-sm-4">
<a href="contact.html" class="arrow_footer">Nous contacter<i class="icon-right-circle"></i></a>
</div>
</div>
</div>
</div>
</div>
Here's the CSS :
footer
{
width:100%;
height:100%;
background-color: #009900;
}
.test
{
position:relative;
}
.img_footer
{
height:100%;
}
.apropos, .text_footer, .arrow_footer
{
color:white;
}
.apropos
{
font-weight:bold;
font-size:28px;
text-transform:uppercase;
}
.pad
{
padding:0;
}
.arrow_footer
{
position:absolute;
bottom:0;
right:0;
z-index:3;
font-weight:500;
font-size:24px;
text-transform:uppercase;
text-decoration:none;
}
.contact_text
{
text-decoration:none;
}
.text_footer
{
margin-top:50px;
}
I'm new at coding so the structure may be a bit messy. I've tried using flexbox and align-items on the container (footer), but it didn't work as expected. Can anyone provide some guidance or help me understand where I might be going wrong? Thank you!