<div class="page-slice page-slice__slider">
<div class="width-full">
<div class="slice-item" style="background-image: url('/images/home/page-slice/1.png')" id="slice-item-01">
<div class="slice-item__text container">
<h3 class="slice-item__text--header">
<span>Fully waterproof & safety standards</span>
</h3>
<p class="slice-item__text--description">
Solarwood is completely watertight with rainwater drainage through a beautiful zinc gutter. 100% waterproof, dry parking and annual generation of 5,700 kWh.
</p>
<div class="slice-item__usps">
</div>
</div>
</div>
<div class="slice-item" style="background-image: url('/images/home/page-slice/2.png')" id="slice-item-02">
<div class="slice-item__text container">
<h3 class="slice-item__text--header">
<span>Fits seamlessly into your garden</span>
</h3>
<p class="slice-item__text--description">
We make your unique carport or veranda entirely to your measurements. Our architects ensure that your wish fits seamlessly into your garden. You determine the type of wood, shape and upgrades.
</p>
<div class="slice-item__usps">
</div>
</div>
</div>
<div class="slice-item" style="background-image: url('/images/home/page-slice/3.png')" id="slice-item-03">
<div class="slice-item__text container">
<h3 class="slice-item__text--header">
<span>Always with safety in mind</span>
</h3>
<p class="slice-item__text--description">
We look beyond the generation of solar energy. We love innovation but above all safety. We do this by providing fully finished cables and systems that are also fire-resistant.
</p>
<div class="slice-item__usps">
</div>
</div>
</div>
<div class="slice-item" style="background-image: url('/images/home/page-slice/4.png')" id="slice-item-04">
<div class="slice-item__text container">
<h3 class="slice-item__text--header">
<span>Literally the best of both worlds</span>
</h3>
<p class="slice-item__text--description">
Through our uniquely designed solar system, our panels generate energy from the glass on both sides. Cooling and generating power at the same time.
</p>
<div class="slice-item__usps">
</div>
</div>
</div>
<ul class="slice-nav">
<li>
<div class="slice-nav--number">
<a href="#slice-item-01">01</a>
</div>
<div class="slice-nav--text">
<a href="#slice-item-01">Waterfroof & safety standards</a>
</div>
</li>
<li>
<div class="slice-nav--number">
<a href="#slice-item-02">02</a>
</div>
<div class="slice-nav--text">
<a href="#slice-item-02">Modern & innovative</a>
</div>
</li>
<li>
<div class="slice-nav--number">
<a href="#slice-item-03">03</a>
</div>
<div class="slice-nav--text">
<a href="#slice-item-03">High safety standards</a>
</div>
</li>
<li>
<div class="slice-nav--number">
<a href="#slice-item-04">04</a>
</div>
<div class="slice-nav--text">
<a href="#slice-item-04">Generating double power</a>
</div>
</li>
<svg class="icon octagon" role="presentation" focusable="false">
<title>octagon</title>
<use xlink:href="/images/icons-sprite.svg#octagon"></use>
</svg>
</ul>
</div>
</div>
<div class="page-slice page-slice__slider">
<div class="{{ classStyle }}">
{{#each fullpagesliders }}
{{ render '@full-page-image-slide' this merge=true }}
{{/each}}
<ul class="slice-nav">
{{#each fullpagesliders }}
<li>
<div class="slice-nav--number">
<a href="#slice-item-{{ number }}">{{ number }}</a>
</div>
<div class="slice-nav--text">
<a href="#slice-item-{{ number }}">{{ text }}</a>
</div>
</li>
{{/each}}
{{ render '@icon' octagon.icon }}
</ul>
</div>
</div>
{
"classStyle": "width-full",
"octagon": {
"icon": {
"id": "octagon",
"title": "octagon",
"class": "octagon",
"hidden": true
}
},
"scroller": true,
"fullpagesliders": [
{
"number": "01",
"text": "Waterfroof & safety standards",
"image": "/images/home/page-slice/1.png",
"title": "Fully waterproof & safety standards",
"description": "Solarwood is completely watertight with rainwater drainage through a beautiful zinc gutter. 100% waterproof, dry parking and annual generation of 5,700 kWh."
},
{
"number": "02",
"text": "Modern & innovative",
"image": "/images/home/page-slice/2.png",
"title": "Fits seamlessly into your garden",
"description": "We make your unique carport or veranda entirely to your measurements. Our architects ensure that your wish fits seamlessly into your garden. You determine the type of wood, shape and upgrades."
},
{
"octagon": {
"icon": {
"id": "octagon",
"title": "octagon",
"class": "octagon",
"hidden": true
}
},
"number": "03",
"text": "High safety standards",
"image": "/images/home/page-slice/3.png",
"title": "Always with safety in mind",
"description": "We look beyond the generation of solar energy. We love innovation but above all safety. We do this by providing fully finished cables and systems that are also fire-resistant."
},
{
"octagon": {
"icon": {
"id": "octagon",
"title": "octagon",
"class": "octagon",
"hidden": true
}
},
"number": "04",
"text": "Generating double power",
"image": "/images/home/page-slice/4.png",
"title": "Literally the best of both worlds",
"description": "Through our uniquely designed solar system, our panels generate energy from the glass on both sides. Cooling and generating power at the same time."
}
]
}
$page-slice--octagon__size : 325px !default;
$page-slice--octagon__size\@medium : 600px !default;
$page-slice--octagon__size\@large : 600px !default;
$page-slice--octagon__size\@extra-large : 600px !default;
$page-slice--octagon__top : calc(#{$page-slice--octagon__size} * -0.1) !default;
$page-slice--octagon__top\@medium : calc(#{$page-slice--octagon__size\@medium} * -0.2) !default;
$page-slice--octagon__top\@large : calc(#{$page-slice--octagon__size\@large} * -0.2) !default;
$page-slice--octagon__top\@extra-large : calc(#{$page-slice--octagon__size\@extra-large} * -0.2) !default;
$page-slice--octagon__right : calc(#{$page-slice--octagon__size} * -0.3) !default;
$page-slice--octagon__right\@medium : calc(#{$page-slice--octagon__size\@medium} * -0.25) !default;
$page-slice--octagon__right\@large : calc(#{$page-slice--octagon__size\@large} * -0.25) !default;
$page-slice--octagon__right\@extra-large : calc(#{$page-slice--octagon__size\@extra-large} * -0.25) !default;
$page-slice--slice-nav__color : $bg-color-base !default;
$page-slice--slice-nav__color\@active : $bg-color-base !default;
.page-slice {
.slice-nav {
display: none;
@include mq($screen-m) {
display: block;
}
}
&__slider {
position: relative;
display: flex;
.width-full {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.slice-nav {
display: none;
position: absolute;
bottom: 0;
color: #fff;
list-style: none;
@include mq($screen-m) {
display: block;
}
li {
padding-bottom: $spacer--medium;
}
a {
color: $page-slice--slice-nav__color;
&:hover {
text-decoration: none;
font-weight: 400;
transition: none;
}
}
&--number {
font-size: $font-size-super-extra-large;
}
&--text {
font-size: $font-size-medium;
}
&:hover,
&.active {
color: $page-slice--slice-nav__color\@active;
}
.octagon {
display: none;
position: absolute;
width: $page-slice--octagon__size;
height: $page-slice--octagon__size;
bottom: $page-slice--octagon__top;
right: $page-slice--octagon__right;
z-index: 2;
@include mq($screen-m) {
display: block;
width: $page-slice--octagon__size\@medium;
height: $page-slice--octagon__size\@medium;
bottom: $page-slice--octagon__top\@medium;
left: $page-slice--octagon__right\@medium;
}
@include mq($screen-l) {
width: $page-slice--octagon__size\@large;
height: $page-slice--octagon__size\@large;
bottom: $page-slice--octagon__top\@large;
left: $page-slice--octagon__right\@large;
}
@include mq($screen-xxxl) {
width: $page-slice--octagon__size\@extra-large;
height: $page-slice--octagon__size\@extra-large;
bottom: $page-slice--octagon__top\@extra-large;
left: $page-slice--octagon__right\@extra-large;
}
@media screen and (max-height: 820px) {
display: none;
}
}
}
}
}
There are no notes for this item.