layout: default
<!–
Last full read through 27/12/2020
############################################## # walk Layout /_layouts/env/walk.html ##############################################
–>
<!– assign description with site decsription as fallback –>
{% if site.data.copy.landing.walk.description %} {% assign description = site.data.copy.landing.walk.description %} {% else %} {% assign description = site.description %} {% endif %}
<div class=“hero hero-90”>
<div class="hero__overlay"> {% picture {{ page.hero.file | prepend: 'content/' }} --img class="hero__image image__filter--mix h-100" --alt {{ page.hero.alt }} %}</div> <div class="hero__strap hero__strap--center hero__strap--env"> <h1> <span class="hero__strap--start"> {% assign header = site.data.copy.landing.walk %} {% assign title = header.title | split: " " %} {% assign n = header.split %} {% for word in (1..title.size) %} {{ title[forloop.index0] }} {% if forloop.index == n %} </span>{% endif %} {% endfor %} </h1> </div> <div class="hero__follow"></div>
</div>
<div class=“augmented-image”>
{% picture {{ page.subhero.file | prepend: 'content/' }} --img class="hero__image" --alt {{ page.subhero.alt }} %} <svg class="svg__augment" viewBox="-50 -50 100 100" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="augmentLED" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" /> <stop offset="100%" /> </radialGradient> </defs> <circle class="svg__augment--pulse" cx="33%" cy="2%" > <!-- Can't animate with CSS, see https://stackoverflow.com/questions/32409101/resizing-svg-circle-radius-using-css-animation --> <animate attributeName="r" begin="0s" dur="2s" repeatCount="indefinite" from=".1" to="2"/> <animate attributeName="fill-opacity" attributeType="CSS" begin="0s" dur="2s" repeatCount="indefinite" from="1" to="0" fill="freeze" /> </circle> <circle class="svg__augment--led" cx="33%" cy="2%" r=".5" /> </svg>
</div>
<div class=“center-text strap__100 strap–opd-trust” id=“content”>
<h2>{{ site.data.copy.landing.walk.subtitle }}</h2> <p data-aos="fade-in">{{ site.data.copy.landing.walk.strap }}</p>
</div>
<div class=“segment__wrap”>
<div class="segment__left"> <div class="segment__gaurentee center-text"> <div data-aos="zoom-in"> {% include branding/site-logo.svg %}</div> <p data-aos="fade-in" class="strap__guarantee"> {{ description }}</p></div> <div class="center-text segment__keywords strap--opd-trust"> {% assign keyword = site.data.copy.landing.walk.keywords | split: ", " %} {% for word in (1..keyword.size) %} <h3 data-aos="fade-in">{{ keyword[forloop.index0] }}</h3> {% endfor %}</div> </div> <div class="segment__right augmented-image svg__labels--red augment-not-fullwidth" > {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee"%}
</div>
<div class=“augmented-image” >
{% include image.html image=“device” alt=“Describe the image” class=“hero__image” %}