<section class="investment-cards bm-animate bm-fade-in pt-5 pb-5">
<div class="container-xxl pt-md-5 pb-md-5">
<div class="row">
<div class="col-xxl-10 offset-xxl-1">
<h2 class="text-white">Selected investments</h2>
<div class="row gx-4 pt-5 pb-5">
<div class="col-lg-3 col-sm-6 mb-4">
<div class="inner radius-10">
<div class="overlay"></div>
<div class="media">
<img alt="card" src="/images/bitmap/card-1.jpg" />
</div>
<div class="content d-flex flex-column align-items-center justify-content-center">
<img class="logo mb-4" alt="logo" src="/images/bitmap/logo-1.png" />
<p class="small text-center">Conversational AI search engine which transforms the search experiance into an intuative and transparent consumer experience.</p>
<a class="btn btn-tertiary" target="" href="/">Find out more</a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-4">
<div class="inner radius-10">
<div class="overlay"></div>
<div class="media">
<img alt="card" src="/images/bitmap/card-2.jpg" />
</div>
<div class="content d-flex flex-column align-items-center justify-content-center">
<img class="logo mb-4" alt="logo" src="/images/bitmap/logo-2.png" />
<p class="small text-center">Conversational AI search engine which transforms the search experiance into an intuative and transparent consumer experience.</p>
<a class="btn btn-tertiary" target="" href="/">Find out more</a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-4">
<div class="inner radius-10">
<div class="overlay"></div>
<div class="media">
<img alt="card" src="/images/bitmap/card-3.jpg" />
</div>
<div class="content d-flex flex-column align-items-center justify-content-center">
<img class="logo mb-4" alt="logo" src="/images/bitmap/logo-3.png" />
<p class="small text-center">Conversational AI search engine which experiance into an intuative and transparent consumer experience.</p>
<a class="btn btn-tertiary" target="" href="/">Find out more</a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-4">
<div class="inner radius-10">
<div class="overlay"></div>
<div class="media">
<img alt="card" src="/images/bitmap/card-4.jpg" />
</div>
<div class="content d-flex flex-column align-items-center justify-content-center">
<img class="logo mb-4" alt="logo" src="/images/bitmap/logo-4.png" />
<p class="small text-center">Conversational AI search engine which transforms the search experiance into an intuative and transparent consumer experience.</p>
<a class="btn btn-tertiary" target="" href="/">Find out more</a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-4">
<div class="inner radius-10">
<div class="overlay"></div>
<div class="media">
<img alt="card" src="/images/bitmap/card-5.jpg" />
</div>
<div class="content d-flex flex-column align-items-center justify-content-center">
<img class="logo mb-4" alt="logo" src="/images/bitmap/logo-5.png" />
<p class="small text-center">Conversational AI search engine which the search experiance into an intuative and transparent consumer experience.</p>
<a class="btn btn-tertiary" target="" href="/">Find out more</a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-4">
<div class="inner radius-10">
<div class="overlay"></div>
<div class="media">
<img alt="card" src="/images/bitmap/card-6.jpg" />
</div>
<div class="content d-flex flex-column align-items-center justify-content-center">
<img class="logo mb-4" alt="logo" src="/images/bitmap/logo-6.png" />
<p class="small text-center">Conversational AI search engine which transforms the into an intuative and transparent consumer experience.</p>
<a class="btn btn-tertiary" target="" href="/">Find out more</a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-4">
<div class="inner radius-10">
<div class="overlay"></div>
<div class="media">
<img alt="card" src="/images/bitmap/card-7.jpg" />
</div>
<div class="content d-flex flex-column align-items-center justify-content-center">
<img class="logo mb-4" alt="logo" src="/images/bitmap/logo-7.png" />
<p class="small text-center">Conversational AI search engine which transforms the search experiance into an intuative and transparent consumer experience.</p>
<a class="btn btn-tertiary" target="" href="/">Find out more</a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-4">
<div class="inner radius-10">
<div class="overlay"></div>
<div class="media">
<img alt="card" src="/images/bitmap/card-8.jpg" />
</div>
<div class="content d-flex flex-column align-items-center justify-content-center">
<img class="logo mb-4" alt="logo" src="/images/bitmap/logo-8.png" />
<p class="small text-center">Conversational AI search engine which transforms the search and transparent consumer experience.</p>
<a class="btn btn-tertiary" target="" href="/">Find out more</a>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" href="/components/preview/portfolio.html">SEE OUR PORTFOLIO</a>
</div>
</div>
</div>
</section>
<section class="investment-cards bm-animate bm-fade-in pt-5 pb-5">
<div class="container-xxl pt-md-5 pb-md-5">
<div class="row">
<div class="col-xxl-10 offset-xxl-1">
{{#if heading}}
<h2 class="text-white">{{{ heading }}}</h2>
{{/if}}
{{#if cards}}
<div class="row gx-4 pt-5 pb-5">
{{#each cards}}
<div class="col-lg-3 col-sm-6 mb-4">
<div class="inner radius-10">
<div class="overlay"></div>
<div class="media">
<img alt="card" src="{{ image }}"/>
</div>
<div class="content d-flex flex-column align-items-center justify-content-center">
{{#if logo}}
<img class="logo mb-4" alt="logo" src="{{ logo }}"/>
{{/if}}
<p class="small text-center">{{{ text }}}</p>
<a class="btn btn-tertiary" target="" href="{{ link }}">Find out more</a>
</div>
</div>
</div>
{{/each}}
</div>
{{/if}}
{{#if cards}}
<a class="btn btn-primary" href="{{ cta-link }}">{{ cta-text }}</a>
{{/if}}
</div>
</div>
</div>
</section>
{
"heading": "Selected investments",
"cards": [
{
"image": "/images/bitmap/card-1.jpg",
"logo": "/images/bitmap/logo-1.png",
"text": "Conversational AI search engine which transforms the search experiance into an intuative and transparent consumer experience.",
"link": "/"
},
{
"image": "/images/bitmap/card-2.jpg",
"logo": "/images/bitmap/logo-2.png",
"text": "Conversational AI search engine which transforms the search experiance into an intuative and transparent consumer experience.",
"link": "/"
},
{
"image": "/images/bitmap/card-3.jpg",
"logo": "/images/bitmap/logo-3.png",
"text": "Conversational AI search engine which experiance into an intuative and transparent consumer experience.",
"link": "/"
},
{
"image": "/images/bitmap/card-4.jpg",
"logo": "/images/bitmap/logo-4.png",
"text": "Conversational AI search engine which transforms the search experiance into an intuative and transparent consumer experience.",
"link": "/"
},
{
"image": "/images/bitmap/card-5.jpg",
"logo": "/images/bitmap/logo-5.png",
"text": "Conversational AI search engine which the search experiance into an intuative and transparent consumer experience.",
"link": "/"
},
{
"image": "/images/bitmap/card-6.jpg",
"logo": "/images/bitmap/logo-6.png",
"text": "Conversational AI search engine which transforms the into an intuative and transparent consumer experience.",
"link": "/"
},
{
"image": "/images/bitmap/card-7.jpg",
"logo": "/images/bitmap/logo-7.png",
"text": "Conversational AI search engine which transforms the search experiance into an intuative and transparent consumer experience.",
"link": "/"
},
{
"image": "/images/bitmap/card-8.jpg",
"logo": "/images/bitmap/logo-8.png",
"text": "Conversational AI search engine which transforms the search and transparent consumer experience.",
"link": "/"
}
],
"cta-text": "SEE OUR PORTFOLIO",
"cta-link": "/components/preview/portfolio.html"
}
// investment cards
section{
&.investment-cards{
.inner{
aspect-ratio: 1/1;
overflow: hidden;
position: relative;
border: 1px solid $black;
transition: all 0.4s;
@include media-breakpoint-up(md){
aspect-ratio: 10/9;
}
&:hover{
box-shadow: 0 0 50px 0 rgba(255, 255, 255, 0.25);
border: 1px solid $bordergrey;
.overlay{
opacity: 1;
}
.content{
.btn, p{
opacity: 1;
}
.logo{
transform: translateY(0);
}
}
}
}
.overlay{
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.99) 100%);
opacity: 0;
transition: all 0.4s;
}
.media{
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
.content{
position: absolute;
z-index: 3;
left: 0;
bottom: 0;
width: 100%;
.logo{
width: 55%;
transition: all 0.4s;
@include media-breakpoint-up(md){
transform: translateY(3rem);
}
@include media-breakpoint-up(lg){
transform: translateY(9rem);
}
@include media-breakpoint-up(xl){
transform: translateY(8rem);
}
@include media-breakpoint-up(xxl){
transform: translateY(7rem);
}
}
p{
width: 75%;
height: 85px;
}
.btn{
margin: 1rem 0 2.5rem 0;
}
.btn, p{
@include media-breakpoint-up(md){
opacity: 0;
transition: all 0.4s;
}
}
}
}
}
No notes defined.