Commit bf19ecdc authored by Hanna's avatar Hanna
Browse files

content added

parent 8cf0611e
Pipeline #30158 passed with stage
in 53 seconds
---
BUNDLE_PATH: "vendor/bundle"
<section class="block block-faq-1"> <section class="block block-faq-1">
<div class="container"> <div class="container">
<div class="destination" id="{{ section.id }}"></div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<h2><span class="light center">{{ section.headline }}</span></h2> <h2><span class="light center">{{ section.headline }}</span></h2>
......
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
<img src="{{ section.logo | relative_url }}" alt="{{ site.title }}"> <img src="{{ section.logo | relative_url }}" alt="{{ site.title }}">
</a> </a>
</div> </div>
<nav class="block-header-1--nav" id="myTopnav"> <nav class="block-header-1--nav" id="myTopnav">
<ul> <ul>
{% for nav_item in section.navigation %} {% for nav_item in section.navigation %}
<li class="nav-item {% if page.url == nav_item.link %}active{% endif %}"><a href="{{ nav_item.link }}">{{ nav_item.link_text }}</a></li> <li class="nav-item {% if page.url == nav_item.link %}active{% endif %}"><a
href="{{ nav_item.link }}">{{ nav_item.link_text }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
{% if section.background_image %} {% if section.background_image %}
style="background-image: url('{{ section.background_image | relative_url }}')" style="background-image: url('{{ section.background_image | relative_url }}')"
{% endif %}> {% endif %}>
<div class="headspace"></div>
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column text"> <div class="column text">
......
<section class="block block-hero-1">
<div class="container">
<div class="destination" id="{{ section.id }}"></div>
<h1><span class="black light">{{ section.heading }}</span></h1>
</div>
</section>
\ No newline at end of file
...@@ -8,10 +8,10 @@ style="background-image: url('{{ section.background_image | relative_url }}')" ...@@ -8,10 +8,10 @@ style="background-image: url('{{ section.background_image | relative_url }}')"
<h1><span class="light">{{ section.headline }}</span></h1> <h1><span class="light">{{ section.headline }}</span></h1>
<p>{{ section.content }}</p> <p>{{ section.content }}</p>
{% if section.ctaiOS and section.ctaiOS.enabled == true %} {% if section.ctaiOS and section.ctaiOS.enabled == true %}
<button class="button primary inverted" href="{{ section.ctaiOS.url }}">{{ section.ctaiOS.button_text }}</button> <button class="button primary inverted" onclick="location.href='{{ section.ctaiOS.url }}'" type="button">{{ section.ctaiOS.button_text }}</button>
{% endif %} {% endif %}
{% if section.ctaAndroid and section.ctaAndroid.enabled == true %} {% if section.ctaAndroid and section.ctaAndroid.enabled == true %}
<button class="button primary inverted" href="{{ section.ctaAndroid.url }}">{{ section.ctaAndroid.button_text }}</button> <button class="button primary inverted" onclick="location.href='{{ section.ctaAndroid.url }}'" type="button">{{ section.ctaAndroid.button_text }}</button>
{% endif %} {% endif %}
</div> </div>
<div class="column media"> <div class="column media">
......
<section class="block block-footer-2"> <section class="block block-footer-2">
<div class="container"> <div class="container">
<div class="destination" id="{{ section.id }}"></div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<img src="{{ section.image }}" width="24" height="auto" alt="Logo"> <img src="{{ section.image_1.image | relative_url }}" alt="{{ section.image_1.caption }}">
</div> </div>
<div class="column"> <div class="column">
{{ section.col_2 }} <h3>{{ section.col_2.headline }}</h3>
<br>
<p>{{ section.col_2.content }}</p>
</div> </div>
<div class="column"> <div class="column">
{{ section.col_3 }} <h3>{{ section.col_3.headline }}</h3>
<br>
<p>{{ section.col_3.content }}</p>
</div> </div>
<div class="column"> <div class="column">
{{ section.col_4 }} <h3>{{ section.col_4.headline }}</h3>
<br>
<p>{{ section.col_4.content }}</p>
</div> </div>
</div> </div>
</div> </div>
......
<section class="block block-three-column-1">
<div class="container">
<div class="columns">
<div class="column">
<figure>
<img src="{{ section.image_1.image | relative_url }}" alt="{{ section.image_1.caption }}">
{% if section.image_1.caption %}
<figcaption>{{ section.image_1.caption }}</figcaption>
{% endif %}
</figure>
<h3>{{ section.col_1.headline }}</h3>
<p>{{ section.col_1.content }}</p>
</div>
<div class="column">
<figure>
<img src="{{ section.image_2.image | relative_url }}" alt="{{ section.image_2.caption }}">
{% if section.image_1.caption %}
<figcaption>{{ section.image_1.caption }}</figcaption>
{% endif %}
</figure>
<h3>{{ section.col_2.headline }}</h3>
<p>{{ section.col_2.content }}</p>
</div>
<div class="column">
<figure>
<img src="{{ section.image_3.image | relative_url }}" alt="{{ section.image_3.caption }}">
{% if section.image_1.caption %}
<figcaption>{{ section.image_1.caption }}</figcaption>
{% endif %}
</figure>
<h3>{{ section.col_3.headline }}</h3>
<p>{{ section.col_3.content }}</p>
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="block block-three-column-1"> <section class="block block-three-column-1">
<div class="container"> <div class="container">
<div class="destination" id="{{ section.id }}"></div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<figure>
<img src="{{ section.image_1.image | relative_url }}" alt="{{ section.image_1.caption }}" style="width: 50%;">
{% if section.image_1.caption %}
<figcaption>{{ section.image_1.caption }}</figcaption>
{% endif %}
</figure>
<h3>{{ section.col_1.headline }}</h3> <h3>{{ section.col_1.headline }}</h3>
<p>{{ section.col_1.content }}</p> <p>{{ section.col_1.content }}</p>
</div> </div>
<div class="column"> <div class="column">
<figure>
<img src="{{ section.image_2.image | relative_url }}" alt="{{ section.image_2.caption }}" style="width: 50%;">
{% if section.image_2.caption %}
<figcaption>{{ section.image_2.caption }}</figcaption>
{% endif %}
</figure>
<h3>{{ section.col_2.headline }}</h3> <h3>{{ section.col_2.headline }}</h3>
<p>{{ section.col_2.content }}</p> <p>{{ section.col_2.content }}</p>
</div> </div>
<div class="column"> <div class="column">
<figure>
<img src="{{ section.image_3.image | relative_url }}" alt="{{ section.image_3.caption }}" style="width: 50%;">
{% if section.image_3.caption %}
<figcaption>{{ section.image_3.caption }}</figcaption>
{% endif %}
</figure>
<h3>{{ section.col_3.headline }}</h3> <h3>{{ section.col_3.headline }}</h3>
<p>{{ section.col_3.content }}</p> <p>{{ section.col_3.content }}</p>
</div> </div>
......
<section class="block block-three-column-irma-1">
<div class="container">
<h1><span class="light">{{ section.heading }}</span></h1>
<div class="columns">
<div class="column">
<figure>
<img src="{{ section.image_1.image | relative_url }}" alt="{{ section.image_1.caption }}">
{% if section.image_1.caption %}
<figcaption>{{ section.image_1.caption }}</figcaption>
{% endif %}
</figure>
<h3>{{ section.col_1.headline }}</h3>
<p>{{ section.col_1.content }}</p>
</div>
<div class="column">
<figure>
<img src="{{ section.image_2.image | relative_url }}" alt="{{ section.image_2.caption }}">
{% if section.image_2.caption %}
<figcaption>{{ section.image_2.caption }}</figcaption>
{% endif %}
</figure>
<h3>{{ section.col_2.headline }}</h3>
<p>{{ section.col_2.content }}</p>
</div>
<div class="column">
<figure>
<img src="{{ section.image_3.image | relative_url }}" alt="{{ section.image_3.caption }}">
{% if section.image_3.caption %}
<figcaption>{{ section.image_3.caption }}</figcaption>
{% endif %}
</figure>
<h3>{{ section.col_3.headline }}</h3>
<p>{{ section.col_3.content }}</p>
</div>
</div>
</div>
</section>
\ No newline at end of file
/* Scrolling to elements*/
html {
scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* Changing header */ /* Changing header */
.block-header-1--logo img { .block-header-1--logo img {
max-height: 4.0rem max-height: 4.0rem;
} }
.block-header-1 { .block-header-1 {
...@@ -10,8 +24,12 @@ ...@@ -10,8 +24,12 @@
header { header {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
-webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 6px 0 rgba(0,0,0,0.6); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.6);
background-color: #fff;
position: sticky;
top: 0;
height: 90px
} }
.block-header-1--logo { .block-header-1--logo {
...@@ -24,6 +42,26 @@ header { ...@@ -24,6 +42,26 @@ header {
font-size: 1.0rem font-size: 1.0rem
} }
/* Scroll adjustment to make up for sticky header */
.destination {
position: absolute;
z-index: -1;
left: 0;
margin-top: -105px;
/* 90 (height of nav) and a 15 for extra space*/
}
/* First element after header needs margin on top*/
/* .block-hero-2 {
margin-top: 90px;
}
*/
/* .headspace {
min-height: 90px;
} */
/* Double call to action */ /* Double call to action */
.button.primary.inverted { .button.primary.inverted {
...@@ -33,76 +71,99 @@ header { ...@@ -33,76 +71,99 @@ header {
/* Overwriting colors */ /* Overwriting colors */
ul,
.faq-item {
font-weight: 400;
color: #666 !important;
}
.button.primary { .button.primary {
background-color:#004C92 background-color: #004C92
} }
.button.secondary { .button.secondary {
border:1.5px solid #004C92 border: 1.5px solid #004C92
} }
.block-header-1 .nav-item.active a { .block-header-1 .nav-item.active a {
color:#004C92 color: #004C92
} }
.block-header-1 .nav-item.active a:hover { .block-header-1 .nav-item.active a:hover {
color:#004C92 color: #004C92
} }
.block-header-1 .nav-item.active a { .block-header-1 .nav-item.active a {
color:#004C92 color: #004C92
} }
.block-header-1 .nav-item.active a:hover { .block-header-1 .nav-item.active a:hover {
color:#004C92 color: #004C92
} }
.block-hero-1 { .block-hero-1 {
--bg:#004C92 --bg: #00B1E6
} }
.block-hero-2 { .block-hero-2 {
--bg:#004C92 --bg: #004C92
} }
.block-cta-bar { .block-cta-bar {
background:#004C92 background: #004C92
} }
::-moz-selection { ::-moz-selection {
background:#ffedbc background: #ffedbc
} }
::-webkit-selection { ::-webkit-selection {
background:#004C92 background: #004C92
} }
::selection { ::selection {
background:#004C92 background: #004C92
}
.black {
color: #000000;
}
#myTopnav {
display: none;
} }
/* Adjusting the size of elements */ /* Adjusting the size of elements */
@media screen and (min-width:700px) { @media screen and (min-width:700px) {
#myTopnav {
display: block;
}
.block-hero-2 .column.text { .block-hero-2 .column.text {
-ms-flex: 0 0 50%; -ms-flex: 0 0 50%;
flex: 0 0 50% flex: 0 0 50%
} }
.block-hero-2 .column.media { .block-hero-2 .column.media {
-ms-flex: 0 0 50%; -ms-flex: 0 0 50%;
flex: 0 0 50% flex: 0 0 50%
} }
.block-hero-2 .column.media img { .block-hero-2 .column.media img {
width:25vw; width: 25vw;
max-width:320px max-width: 350px
} }
header { header {
z-index: 9999; z-index: 9999;
background-color: #fff; background-color: #fff;
position: sticky; position: sticky;
position: -webkit-sticky;
top: 0; top: 0;
width: 100% width: 100%;
height: 90px;
} }
.block-hero-2 { .block-hero-2 {
padding: 3rem 4rem; padding: 3rem 4rem;
} }
...@@ -136,7 +197,8 @@ column.text p { ...@@ -136,7 +197,8 @@ column.text p {
} }
/* Add a background color to the button if it is clicked on (add the .open class with JS), and when you move the mouse over it (hover) */ /* Add a background color to the button if it is clicked on (add the .open class with JS), and when you move the mouse over it (hover) */
.open, .collapsible:hover { .open,
.collapsible:hover {
background-color: #ccc; background-color: #ccc;
color: #313131; color: #313131;
} }
...@@ -155,7 +217,8 @@ column.text p { ...@@ -155,7 +217,8 @@ column.text p {
} }
.collapsible:after { .collapsible:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */ content: '\02795';
/* Unicode character for "plus" sign (+) */
font-size: 13px; font-size: 13px;
color: white; color: white;
float: right; float: right;
...@@ -163,7 +226,8 @@ column.text p { ...@@ -163,7 +226,8 @@ column.text p {
} }
.open:after { .open:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */ content: "\2796";
/* Unicode character for "minus" sign (-) */
} }
.center { .center {
...@@ -173,3 +237,34 @@ column.text p { ...@@ -173,3 +237,34 @@ column.text p {
text-align: center; text-align: center;
max-width: 900px; max-width: 900px;
} }
.indent {
padding-left: 30px;
}
.block-footer-2 {
font-size: 12.8px;
font-size: .8rem;
color: white;
background: rgb(69, 68, 68);
text-align: left;
}
.block-footer-2 p {
font-weight: 400;
color: white;
}
.block-footer-2 a {
color: lightskyblue;
}
.block-footer-2 img {
max-width: 200px;
}
.block-footer-2 .column {
min-width: 200px;
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment