<div class="ucipt-slide swiper-slide
">
<div class="ucipt-responsive-bg-image">
<img class="ucipt-responsive-bg-image__img" src="https://www.viajarmiami.com/img/playas-miami.jpg" alt="Dummy Text">
</div>
<div class="ucipt-slide__text-holder
">
<div class="row">
<div class="col-xs-12 col-ms-10 col-sm-6 col-sm-offset-1 col-md-5 col-lg-4 col">
<div class="ucipt-slide-highlight">
<div class="ucipt-slide-highlight__wrapper bg-accent">
<div class="ucipt-slide-highlight__content">
<div class="ucipt-slide-highlight__content-holder">
<div class="ucipt-slide-highlight__title ucipt-slide-highlight__title_header">
<h2 class="ucipt-title
ucipt-title--color-light">Tu quieres una casa y nosotros lo hacemos posible</h2>
</div>
<div class="ucipt-slide-highlight__bodycopy rich-text">
<div class="
ucipt-description
ucipt-description--color-light
">
<p>Visita la casa personalmente antes de pagar, Conocer a quien pertenece la casa en el Registro de la Propiedad y una vez adquirida, registrar la vivienda en el Registro de la Propiedad, son pasos básicos para comprar en España.</p>
</div>
</div>
<div class="ucipt-slide-highlight__btnholder">
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Comprar casa para no residentes
</a>
</div>
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Comprar casa para 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ucipt-slide swiper-slide
{{#if noBackground}}
ucipt-slide__no-margin{{#if noShadow}} no-shadow{{/if}}
{{/if}}
">
{{#if bg-video-url}}
<div class="ucipt-slide__bg-video-holder">
{{> @ucipt-responsive-bg-video }}
</div>
{{else if youtube-video-code}}
<div class="ucipt-slide__bg-video-holder">{{> @ucipt-responsive-youtube-video }}</div>
{{else if vimeo-video-code}}
<div class="ucipt-slide__bg-video-holder">{{> @ucipt-responsive-vimeo-video }}</div>
{{else if bg-image}}
{{> @ucipt-responsive-bg-image }}
{{/if}}
{{#if showHighlight}}
<div class="ucipt-slide__text-holder
{{#if noBackground}}
ucipt-slide__no-bottom
{{/if}}
">
<div class="row">
{{#if isReversed}}
<div
class="col-xs-12 col-ms-10 col-ms-offset-1 col-sm-6 col-sm-ml col-sm-offset-right-1 col-md-5 col-lg-4 col">
{{> @ucipt-slide-highlight }}
</div>
{{else}}
<div class="col-xs-12 col-ms-10 col-sm-6 col-sm-offset-1 col-md-5 col-lg-4 col">
{{> @ucipt-slide-highlight }}
</div>
{{/if}}
</div>
</div>
{{/if}}
</div>
{
"showHighlight": true,
"hasBg-color": true,
"bg-color": "bg-accent",
"bg-image": {
"alt": "Dummy Text",
"url": "https://www.viajarmiami.com/img/playas-miami.jpg"
},
"title": {
"text": "Tu quieres una casa y nosotros lo hacemos posible",
"colorLight": true
},
"description": {
"text": "<p>Visita la casa personalmente antes de pagar, Conocer a quien pertenece la casa en el Registro de la Propiedad y una vez adquirida, registrar la vivienda en el Registro de la Propiedad, son pasos básicos para comprar en España.</p>",
"colorLight": true
},
"buttons": [
{
"href": "#",
"text": "Comprar casa para no residentes"
},
{
"href": "#",
"text": "Comprar casa para 2"
}
]
}
:root {
--offset: -40px;
--offset-xs: -60px;
} /* ¿PARA QUE ESTÁ ESTO AQUÍ? NO DEBERÍA ESTAR DENTRO DE UN COMPONENTE - REVISAR (CA) */
.ucipt-slide {
min-height: 524px;
margin-bottom: 40px;
@media (--viewport-xs-max) {
margin-bottom: 60px;
min-height: 534px;
}
&__no-margin {
margin-bottom: 0;
&::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 2;
content: "";
opacity: 0.6;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}
@media (--viewport-xs-max) {
margin-bottom: 0;
}
&.no-shadow{
&::before {
opacity: 0;
}
}
}
&__text-holder {
bottom: var(--offset);
width: 100%;
z-index: 3;
position: absolute;
.col {
z-index: 1;
}
@media (--viewport-md-min) {
.col-sm-ml {
margin-left: auto;
}
.col-sm-offset-right-1 {
margin-right: 8.33333333%;
}
}
@media (--viewport-sm-max) {
padding-left: 5%;
padding-right: 5%;
}
@media (--viewport-xs-max) {
bottom: -60px;
}
}
&__no-bottom {
border-bottom: solid 40px var(--color-white);
@media (--viewport-xs-max) {
border-bottom: solid 60px var(--color-white);
}
}
}
No notes defined.