<div class="newsletter">
<div class="newsletter__header bg-denim">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-12">
<h1 class="m-0 c-white">Become an Insider</h1>
</div>
<div class="col-12 col-lg-7">
<h2 class="m-0 c-white">Feel like you're on the outside looking in? AFW newsletters share exclusive deals and insights for designing inside your home.</h2>
</div>
</div>
</div>
</div>
<div class="newsletter__graphic">
<div class="container">
<picture>
<source media="(max-width:576px)" srcset="//placehold.co/576x140/FFD018/FFFFFF" />
<source media="(max-width:768px)" srcset="//placehold.co/768x140/FFD018/FFFFFF" />
<source media="(max-width:992px)" srcset="//placehold.co/992x140/FFD018/FFFFFF" />
<img src="//placehold.co/1342x140/FFD018/FFFFFF" alt="Newsletter Graphic" />
</picture>
</div>
</div>
<div class="newsletter__content">
<div class="container br-8 pb-32">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-4">
<h3 class="text-center">You’re on your way to becoming an AFW Insider!</h3>
<h4 class="text-center">Make sure we’ve got everything correct to ensure that you receive AFW email and/or text promotions.</h4>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<form class="form">
<div class="form__field">
<label class="form__label">First Name:</label>
<input type="text" class="form__input" placeholder="First Name" />
</div>
<div class="form__field">
<label class="form__label">Last Name:</label>
<input type="text" class="form__input" placeholder="Last Name" />
</div>
<div class="form__field">
<label class="form__label">Email Address:</label>
<input type="text" class="form__input" placeholder="Email Address" />
</div>
<div class="form__field">
<label class="form__label">Birthday:</label>
<input type="text" class="form__input" placeholder="Birthday" />
</div>
<div class="form__field">
<label class="form__label">Phone Number:</label>
<input type="text" class="form__input" placeholder="Phone Number" />
</div>
<div class="form__field">
<div class="form__switch form__switch--centered">
<input class="form__switch__check" id="switch" type="checkbox" checked>
<label class="form__switch__label" for="switch">
<div class="toggle" data-text-on="On" data-text-off="Off"></div>
<div class="label">Send Me Text Promotions</div>
</label>
</div>
</div>
<div class="text-center">
<a class="a-btn a-btn--primary">
Sign Me Up
</a>
</div>
</form>
</div>
</div>
<div class="newsletter__ctas">
<div class="row justify-content-center">
<div class="col-12 col-md-4">
<div class="call-to-action">
<div class="call-to-action__image">
<img src="https://placehold.co/286x180/png" alt="Test">
</div>
<div class="call-to-action__content">
<h4 class="call-to-action__title">Sit aute sunt officia</h4>
<p class="call-to-action__subtitle">Consectetur quis mollit ut laboris Lorem non consequat occaecat in ad qui dolor.</p>
<a href="#" class="call-to-action__link a-btn">
Sunt dolor reprehenderit
<span class="icon far fa-fw fa-long-arrow-right"></span>
</a>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="call-to-action">
<div class="call-to-action__image">
<img src="https://placehold.co/286x180/png" alt="Test">
</div>
<div class="call-to-action__content">
<h4 class="call-to-action__title">Sit aute sunt officia</h4>
<p class="call-to-action__subtitle">Consectetur quis mollit ut laboris Lorem non consequat occaecat in ad qui dolor.</p>
<a href="#" class="call-to-action__link a-btn">
Sunt dolor reprehenderit
<span class="icon far fa-fw fa-long-arrow-right"></span>
</a>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="call-to-action">
<div class="call-to-action__image">
<img src="https://placehold.co/286x180/png" alt="Test">
</div>
<div class="call-to-action__content">
<h4 class="call-to-action__title">Sit aute sunt officia</h4>
<p class="call-to-action__subtitle">Consectetur quis mollit ut laboris Lorem non consequat occaecat in ad qui dolor.</p>
<a href="#" class="call-to-action__link a-btn">
Sunt dolor reprehenderit
<span class="icon far fa-fw fa-long-arrow-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="newsletter">
<div class="newsletter__header bg-denim">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-12">
<h1 class="m-0 c-white">Become an Insider</h1>
</div>
<div class="col-12 col-lg-7">
<h2 class="m-0 c-white">Feel like you're on the outside looking in? AFW newsletters share exclusive deals and insights for designing inside your home.</h2>
</div>
</div>
</div>
</div>
<div class="newsletter__graphic">
<div class="container">
<picture>
<source media="(max-width:576px)" srcset="//placehold.co/576x140/FFD018/FFFFFF"/>
<source media="(max-width:768px)" srcset="//placehold.co/768x140/FFD018/FFFFFF"/>
<source media="(max-width:992px)" srcset="//placehold.co/992x140/FFD018/FFFFFF"/>
<img src="//placehold.co/1342x140/FFD018/FFFFFF" alt="Newsletter Graphic"/>
</picture>
</div>
</div>
<div class="newsletter__content">
<div class="container br-8 pb-32">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-4">
<h3 class="text-center">You’re on your way to becoming an AFW Insider!</h3>
<h4 class="text-center">Make sure we’ve got everything correct to ensure that you receive AFW email and/or text promotions.</h4>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<form class="form">
<div class="form__field">
{% render '@form--label', { label: "First Name" }, true %}
{% render '@form--text', { label: "First Name", placeholder: "First Name" } %}
</div>
<div class="form__field">
{% render '@form--label', { label: "Last Name" }, true %}
{% render '@form--text', { label: "Last Name", placeholder: "Last Name" } %}
</div>
<div class="form__field">
{% render '@form--label', { label: "Email Address" }, true %}
{% render '@form--text', { label: "Email Address", placeholder: "Email Address" } %}
</div>
<div class="form__field">
{% render '@form--label', { label: "Birthday" }, true %}
{% render '@form--text', { label: "Birthday", placeholder: "Birthday" } %}
</div>
<div class="form__field">
{% render '@form--label', { label: "Phone Number" }, true %}
{% render '@form--text', { label: "Phone Number", placeholder: "Phone Number" } %}
</div>
<div class="form__field">
{% render '@form--switch', { label: "Send Me Text Promotions", checked: true }, true %}
</div>
<div class="text-center">
{% render '@button--primary', { text: 'Sign Me Up' }, true %}
</div>
</form>
</div>
</div>
<div class="newsletter__ctas">
<div class="row justify-content-center">
<div class="col-12 col-md-4">
{% render '@call-to-action' %}
</div>
<div class="col-12 col-md-4">
{% render '@call-to-action' %}
</div>
<div class="col-12 col-md-4">
{% render '@call-to-action' %}
</div>
</div>
</div>
</div>
</div>
</div>
{
"test": null
}
.newsletter {
$this: &;
&__header {
position: relative;
padding: rem(32px);
padding-bottom: rem(100px);
z-index: 0;
}
&__graphic {
position: relative;
top: rem(-70px);
z-index: 2;
img {
border-radius: rem(8px);
height: rem(140px);
}
.container {
position: relative;
}
.a-btn {
position: absolute;
top: 50%;
right: rem(48px);
transform: translateY(-50%);
}
}
&__content {
margin-bottom: rem(-190px);
position: relative;
top: rem(-190px);
z-index: 1;
.container {
background-color: $color-white;
box-shadow: 0 rem(-16px) rem(16px) rgba($color-black, 0.03);
padding-top: rem(140px);
}
}
&__ctas {
@include media-xl-up {
padding-inline: rem(64px);
}
}
.form {
margin-top: rem(16px);
margin-bottom: rem(32px);
&__label {
font-weight: 600;
font-size: rem(16px);
margin-bottom: rem(8px);
}
&__field {
margin-bottom: rem(16px);
}
}
}
No notes defined.