<div class="notification-list"></div>
<div class="cursor-gradient">
</div>
<header class="header ">
<div class="header__inner">
<div class="header__grid grid grid--no-gutter">
<div class="header__column grid__col grid__col--md-5">
<button type="button" class="button button--icon header__burger-button ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#menu"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#menu"></use>
</svg>
</span>
</span>
</button>
<div class="logo header__logo">
<a href="#" class="logo__content logo__link">
<figure class="image logo__image">
<img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/logo/logo.svg" data-sizes="auto" alt="letters-logo" class="image__img lazyload">
</figure>
</a>
</div>
<button type="button" class="button button--icon header__search-button header__search-button--mobile ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#search"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#search"></use>
</svg>
</span>
</span>
</button>
</div>
<div class="header__column header__column--desktop grid__col grid__col--md-19">
<div class="header__theme-wrapper">
<div class="theme-switcher header__theme">
<button data-theme="theme-beige" class="theme-switcher__button theme-switcher__button--beige">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-gray" class="theme-switcher__button theme-switcher__button--gray">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-yellow" class="theme-switcher__button theme-switcher__button--yellow">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-green" class="theme-switcher__button theme-switcher__button--green">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-dark" class="theme-switcher__button theme-switcher__button--dark">
<span class="theme-switcher__icon-cross"></span>
</button>
</div>
</div>
<button type="button" class="button button--icon-text header__search-button ">
<span class="button__inner" data-text="Search">
<span class="button__text">
Search
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-down-left"></use>
</svg>
</span>
</span>
</button>
<nav class="navigation header__navigation text-button">
<ul class="navigation__list">
<li class="navigation__item is-current navigation__item--only-mobile " data-text="home">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
home
</span>
</a>
</li>
<li class="navigation__item " data-text="fonts">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
fonts
</span>
</a>
</li>
<li class="navigation__item " data-text="about">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
about
</span>
</a>
</li>
<li class="navigation__item navigation__item--only-mobile " data-text="contact">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
contact
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="header__burger-top">
<button type="button" class="button button--icon header__burger-button header__burger-button--close ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#exit"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#exit"></use>
</svg>
</span>
</span>
</button>
</div>
</div>
<div class="header_appear-container">
<div class="header__search">
<form method="get" action="the.url.com">
<div class="textfield textfield--label-hidden header__search-field">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="search" name="textfield" placeholder="Search">
<label class="textfield__label text-button " for="search">
Textfield label
</label>
</div>
</div>
</form>
</div>
<div class="header__burger">
<nav class="navigation header__navigation text-button">
<ul class="navigation__list">
<li class="navigation__item is-current navigation__item--only-mobile " data-text="home">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
home
</span>
</a>
</li>
<li class="navigation__item " data-text="fonts">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
fonts
</span>
</a>
</li>
<li class="navigation__item " data-text="about">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
about
</span>
</a>
</li>
<li class="navigation__item navigation__item--only-mobile " data-text="contact">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
contact
</span>
</a>
</li>
</ul>
</nav>
<div class="header__burger-heading text-small">switch themes</div>
<div class="theme-switcher header__theme">
<button data-theme="theme-beige" class="theme-switcher__button theme-switcher__button--beige">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-gray" class="theme-switcher__button theme-switcher__button--gray">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-yellow" class="theme-switcher__button theme-switcher__button--yellow">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-green" class="theme-switcher__button theme-switcher__button--green">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-dark" class="theme-switcher__button theme-switcher__button--dark">
<span class="theme-switcher__icon-cross"></span>
</button>
</div>
<div class="header__burger-heading text-small">Instagram</div>
<a href="#" class="header__link h2">@lettersfromtartu</a>
</div>
</div>
</header>
<main class="main main--double-padding">
<div class="content-section content-section--inset content-section--sticky ">
<div class="content-section__title text-button">get in touch</div>
<div class="content-section__content">
<div class="contact ">
<div class="contact__info text-large">
<div class="contact__info-text"><svg class="icon contact__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
tartu@font.ee
</div>
<div class="contact__info-text"><svg class="icon contact__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
instagram.com/lettersfromtartu
</div>
<div class="contact__info-text"><svg class="icon contact__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
facebook.com/lettersfromtartu
</div>
</div>
<form class="contact__form" name="contact" action="/">
<div class="grid grid--no-gutter">
<div class="grid__col grid__col--xs-12">
<div class="textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="name" name="contact" placeholder="What is your name?">
<label class="textfield__label text-button " for="name">
Hello!
</label>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-12">
<div class="textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="email" name="contact" placeholder="example@example.com">
<label class="textfield__label text-button " for="email">
Where can we reach you at?
</label>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-12">
<div class="textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="line" name="contact" placeholder="Type here">
<label class="textfield__label text-button " for="line">
Send us a line!
</label>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-12">
<button type="button" class="button button--bordered contact__submit-button ">
<span class="button__inner" data-text="send">
<span class="button__text">
send
</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="content-section content-section--sticky ">
<div class="content-section__title text-button">instagram</div>
<div class="content-section__content">
<div class="instagram-feed">
<div class="instagram-feed__inner">
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="instagram-feed__link" href="#">
<figure class="image image--fluid instagram-feed__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__top grid grid--no-gutter">
<div class="footer__col grid__col grid__col--md-8">
<div class="footer__link-title text-small">facebook</div>
<div class="footer__link-wrapper h2">
<a class="footer__link" href="#">
@lettersfromtartu
</a>
</div>
</div>
<div class="footer__col grid__col grid__col--md-9 grid__col--lg-10">
<form class="newsletter footer__newsletter newsletter--block">
<div class="newsletter__textfield-container">
<div class="newsletter__button-wrapper">
<div class="textfield textfield--label-hidden textfield--border-hidden newsletter__textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="footerEmail" name="textfield" placeholder="Enter your email here">
<label class="textfield__label text-button " for="footerEmail">
newsletter
</label>
</div>
</div>
<button type="submit" class="button newsletter__button newsletter__button--mobile ">
<span class="button__inner" data-text="subscribe">
<span class="button__text">
subscribe
</span>
</span>
</button>
</div>
<div class="newsletter__button-wrapper">
<div class="newsletter__label text-small">
newsletter
<span class="newsletter__error-message"></span>
</div>
<button type="submit" class="button newsletter__button ">
<span class="button__inner" data-text="subscribe">
<span class="button__text">
subscribe
</span>
</span>
</button>
</div>
</div>
<div class="newsletter__success">
<div class="text-large newsletter__vw-title">
Thank you for signing up!
</div>
Your subscription has been confirmed. You've been added to our list and will hear back from us soon.
</div>
</form>
</div>
<div class="footer__col grid__col grid__col--md-7 grid__col--lg-6">
<div class="button-list button-list--col-2 footer__button-list">
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Search">
<span class="button__text">
Search
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="FAQ">
<span class="button__text">
FAQ
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Index">
<span class="button__text">
Index
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Fonts">
<span class="button__text">
Fonts
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="About">
<span class="button__text">
About
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Contact">
<span class="button__text">
Contact
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="footer__bottom-left text-small">
2020 Letters from Tartu. All rights reserved.
</div>
<div class="logo footer__logo">
<a href="#" class="logo__content logo__link">
<figure class="image logo__image">
<img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/logo/logo.svg" data-sizes="auto" alt="letters-logo" class="image__img lazyload">
</figure>
</a>
</div>
<div class="footer__bottom-right text-small">
<a class="link" href="#">
Terms and conditions
</a>
</div>
</div>
</footer>
{% extends '@view-base' %}
{% block page %}
{% include '@contact' with {data: data.contact} %}
{% include '@instagram-feed' with {data: data.instagram} %}
{% endblock %}
{
"language": "en-US",
"data": {
"paddingModifier": "main--double-padding",
"header": {
"themeHeading": "switch themes",
"instagram": {
"heading": "Instagram",
"link": "#",
"handle": "lettersfromtartu"
},
"logo": {
"image": {
"alt": "letters-logo",
"srcset": "../../inc/logo/logo.svg"
},
"link": "#"
},
"themeSwitcher": {
"palettes": [
{
"class": "beige"
},
{
"class": "gray"
},
{
"class": "yellow"
},
{
"class": "green"
},
{
"class": "dark"
}
]
},
"searchButton": {
"text": "Search"
},
"navigation": {
"items": [
{
"link": "#",
"title": "home",
"current": "true",
"is_only_mobile": true
},
{
"link": "#",
"title": "fonts"
},
{
"link": "#",
"title": "about"
},
{
"link": "#",
"title": "contact",
"is_only_mobile": true
}
]
},
"search": {
"label": "Textfield label",
"id": "search",
"name": "textfield",
"placeholder": "Search",
"url": "the.url.com"
}
},
"footer": {
"socialMedia": {
"title": "facebook",
"text": " @lettersfromtartu",
"link": "#"
},
"rightsText": "2020 Letters from Tartu. All rights reserved.",
"terms": {
"text": "Terms and conditions",
"link": "#"
},
"logo": {
"image": {
"alt": "letters-logo",
"srcset": "../../inc/logo/logo.svg"
},
"link": "#"
},
"newsletter": {
"textfield": {
"label": "newsletter",
"id": "footerEmail",
"name": "textfield",
"placeholder": "Enter your email here"
},
"button": {
"text": "subscribe"
},
"buttonMobile": {
"icon": "arrow-enter-bold"
},
"label": "newsletter",
"thanks": {
"title": "Thank you for signing up!",
"message": "Your subscription has been confirmed. You've been added to our list and will hear back from us soon."
}
},
"buttonList": {
"buttonModifier": "button--icon-text button-ico",
"buttons": [
{
"text": "Search",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "FAQ",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "Index",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "Fonts",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "About",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "Contact",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
}
]
}
},
"contact": {
"title": "get in touch",
"contactInfo": [
{
"text": "tartu@font.ee"
},
{
"text": "instagram.com/lettersfromtartu"
},
{
"text": "facebook.com/lettersfromtartu"
}
],
"contactIcon": "arrow-enter-bold",
"formName": "contact",
"fields": [
{
"label": "Hello!",
"id": "name",
"name": "contact",
"placeholder": "What is your name?"
},
{
"label": "Where can we reach you at?",
"id": "email",
"name": "contact",
"placeholder": "example@example.com"
},
{
"label": "Send us a line!",
"id": "line",
"name": "contact",
"placeholder": "Type here"
}
],
"submitButton": {
"text": "send"
}
},
"instagram": {
"title": "instagram",
"items": [
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
}
]
}
}
}