Just starting out in web development.
I currently have the following HTML:
<section class="boxes">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-4 box1">
<div class="d-flex justify-content-between">
<div class="boxes-caption-text d-inline-block">
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque
</div>
<div class="boxes-caption-number d-inline-block text-right">
<div class="border-top w-25 d-inline-block pt-2">01</div>
</div>
</div>
<div class="boxes-title text-center pt-6">Szkolenia</div>
<div class="boxes-arrow"></div>
</div>
<div class="col-12 col-lg-4 box2 d-flex h-100">
xx2
</div>
<div class="col-12 col-lg-4 box3">
xx3
</div>
</div>
</div>
</section>
And here is my CSS:
.boxes {
margin-top: 100px;
}
.boxes .box1 {
background-position: center;
background-size: cover;
background-image: url("/img/slide1.jpg");
color: white;
height: 872px;
}
.boxes .box2 {
background-position: center;
background-size: cover;
background-image: url("/img/slide2.jpg");
color: white;
height: 872px;
}
.boxes .box3 {
background-position: center;
background-size: cover;
background-image: url("/img/slide3.jpg");
color: white;
height: 872px;
}
.boxes-caption-text {
font-size: 16px;
padding: 50px 0 0 50px;
width: 40%;
}
.boxes-caption-number {
font-size: 16px;
width: 50%;
padding: 50px 50px 0 0;
}
.boxes-title {
font-size: 35px;
vertical-align: 50%;
}
.boxes-arrow {
display: inline-block;
margin-top: 1.5rem;
width: 55px;
height: 13px;
background-image: url("/img/white-arrow.png");
}
I am using Bootstrap 4 for this project.
I am aiming to achieve something similar to this example: https://ibb.co/WxHTfbM
This is my current preview (Only first box has been created): https://ibb.co/dfB1G07
I am facing issues with aligning the arrow at the center and placing it at the bottom along with the text "szkolenia" (I need to position it in the center of the div).
Any advice or assistance would be greatly appreciated!