<section class="splitter splitter_bg-color_white splitter_padding_bottom_small ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="journey-slider sticky-clone__wrapper">
<div class="journey-slider__displayInfo">
<div class="journey-slider__displayInfo-infoColumn">
<div class="journey-slider__displayInfo-infoColumn-question">
<div class="text-label-m text-label-m_color_light">EM QUE FASE SE ENCONTRA?</div>
</div>
<div class="journey-slider__displayInfo-infoColumn-title">
<h1 class="
title-xl title-xl_color_light
">Inicie a sua jornada de Crédito Habitação</h1>
</div>
<div class="journey-slider__displayInfo-infoColumn-desc" style="font-weight: 100;">
<div id="" class="
bodycopy-l
bodycopy_color_light
">
<p>Aqui encontra um conjunto de vantagens com o objetivo de tornar o processo de compra simples, tranquilo e rápido.</p>
</div>
</div>
</div>
</div>
<div class="journey-slider__slider">
<a class="journey-slider__slider-imageBox" href="#step[object Object]" style="background-image: url(/dist/images/featured.jpg);">
<div class="journey-slider__slider-imageBox-backgroundMask">
<div class="journey-slider__slider-imageBox-index">
<div class="journey-slider__slider-imageBox-index-number">
<div class="
number-xl
"><span>1</span></div>
</div>
<div class="journey-slider__slider-imageBox-index-description">
<h3 class="
title-m
">Antes de solicitar</h3>
</div>
</div>
</div>
</a>
<a class="journey-slider__slider-imageBox" href="#step[object Object]" style="background-image: url(/dist/images/testimonials-bg.jpg);">
<div class="journey-slider__slider-imageBox-backgroundMask">
<div class="journey-slider__slider-imageBox-index">
<div class="journey-slider__slider-imageBox-index-number">
<div class="
number-xl
"><span>2</span></div>
</div>
<div class="journey-slider__slider-imageBox-index-description">
<h3 class="
title-m
">Procuro crédito habitação</h3>
</div>
</div>
</div>
</a>
<a class="journey-slider__slider-imageBox" href="#step[object Object]" style="background-image: url(/dist/images/access-highlight-bg-mob.jpg);">
<div class="journey-slider__slider-imageBox-backgroundMask">
<div class="journey-slider__slider-imageBox-index">
<div class="journey-slider__slider-imageBox-index-number">
<div class="
number-xl
"><span>3</span></div>
</div>
<div class="journey-slider__slider-imageBox-index-description">
<h3 class="
title-m
">O meu crédito habitação foi aprovado</h3>
</div>
</div>
</div>
</a>
<a class="journey-slider__slider-imageBox" href="#step[object Object]" style="background-image: url(/dist/images/testimonials-bg2.jpg);">
<div class="journey-slider__slider-imageBox-backgroundMask">
<div class="journey-slider__slider-imageBox-index">
<div class="journey-slider__slider-imageBox-index-number">
<div class="
number-xl
"><span>4</span></div>
</div>
<div class="journey-slider__slider-imageBox-index-description">
<h3 class="
title-m
">Escritura</h3>
</div>
</div>
</div>
</a>
</div>
<div class="journey-slider__stepsBar">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<ul class="journey-slider__stepsBar-stepsBarRow">
<div class="journey-slider__stepsBar-stepBlock" id="1">
<div class="journey-slider__stepsBar-link">
<a class="link
link_simple
" href="#1">
<span>1</span>
</a>
</div>
<div class="journey-slider__stepsBar-link-textLink">
<a class="link
link_simple
" href="#1">
<span>. Antes de solicitar</span>
</a>
</div>
</div>
<div class="journey-slider__stepsBar-linksDivider">></div>
<div class="journey-slider__stepsBar-stepBlock" id="2">
<div class="journey-slider__stepsBar-link">
<a class="link
link_simple
" href="#2">
<span>2</span>
</a>
</div>
<div class="journey-slider__stepsBar-link-textLink">
<a class="link
link_simple
" href="#2">
<span>. Procuro crédito habitação</span>
</a>
</div>
</div>
<div class="journey-slider__stepsBar-linksDivider">></div>
<div class="journey-slider__stepsBar-stepBlock" id="3">
<div class="journey-slider__stepsBar-link">
<a class="link
link_simple
" href="#3">
<span>3</span>
</a>
</div>
<div class="journey-slider__stepsBar-link-textLink">
<a class="link
link_simple
" href="#3">
<span>. O meu crédito habitação foi aprovado</span>
</a>
</div>
</div>
<div class="journey-slider__stepsBar-linksDivider">></div>
<div class="journey-slider__stepsBar-stepBlock" id="4">
<div class="journey-slider__stepsBar-link">
<a class="link
link_simple
" href="#4">
<span>4</span>
</a>
</div>
<div class="journey-slider__stepsBar-link-textLink">
<a class="link
link_simple
" href="#4">
<span>. Escritura</span>
</a>
</div>
</div>
<div class="journey-slider__stepsBar-linksDivider">></div>
<div class="journey-slider__stepsBar-stepBlock" id="5">
<div class="journey-slider__stepsBar-link">
<a class="link
link_simple
" href="#5">
<span>5</span>
</a>
</div>
<div class="journey-slider__stepsBar-link-textLink">
<a class="link
link_simple
" href="#5">
<span>. Último Passo</span>
</a>
</div>
</div>
<div class="journey-slider__stepsBar-linksDivider">></div>
</ul>
</div>
</div>
</div>
</div>
<div class="journey-slider__progress">
<div class="progress">
<div class="container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="journey-slider sticky-clone__wrapper{{#if isUnderHeaderFixed}} underHeaderFixed{{/if}}">
<div class="journey-slider__displayInfo">
<div class="journey-slider__displayInfo-infoColumn">
{{#if text-label}}
<div class="journey-slider__displayInfo-infoColumn-question">
{{> @text-label-m text-label }}
</div>
{{/if}}
{{#if title}}
<div class="journey-slider__displayInfo-infoColumn-title">
{{> @title-xl title }}
</div>
{{/if}}
{{#if description}}
<div class="journey-slider__displayInfo-infoColumn-desc" style="font-weight: 100;">
{{> @bodycopy-l description }}
</div>
{{/if}}
</div>
</div>
<div class="journey-slider__slider">
{{#each steps}}
<a class="journey-slider__slider-imageBox" href="#step{{ this.number }}"
style="background-image: url({{this.src}});">
<div class="journey-slider__slider-imageBox-backgroundMask">
<div class="journey-slider__slider-imageBox-index">
<div class="journey-slider__slider-imageBox-index-number">
{{> @number-xl this.number }}
</div>
<div class="journey-slider__slider-imageBox-index-description">
{{> @title-m this.desc }}
</div>
</div>
</div>
</a>
{{/each}}
</div>
<div class="journey-slider__stepsBar">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<ul class="journey-slider__stepsBar-stepsBarRow">
{{#each stepsProgressBar}}
<div class="journey-slider__stepsBar-stepBlock" id="{{this.id.text}}">
<div class="journey-slider__stepsBar-link">
{{> @link this.id }}
</div>
<div class="journey-slider__stepsBar-link-textLink">
{{> @link this.link }}
</div>
</div>
<div class="journey-slider__stepsBar-linksDivider">></div>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
<div class="journey-slider__progress">
<div class="progress">
<div class="container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomSmall": true
},
"isSticky": true,
"text-label": {
"text": "EM QUE FASE SE ENCONTRA?",
"colorLight": true
},
"title": {
"text": "Inicie a sua jornada de Crédito Habitação",
"colorLight": true
},
"description": {
"text": "<p>Aqui encontra um conjunto de vantagens com o objetivo de tornar o processo de compra simples, tranquilo e rápido.</p>",
"colorLight": true
},
"steps": [
{
"src": "/dist/images/featured.jpg",
"number": {
"number": "1"
},
"id": {
"text": "1"
},
"desc": {
"text": "Antes de solicitar"
},
"link": {
"isSimple": true,
"href": "#",
"text": "Antes de solicitar"
}
},
{
"src": "/dist/images/testimonials-bg.jpg",
"number": {
"number": "2"
},
"id": {
"text": "2"
},
"desc": {
"text": "Procuro crédito habitação"
},
"link": {
"isSimple": true,
"href": "#",
"text": "Procuro crédito habitação"
}
},
{
"src": "/dist/images/access-highlight-bg-mob.jpg",
"number": {
"number": "3"
},
"id": {
"text": "3"
},
"desc": {
"text": "O meu crédito habitação foi aprovado"
},
"link": {
"isSimple": true,
"href": "#",
"text": "O meu crédito habitação foi aprovado"
}
},
{
"src": "/dist/images/testimonials-bg2.jpg",
"number": {
"number": "4"
},
"id": {
"text": "4"
},
"desc": {
"text": "Escritura"
},
"link": {
"isSimple": true,
"href": "#",
"text": "Escritura"
}
}
],
"stepsProgressBar": [
{
"id": {
"isSimple": true,
"href": "#1",
"text": "1"
},
"link": {
"isSimple": true,
"href": "#1",
"text": ". Antes de solicitar"
}
},
{
"id": {
"isSimple": true,
"href": "#2",
"text": "2"
},
"link": {
"isSimple": true,
"href": "#2",
"text": ". Procuro crédito habitação"
}
},
{
"id": {
"isSimple": true,
"href": "#3",
"text": "3"
},
"link": {
"isSimple": true,
"href": "#3",
"text": ". O meu crédito habitação foi aprovado"
}
},
{
"id": {
"isSimple": true,
"href": "#4",
"text": "4"
},
"link": {
"isSimple": true,
"href": "#4",
"text": ". Escritura"
}
},
{
"id": {
"isSimple": true,
"href": "#5",
"text": "5"
},
"link": {
"isSimple": true,
"href": "#5",
"text": ". Último Passo"
}
}
]
}
.journey-slider {
display: flex;
flex-flow: row;
height: 505px;
/* MOBILE STYLIZATION, FROM ROW TO COLUMN SO .DISPLAYINFO GETS ABOVE THE .SLIDER */
@media (--viewport-ms-max) {
flex-flow: column;
height: auto;
margin-right: -40px;
margin-left: -40px;
}
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
&.sticky-clone {
flex-direction: column;
height: 65px;
box-shadow: none;
margin: 0;
.journey-slider {
&__displayInfo {
display: none;
}
&__slider {
display: none;
}
&__stepsBar {
display: block;
}
&__progress {
display: block;
}
}
}
&__stepsBar {
display: none;
&-stepsBarRow {
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
height: 65px;
background-color: var(--color-accent);
@media (--viewport-ms-max) {
margin-right: -40px;
margin-left: -40px;
}
}
&-stepBlock {
display: inline-flex;
flex-wrap: nowrap;
flex-flow: row;
flex-grow: 1;
justify-content: center;
align-items: center;
&.active {
.journey-slider {
&__stepsBar {
&-stepBlock {
flex-grow: 10;
}
&-link {
&-textLink {
@media(--viewport-ms-max) {
display: block;
}
@media(--viewport-xs-max) {
display: none;
}
}
}
}
}
}
}
&-linksDivider {
display: block;
font-family: 'Jornada Sans Book';
font-size: 20px;
opacity:0.9;
color: var(--color-primary);
&:last-child {
display: none;
}
}
&-link {
display: block;
.link {
color: var(--color-primary);
font-size: 16px;
line-height: 26px;
font-family: 'Jornada Sans Book';
&:hover {
transition: all 0.3s;
}
}
&-textLink {
@media(--viewport-ms-max) {
display: none;
}
.link {
color: var(--color-primary);
font-size: 16px;
line-height: 26px;
font-family: 'Jornada Sans Book';
&:hover {
transition: all 0.3s;
}
}
}
}
}
&.underHeaderFixed.sticky-clone.visible{
@media (--viewport-sm-min) {
.journey-slider__stepsBar{
position: relative;
top:100px;
}
}
}
&__progress {
position: absolute;
bottom: 0;
left: 0;
display: none;
width: 100%;
.progress-bar {
background-color: var(--color-tertiary);
height: 5px;
}
}
/* STYLE OF LEFT CONTAINER, WICH IS A COLUMN COMPOSED BY 3 TEXT ELEMENTS */
&__displayInfo {
display: flex;
flex-direction: column;
justify-content: center;
width: 40%;
min-width: 400px;
background-color: var(--color-accent);
/* this padding exists so the infoColumn doesn't get compromised in small desktop viewports */
@media (--viewport-sm-only) {
width: 500px;
}
/* MOBILE STYLIZATION */
@media (--viewport-ms-max) {
width: 100%;
min-width: unset;
height: fit-content;
padding: 80px 0px;
min-width: unset;
}
&-infoColumn {
/* SIDE PADDINGS FOR THE TEXTS */
padding-left: 60px;
padding-right: 30px;
/* MOBILE PADDINGS STYLIZATION */
@media (--viewport-ms-max) {
padding-left: 30px;
padding-right: 30px;
}
&-question {
padding-top: 10px;
@media (--viewport-ms-max) {
padding-top: 50px;
}
}
&-title {
padding-top: 14px;
padding-bottom: 20px;
}
&-desc {
padding-bottom: 10px;
}
}
}
/* STYLE OF RIGHT CONTAINER, WICH IS A ROW COMPOSED BY 3 TO 6 IMAGE BOXES */
&__slider {
display: flex;
flex-direction: row;
width: 64%;
/* MOBILE STYLIZATION */
@media (--viewport-ms-only) {
width: 100%;
height: 200px;
padding: 10px 0px 0px;
}
@media (--viewport-xs-max) {
width: 100%;
height: 120px;
padding: 10px 0px 0px;
}
&:hover {
/* WHEN THE SLIDER IS HOVERED, THIS HIDES THE INDEX NUMBER OF THE OUTER IMAGE BOXES */
.journey-slider__slider-imageBox-index-number {
opacity: 0;
transition: opacity .2s;
}
}
&-imageBox {
position: relative;
flex: 1;
overflow: hidden;
background: center / cover no-repeat;
height: 100%;
margin: 0 .5%;
transition: 0.5s;
&:last-child {
margin-right: 0px;
}
@media (--viewport-ms-max) {
padding: 0px;
&:first-child {
margin-left: 0px;
}
}
&-backgroundMask {
height: 100%;
padding: 320px 20px 30px 50px;
background: linear-gradient(to bottom, transparent 60%, black 99%);
@media (--viewport-ms-max) {
height: 100%;
padding: 0px;
background: linear-gradient(to bottom, transparent 30%, black 99%);
}
}
&-index {
display: flex;
flex-flow: column;
width: fit-content;
/* MOBILE STYLIZATION */
@media (--viewport-ms-max) {
height: 100%;
width: 100%;
justify-content: center;
}
&-number {
display: flex;
/* MOBILE STYLE CHANGES */
@media (--viewport-ms-max) {
justify-content: center;
}
.number-xl {
color: var(--color-primary);
line-height: 1;
@media (--viewport-ms-only) {
font-size: 70px;
}
@media (--viewport-xs-max) {
font-size: 50px;
}
}
}
&-description {
/* HIDDEN, TURNS TO VISIBLE WHEN HOVERED, AS DEVELOPED BELOW */
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility .2s;
@media (--viewport-sm-only) {
font-size: 22px;
}
/* MOBILE STYLE CHANGES */
@media (--viewport-ms-max) {
display: none;
}
.title-m {
color: var(--color-primary);
}
}
}
&:hover {
flex: 4;
/* INDEX PADDINGS FOR WHEN HOVERED */
.journey-slider__slider-imageBox-index {
@media (--viewport-ms-max) {
padding-left: 20px;
padding-right: 15px;
}
}
/* WHEN HOVERED, MAKE THE DESCRIPTION VISIBLE */
.journey-slider__slider-imageBox-index-description {
visibility: visible;
opacity: 1;
@media (--viewport-ms-max) {
display: flex;
justify-content: flex-start;
font-size: 14px;
line-height: 14px;
}
}
/* WHEN HOVERED, MAKE THE INDEX NR VISIBLE, THIS IS NEEDED BECAUSE OF THE SLIDER HOVER, WICH HIDES THEM INDEX NUMBERS OF ALL THE IMAGE BOXES */
.journey-slider__slider-imageBox-index-number {
opacity: 1;
justify-content: flex-start;
}
}
}
}
}
No notes defined.