<section class="locations bm-animate bm-fade-up 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">
<div class="row">
<div class="col-lg-6 pb-4">
<div class="location-card radius-15 p-5">
<div class="media">
<img alt="" src="/images/bitmap/location-1.jpg" />
<div class="overlay"></div>
</div>
<h3 class="text-white pb-4 m-0">HAMBURG</h3>
<p class="">Am Sandtorpark 2<br />20457 Hamburg<br />Germany<br /><br /><br /><a href='mailto:info@tcapital.com'>info@tcapital.com</a></p>
</div>
</div>
<div class="col-lg-6 pb-4">
<div class="location-card radius-15 p-5">
<div class="media">
<img alt="" src="/images/bitmap/location-2.jpg" />
<div class="overlay"></div>
</div>
<h3 class="text-white pb-4 m-0">FRANKFURT</h3>
<p class="">Marienturm, 29th Floor<br />Taunusanlage 9-10<br />60329 Frankfurt<br />Germany<br /><br /><a href='mailto:info@tcapital.com'>info@tcapital.com</a></p>
</div>
</div>
<div class="col-lg-6 pb-4">
<div class="location-card radius-15 p-5">
<div class="media">
<img alt="" src="/images/bitmap/location-3.jpg" />
<div class="overlay"></div>
</div>
<h3 class="text-white pb-4 m-0">LONDON</h3>
<p class="">1 Portland Pl<br />London W1B 1PN<br />United Kingdom<br /><br /><a href='mailto:info@tcapital.com'>info@tcapital.com</a></p>
</div>
</div>
<div class="col-lg-6 pb-4">
<div class="location-card radius-15 p-5">
<div class="media">
<img alt="" src="/images/bitmap/location-4.jpg" />
<div class="overlay"></div>
</div>
<h3 class="text-white pb-4 m-0">BERLIN</h3>
<p class="">Münzstraße 18<br />10178 Berlin<br />Germany<br /><br /><a href='mailto:info@tcapital.com'>info@tcapital.com</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="locations bm-animate bm-fade-up 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 locations}}
<div class="row">
{{#each locations}}
<div class="col-lg-6 pb-4">
<div class="location-card radius-15 p-5">
{{#if image}}
<div class="media">
<img alt="" src="{{ image }}"/>
<div class="overlay"></div>
</div>
<h3 class="text-white pb-4 m-0">{{ heading }}</h3>
<p class="">{{{ text }}}</p>
{{/if}}
</div>
</div>
{{/each}}
</div>
{{/if}}
</div>
</div>
</div>
</section>
{
"heading": "T. Capital is the strategic investment arm of Deutsche Telekom",
"text": "We provide more than capital – our investments come with the opportunity to access markets, expertise and partnerships that help businesses scale faster and smarter.",
"locations": [
{
"image": "/images/bitmap/location-1.jpg",
"heading": "HAMBURG",
"text": "Am Sandtorpark 2<br/>20457 Hamburg<br/>Germany<br/><br/><br/><a href='mailto:info@tcapital.com'>info@tcapital.com</a>"
},
{
"image": "/images/bitmap/location-2.jpg",
"heading": "FRANKFURT",
"text": "Marienturm, 29th Floor<br/>Taunusanlage 9-10<br/>60329 Frankfurt<br/>Germany<br/><br/><a href='mailto:info@tcapital.com'>info@tcapital.com</a>"
},
{
"image": "/images/bitmap/location-3.jpg",
"heading": "LONDON",
"text": "1 Portland Pl<br/>London W1B 1PN<br/>United Kingdom<br/><br/><a href='mailto:info@tcapital.com'>info@tcapital.com</a>"
},
{
"image": "/images/bitmap/location-4.jpg",
"heading": "BERLIN",
"text": "Münzstraße 18<br/>10178 Berlin<br/>Germany<br/><br/><a href='mailto:info@tcapital.com'>info@tcapital.com</a>"
}
]
}
// locations
section{
&.locations{
.location-card{
border: 1px solid $bordergrey;
aspect-ratio: 1/1;
position: relative;
overflow: hidden;
transition: all 0.4s;
@include media-breakpoint-up(md){
aspect-ratio: 9/5;
}
&:hover{
border: 1px solid $white;
box-shadow: 0 0 50px 0 rgba(255, 255, 255, 0.25);
}
}
.media{
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.overlay{
background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
h3, p{
position: relative;
z-index: 2;
}
}
}
No notes defined.