<div class="c-showcase ">
<div class="c-showcase__logo">
<img src="../../images/georgian-airways.png" alt="Georgian airways">
</div>
<div class="c-showcase__image">
<img src="../../images/showcase-tbilisi.jpg" alt="Vola a Tbilisi">
</div>
<div class="c-showcase__footer">
<p class="c-showcase__title">Vola a Tbilisi</p>
<p class="c-showcase__subtitle">Voli diretti, due volte alla settimana con <strong>Georgian Airways</strong></p>
<a href="#">
Scopri di più
<svg class="">
<use xlink:href="#"></use>
</svg></a>
</div>
</div>
<div class="c-showcase {{ modifier }}">
{{#if logo}}
<div class="c-showcase__logo">
<img src="{{ path logo.path }}" alt="{{ logo.alt }}">{{#if logo.company-of-the-month }}<img class="company-otm"
src="/images/dest-of-the-month.svg" alt="Company of the month" />{{/if}}
</div>
{{/if}}
{{#if bg-path}}
<div class="c-showcase__image">
<img src="{{ path bg-path }}" alt="{{{ title }}}">
</div>
{{/if}}
<div class="c-showcase__footer">
<p class="c-showcase__title">{{{ title }}}</p>
<p class="c-showcase__subtitle">{{{ subtitle }}}</p>
{{#if link}}
{{> @link link }}
{{/if}}
</div>
</div>
{
"bg-path": "/images/showcase-tbilisi.jpg",
"title": "Vola a Tbilisi",
"subtitle": "Voli diretti, due volte alla settimana con <strong>Georgian Airways</strong>",
"logo": {
"path": "/images/georgian-airways.png",
"alt": "Georgian airways"
},
"link": {
"text": "Scopri di più",
"url": "#",
"modifier": "",
"svg": true
}
}
.c-showcase {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
color: #fff;
text-align: center;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.c-carousel--equalH & {
flex: 1;
}
// To fix #326
.c-carousel--shopping & {
min-height: remify(400px);
}
.c-starting-grid & {
@include min-screen(bp(phablet)) {
padding-bottom: remify(120px);
}
}
& > * {
position: relative;
z-index: 1;
}
}
.c-showcase__logo {
display: flex;
margin: 0 auto auto auto;
height: remify(80px);
align-items: center;
justify-content: center;
align-items: flex-start;
padding: remify(4px);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 4;
img {
width: auto;
height: 100%;
object-fit: contain;
@include min-screen(bp(phablet)) {
max-height: 100%;
width: unset;
}
}
}
.c-showcase__image {
max-height: remify(300px);
width: 100%;
overflow: hidden;
border-radius: remify(24px) remify(24px) 0 0;
img {
width: 100%;
object-fit: cover;
min-height: remify(300px);
}
}
.c-showcase__footer {
width: 100%;
padding: remify(24px);
background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
}
.c-showcase__title {
// font-weight: fw(light);
@include font-scale(level-6);
color: primary(night, 100);
}
.c-showcase__subtitle {
color: #000;
margin-bottom: remify(24px);
@include font-scale(level-3);
&:before,
&:after {
content: "\00a0";
}
}
/*------------------------------------*\
FULL
\*------------------------------------*/
.c-showcase--full .c-showcase__image {
border-radius: remify(24px);
}
.c-showcase__content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: remify(80px);
.c-showcase__title {
@include font-scale(level-6);
color: #fff;
text-shadow: 0 0 12px rgba(0,0,0,.35);
}
.c-showcase__subtitle {
color: #fff;
text-shadow: 0 0 14px rgba(0,0,0,.32);
}
.c-showcase__link {
color: #fff;
text-decoration: none;
border-bottom: 1px solid primary(sun, 120);
text-shadow: 0 0 12px rgba(0,0,0,.3);
}
}
No notes defined.