<div class="subscribe-modal__wrapper">
<div class="subscribe-modal__inner">
<picture class="subscribe-modal__graphic">
<source media="(min-width: 768px)" srcset="../../images/subscribe/FUSIN-700_4_email-popup.png" />
<img src="../../images/subscribe/FUSIN-700_4_email-popup-verticle.png" alt="Email Subscription" />
</picture>
<div class="subscribe-modal__content">
<h3 class="title">Want to be an Insider?</h3>
<p class="content">Feel like you're on the<br /> outside looking in? AFW<br /> newsletters share<br /> exclusive deals and<br /> insights for<br /> designing<br /> inside your<br /> home.</p>
</div>
<div class="subscribe-modal__inputs">
<input type="email" placeholder="Enter your email" />
<button type="submit" class="a-btn a-btn--primary">Become an Insider</button>
</div>
<button class="subscribe-modal__close">No Thanks</button>
</div>
</div>
<div class="subscribe-modal__wrapper">
<div class="subscribe-modal__inner">
<picture class="subscribe-modal__graphic">
<source media="(min-width: 768px)" srcset="{{'/images/subscribe/FUSIN-700_4_email-popup.png'|path}}" />
<img src="{{'/images/subscribe/FUSIN-700_4_email-popup-verticle.png'|path}}" alt="Email Subscription" />
</picture>
<div class="subscribe-modal__content">
<{{title.tag}} class="title">{{title.text|safe}}</{{title.tag}}>
<{{content.tag}} class="content">{{content.text|safe}}</{{content.tag}}>
</div>
<div class="subscribe-modal__inputs">
<input type="email" placeholder="Enter your email"/>
<button type="submit" class="a-btn a-btn--primary">{{submit.text}}</button>
</div>
<button class="subscribe-modal__close">{{close.text|safe}}</button>
</div>
</div>
{
"close": {
"text": "No Thanks"
},
"title": {
"tag": "h3",
"text": "Want to be an Insider?"
},
"content": {
"tag": "p",
"text": "Feel like you're on the<br/> outside looking in? AFW<br/> newsletters share<br/> exclusive deals and<br/> insights for<br/> designing<br/> inside your<br/> home."
},
"submit": {
"text": "Become an Insider"
},
"fields": [
{
"label": "Enter your email"
},
{
"label": "Enter your phone number"
}
]
}
.subscribe-modal {
$this: &;
background: $color-denim;
border: none !important;
border-radius: rem(12px) !important;
width: 100%;
max-width: rem(500px);
&__wrapper {
background: $color-denim;
border-color: $color-denim;
border-radius: rem(12px) !important;
margin: 0;
padding: 0;
}
&__inner {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
position: relative;
@include media-md-up {
flex-direction: row;
}
}
&__graphic {
@include media-md-up {
flex: 0 0 rem(500px);
object-fit: cover;
height: 100%;
width: 100%;
}
}
&__content {
color: $color-white;
padding: rem(5px) rem(16px) rem(20px);
@include media-md-up {
flex: 0 0 30%;
padding-top: rem(20px);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: auto;
}
.title,
.content {
text-align: center;
@include media-md-up {
text-align: right;
}
}
.title {}
.content {
line-height: 1.2;
margin-bottom: 0;
br {
display: none;
}
@include media-md-up {
br {
display: inline;
}
}
}
}
&__inputs {
display: flex;
flex-direction: column;
padding-inline: rem(14px);
input {
appearance: none;
background: $color-white;
border: none;
padding: rem(10px);
margin-bottom: rem(8px);
}
button {
cursor: pointer;
}
@include media-md-up {
flex-direction: row;
background: $color-white;
padding: rem(8px) rem(6px) rem(8px) rem(20px);
position: absolute;
top: auto;
right: auto;
bottom: rem(35px);
left: 50%;
transform: translateX(-50%);
width: 80%;
input {
flex: 1 1 100%;
padding-left: rem(5px);
margin-bottom: 0;
}
button {
margin-left: rem(8px);
padding-inline: rem(8px);
}
}
}
&__close {
appearance: none;
background: none;
border: none;
color: $color-white;
cursor: pointer;
padding: rem(12px) 0;
text-decoration: none;
&:focus,
&:hover {
text-decoration: underline;
}
@include media-md-up {
padding: 0;
position: absolute;
top: auto;
right: rem(20px);
bottom: rem(8px);
left: auto;
}
}
}
$(function () {
// const urlParams = new URLSearchParams(window.location.search)
$('.subscribe-modal__wrapper').kendoWindow({
size: 'auto',
title: false,
modal: {
preventScroll: true
},
position: {
top: '50%',
left: '50%'
},
resizable: false,
})
$('.subscribe-modal__wrapper').data('kendoWindow').open().wrapper.addClass('subscribe-modal')
})
No notes defined.