Image
Ajoru image grid is a simple construction which allows you to create a responsive layout for your images.
Grid
<div class="gallery ">
<!-- gallery-item -->
<figure class="gallery__item gallery__item--1 mb-0">
<img src="../assets/images/about/showyourtradesui-img-1.jpg" alt="Gallery image 1" class="gallery__img rounded-3">
</figure>
<!-- gallery-item -->
<figure class="gallery__item gallery__item--2 mb-0">
<img src="../assets/images/about/showyourtradesui-img-2.jpg" alt="Gallery image 2" class="gallery__img rounded-3">
</figure>
<!-- gallery-item -->
<figure class="gallery__item gallery__item--3 mb-0">
<img src="../assets/images/about/showyourtradesui-img-3.jpg" alt="Gallery image 3" class="gallery__img rounded-3">
</figure>
<!-- gallery-item -->
<figure class="gallery__item gallery__item--4 mb-0">
<img src="../assets/images/about/showyourtradesui-img-4.jpg" alt="Gallery image 4" class="gallery__img rounded-3">
</figure>
<!-- gallery-item -->
<figure class="gallery__item gallery__item--5 mb-0">
<img src="../assets/images/about/showyourtradesui-img-5.jpg" alt="Gallery image 5" class="gallery__img rounded-3">
</figure>
<!-- gallery-item -->
<figure class="gallery__item gallery__item--6 mb-0">
<img src="../assets/images/about/showyourtradesui-img-6.jpg" alt="Gallery image 6" class="gallery__img rounded-3">
</figure>
</div>Image Collage
<div class="pt-5 bg-white">
<div class="container-fluid px-md-5">
<!-- row -->
<div class="row">
<div class="col-lg-6 col-12 d-none d-lg-block ">
<div class="row">
<!-- col -->
<div class="col-md-4 col-4 px-1">
<!-- image -->
<div class="bg-cover rounded-3 mb-2 h-20rem" style="background-image:url(../assets/images/avatar/avatar-1.jpg);"></div>
<div class="bg-cover rounded-3 mb-2 h-18rem" style="background-image:url(../assets/images/avatar/avatar-3.jpg);"></div>
</div>
<!-- image -->
<div class="col-md-4 col-4 px-1">
<div class="bg-cover rounded-3 mb-2 h-16rem" style="background-image:url(../assets/images/avatar/avatar-2.jpg);"></div>
<div class="bg-cover rounded-3 mb-2 h-17rem" style="background-image:url(../assets/images/avatar/avatar-4.jpg);"></div>
</div>
<!-- image -->
<div class="col-md-4 col-4 px-1">
<div class="bg-cover rounded-3 mb-2 h-20rem" style="background-image:url(../assets/images/avatar/avatar-5.jpg);"></div>
<div class="bg-cover rounded-3 mb-2 h-19rem" style="background-image:url(../assets/images/avatar/avatar-7.jpg);"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="row">
<div class="col-lg-4 col-4 px-1 ">
<!-- image -->
<div class="bg-cover rounded-3 mb-2 h-14rem" style="background-image:url(../assets/images/avatar/avatar-6.jpg);"></div>
<div class="bg-cover rounded-3 mb-2 h-22rem" style="background-image:url(../assets/images/avatar/avatar-8.jpg);"></div>
</div>
<!-- image -->
<div class="col-lg-4 col-4 px-1 ">
<div class="bg-cover rounded-3 mb-2 h-22rem" style="background-image:url(../assets/images/avatar/avatar-10.jpg);"></div>
<div class="bg-cover rounded-3 mb-2 h-24rem" style="background-image:url(../assets/images/avatar/avatar-11.jpg);"></div>
</div>
<!-- image -->
<div class="col-lg-4 col-4 px-1 ">
<div class="bg-cover rounded-3 mb-2 h-14rem" style="background-image:url(../assets/images/avatar/avatar-12.jpg);"></div>
<div class="bg-cover rounded-3 mb-2 h-16rem" style="background-image:url(../assets/images/avatar/avatar-13.jpg);"></div>
<div class="bg-cover rounded-3 mb-2 h-20rem" style="background-image:url(../assets/images/avatar/avatar-14.jpg);"></div>
</div>
</div>
</div>
</div>
</div>
</div>Image Collage with text
Join the team, we’re growing fast!
We’re looking for incredible people to build on our strong momentum. Help us power the brands you know and love.
See All Open Positions69 open positions across and all offices and all teams.
<div class="py-8 bg-white">
<div class="container ">
<div class="row align-items-center">
<!-- para -->
<div class="col-xl-6 col-lg-6 col-12">
<div class="mb-5 ">
<h1 class="display-3 mb-4 fw-bold ">Join the team, we’re
growing fast!</h1>
<p class="lead mb-4 pe-xl-12 ">We’re looking for incredible people to build on our
strong momentum. Help us power the brands you
know and love.</p>
<a href="#position" class="btn btn-primary ">See All Open Positions
</a>
<p class=" mt-4 mb-0">69 open positions across and <a href="#">all offices</a> and <a href="#">all
teams</a>.</p>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="row">
<!-- images -->
<div class="col-md-4 col-4 px-1">
<div class="bg-cover rounded-3 mb-2 h-12rem" style="background-image:url(../assets/images/avatar/avatar-6.jpg); "></div>
<div class="bg-cover rounded-3 mb-2 h-18rem" style="background-image:url(../assets/images/avatar/avatar-8.jpg);"></div>
</div>
<!-- images -->
<div class="col-md-4 col-4 px-1">
<div class="bg-cover rounded-3 mb-2 h-18rem" style="background-image:url(../assets/images/avatar/avatar-10.jpg);"></div>
<div class="bg-cover rounded-3 mb-2 h-18rem" style="background-image:url(../assets/images/avatar/avatar-11.jpg);"></div>
</div>
<!-- images -->
<div class="col-md-4 col-4 px-1">
<div class="bg-cover rounded-3 mb-2 h-13rem" style="background-image:url(../assets/images/avatar/avatar-12.jpg);"></div>
<div class="bg-cover rounded-3 mb-2 h-13rem" style="background-image:url(../assets/images/avatar/avatar-13.jpg);"></div>
<div class="bg-cover rounded-3 mb-2 h-13rem" style="background-image:url(../assets/images/avatar/avatar-14.jpg);"></div>
</div>
</div>
</div>
</div>
</div>
</div>