<div class="section--accent newsletter-block">
<div class="content-container">
<div class="newsletter-block__image">
<div class="image-wrapper">
<img src="https://via.placeholder.com/500x250" alt="Newsletter image" />
</div>
<div class="island section--wrapper">
<h2>Don't miss the latest news of Ghent.</h2>
</div>
</div>
<div class="island section--default newsletter-block__content">
<div>
<h3>Subscribe to the newsletter of the City of Ghent.</h3>
<ul class="">
<li>Receive weekly updates of the City of Ghent.</li>
<li>Be the first to discover new events.</li>
<li>Already more then 12.0000 subscribers.</li>
</ul>
</div>
<div class="newsletter-block__form">
<input type="email" name="newsletter-email" id="newsletter-email" />
<input type="submit" value="Subscribe" class="btn " />
</div>
</div>
<div class="island section--wrapper newsletter-block__social-media">
<h3>Follow us on:</h3>
<ul class="no-style">
<li><a href="https://www.facebook.com/stadsbestuurgent" title="Facebook"><i class="icon-facebook"></i><span class="element-invisible">Facebook</span></a></li>
<li><a href="https://twitter.com/stadgent" title="Twitter"><i class="icon-twitter"></i><span class="element-invisible">Twitter</span></a></li>
<li><a href="https://www.linkedin.com/company/stad-gent" title="LinkedIn"><i class="icon-linkedin"></i><span class="element-invisible">LinkedIn</span></a></li>
<li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" title="Youtube"><i class="icon-youtube"></i><span class="element-invisible">Youtube</span></a></li>
<li><a href="https://www.instagram.com/stadgent/" title="Instagram"><i class="icon-instagram"></i><span class="element-invisible">Instagram</span></a></li>
</ul>
</div>
</div>
</div>
<div class="section--accent newsletter-block">
<div class="content-container">
<div class="newsletter-block__image">
<div class="image-wrapper">
{% include '@image' with {
'src': 'https://via.placeholder.com/500x250',
'alt_text': 'Newsletter image'
} %}
</div>
<div class="island section--wrapper">
{% include '@h2' with {
'h2_text': 'Don\'t miss the latest news of Ghent.'
} %}
</div>
</div>
<div class="island section--default newsletter-block__content">
<div>
{% include '@h3' with {
'h3_text': 'Subscribe to the newsletter of the City of Ghent.'
} %}
{% include '@list' with {
'items': [
'Receive weekly updates of the City of Ghent.',
'Be the first to discover new events.',
'Already more then 12.0000 subscribers.'
]
} %}
</div>
<div class="newsletter-block__form">
{% include '@input-email' with {
"email_name": "newsletter-email",
"email_id": "newsletter-email" } %} {% include '@input-submit' with {
"value": "Subscribe"
} %}
</div>
</div>
<div class="island section--wrapper newsletter-block__social-media">
{% include '@h3' with {
'h3_text': 'Follow us on:'
} %}
{% include '@list' with {
'modifier': 'no-style',
'items': [
'<a href="https://www.facebook.com/stadsbestuurgent" title="Facebook"><i class="icon-facebook"></i><span class="element-invisible">Facebook</span></a>',
'<a href="https://twitter.com/stadgent" title="Twitter"><i class="icon-twitter"></i><span class="element-invisible">Twitter</span></a>',
'<a href="https://www.linkedin.com/company/stad-gent" title="LinkedIn"><i class="icon-linkedin"></i><span class="element-invisible">LinkedIn</span></a>',
'<a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" title="Youtube"><i class="icon-youtube"></i><span class="element-invisible">Youtube</span></a>',
'<a href="https://www.instagram.com/stadgent/" title="Instagram"><i class="icon-instagram"></i><span class="element-invisible">Instagram</span></a>'
]
} %}
</div>
</div>
</div>
{
"newsletter_image_src": "https://via.placeholder.com/500x250",
"newsletter_image_alt_text": "Newsletter image",
"newsletter_image_title": "Don't miss the latest news of Ghent.",
"newsletter_content_title": "Subscribe to the newsletter of the City of Ghent.",
"newsletter_content_list_items": [
"Receive weekly updates of the City of Ghent.",
"Be the first to discover new events.",
"Already more then 12.0000 subscribers."
],
"newsletter_form_name": "newsletter-email",
"newsletter_form_id": "newsletter-email",
"newsletter_form_submit_value": "Subscribe",
"newsletter_social_title": "Volg ons op:",
"newsletter_social_modifier": "no-style",
"newsletter_social_items": [
"<a href='https://www.facebook.com/stadsbestuurgent' title='Facebook'><i class='icon-facebook'></i><span class='element-invisible'>Facebook</span></a>",
"<a href='https://twitter.com/stadgent' title='Twitter'><i class='icon-twitter'></i><span class='element-invisible'>Twitter</span></a>",
"<a href='https://www.linkedin.com/company/stad-gent' title='LinkedIn'><i class='icon-linkedin'></i><span class='element-invisible'>LinkedIn</span></a>",
"<a href='https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw' title='Youtube'><i class='icon-youtube'></i><span class='element-invisible'>Youtube</span></a>",
"<a href='https://www.instagram.com/stadgent/' title='Instagram'><i class='icon-instagram'></i><span class='element-invisible'>Instagram</span></a>"
]
}
div.newsletter-block {
.content-container {
@include desktop {
display: flex;
}
}
padding-top: 2rem;
padding-bottom: 2rem;
h2,
h3 {
margin-top: 0;
}
.island {
margin: 0;
border: 0;
}
&__image {
display: flex;
width: 100%;
@include desktop {
flex: 1;
flex-direction: column;
flex-flow: column nowrap;
width: 25%;
}
.image-wrapper {
@include tablet {
display: block;
flex: 0 0 50%;
order: 2;
}
@include desktop {
display: flex;
flex: 0 0 50%;
justify-content: center;
order: 0;
width: 100%;
height: 50%;
border-radius: $radius-3;
overflow: hidden;
}
display: none;
img {
@include desktop {
flex-basis: 20rem;
align-self: center;
max-width: 20rem;
}
}
}
.island {
@include tablet {
flex: 1 0 auto;
order: 1;
width: 50%;
}
@include desktop {
order: 0;
width: 100%;
}
width: 100%;
}
}
&__content {
@include tablet {
background-image: url('#{$styleguide-dir}/img/svg/vignet-top.svg'), url('#{$styleguide-dir}/img/svg/vignet-right.svg'), url('#{$styleguide-dir}/img/svg/vignet-bottom.svg'), url('#{$styleguide-dir}/img/svg/vignet-left.svg');
background-repeat: no-repeat;
background-position: center top, center right, center bottom, center left;
}
@include desktop {
flex: 2;
}
&::before {
display: none;
}
display: flex;
flex-wrap: wrap;
align-items: flex-start;
min-height: 18rem;
}
&__form {
display: flex;
align-self: flex-end;
width: 100%;
margin-bottom: 1.5rem;
input[type="email"] {
flex: 5;
}
input[type="submit"] {
flex: 2;
}
}
&__social-media {
@include no-link-style;
@include tablet {
width: 50%;
}
@include desktop {
width: 25%;
}
ul {
display: flex;
flex-wrap: wrap;
}
li {
display: flex;
margin-right: .3rem;
margin-bottom: .3rem;
text-align: center;
a {
display: flex;
align-items: center;
align-self: center;
justify-content: center;
width: 3.125rem;
height: 3.125rem;
border-radius: $radius-1;
background-color: $color-blue;
&:hover {
background-color: lighten($color-blue, 5%);
}
}
}
}
}
There are no notes for this item.