<section class="SectionSwapper _split js-sectionswapper">
<section class="section _centered js-sectionswapper-content">
<div class="row">
<div class="col _span-12" style="max-width: 550px; margin: 0 auto;">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><circle fill="#54C6D6" cx="60" cy="60" r="60"/><path fill="#12859A" d="M90 47H30v41c0 2.2 1.8 4 4 4h52c2.2 0 4-1.8 4-4V47z"/><path fill="#0898AF" d="M93 52H27V41c0-2.2 1.8-4 4-4h58c2.2 0 4 1.8 4 4v11z"/><path fill="#E8EAE9" d="M53 52h14v40H53z"/><path fill="#FFF" d="M52 37h16v15H52z"/><path fill="#DEE1E1" d="M75 22.6c3 0 5.4 2.4 5.4 5.4S78 33.4 75 33.4H64.2c2.8-3.7 5.4-7.2 5.8-7.6.9-1.1 3-3.2 5-3.2m0-3.6c-4 0-7.1 3.6-7.8 4.5C66.5 24.4 57 37 57 37h18c5 0 9-4 9-9s-4-9-9-9z"/><path fill="#DEE1E1" d="M45 22.6c2 0 4.1 2.1 5 3.1.3.4 3 3.9 5.8 7.6H45c-3 0-5.4-2.4-5.4-5.4s2.4-5.3 5.4-5.3m0-3.6c-5 0-9 4-9 9s4 9 9 9h18s-9.5-12.6-10.2-13.5C52.1 22.6 49 19 45 19z"/></svg>
<h1 style="margin-top: 1.5rem;">We’ve Got Sprout Swag Just For You!</h1>
<p class="lead">Thanks for attending Sprout’s webinar. We’re glad you spent time learning about the Sprout platform and hope you’re more comfortable with all that it has to offer. Enjoy some cool gear on us!</p>
</div>
</div>
<div class="row" style="display: none;">
<div class="col _span-12" style="max-width: 550px; margin: 0 auto;">
<h1>Your Sprout Swag Is on Its Way!</h1>
<p class="spacedout _gray">Stay Connected With Sprout</p>
<div style="margin-top: 1.5rem;">
<a class="IconButton icon _circle _before _small _blue _twitter" href="https://twitter.com/sproutsocial" title="Sprout Social Twitter" target="_blank"></a>
<a class="IconButton icon _circle _before _small _blue _facebook" href="https://www.facebook.com/SproutSocialInc/?fref=ts" title="Sprout Social Facebook" target="_blank"></a>
<a class="IconButton icon _circle _before _small _red _googleplus" href="https://plus.google.com/+sproutsocial/posts" title="Sprout Social Google+" target="_blank"></a>
<a class="IconButton icon _circle _before _small _blue _linkedin" href="https://www.linkedin.com/company/sprout-social-inc-" title="Sprout Social Linkedin" target="_blank"></a>
</div>
</div>
</div>
</section>
<section class="section _centered _teal js-sectionswapper-form">
<div class="col _span-12">
<h3>Fill This Out and Check Your Mail Soon.</h3>
<form action="#" class="Form _dark js-swapform">
<div class="row">
<div class="col _span-6">
<label>
<span>First Name</span>
<input name="FirstName" type="text" required>
</label>
</div>
<div class="col _span-6">
<label>
<span>Last Name</span>
<input name="LastName" type="text" required>
</label>
</div>
</div>
<div class="row">
<div class="col _span-12">
<label>
<span>Company Name</span>
<input name="CompanyName" type="text" required>
</label>
</div>
</div>
<div class="row">
<div class="col _span-12">
<label>
<span>Street Address</span>
<input name="StreetAddress" type="text" required>
</label>
</div>
</div>
<div class="row">
<div class="col _span-12">
<label>
<span>Street Address 2</span>
<input name="StreetAddress2" type="text">
</label>
</div>
</div>
<div class="row">
<div class="col _span-12">
<label>
<span>City</span>
<input name="City" type="text" required>
</label>
</div>
</div>
<div class="row">
<div class="col _span-6">
<label>
<span>Zip/ Postal Code</span>
<input name="Zipcode" type="text" required>
</label>
</div>
<div class="col _span-6">
<label>
<span>State</span>
<div class="Form-select">
<select name="select" id="select">
<option value="" disabled selected>Select A State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</label>
</div>
</div>
<div class="row">
<div class="col _span-12">
<label>
<span>Email</span>
<input name="Email" type="text" value="justin@conwaydev.com" required>
</label>
</div>
</div>
<p><button class="button _inverse _large _submit js-savebutton">Send Me The Swag</button></p>
<p class="fineprint" style="color: #fff; margin-top: 0;">
One package per organization, please.
</p>
</form>
</div>
</section>
</section>
<script>
function setValue(event) {
var target = event.target;
target.setAttribute('value', target.value);
}
Array.prototype.forEach.call(document.querySelectorAll('input:not([type="hidden"])'), function(input) {
if (!input.value) {
input.setAttribute('value', '');
input.addEventListener('input', setValue);
}
});
(function() {
var SectionSwapper = document.querySelector('.js-sectionswapper');
if (SectionSwapper) {
// After half a second display the swapped section
setTimeout(function() {
SectionSwapper.classList.add('is-swapped');
}, 1000);
}
})();
</script>
<section class="SectionSwapper _split js-sectionswapper">
<section class="section _centered js-sectionswapper-content">
<div class="row">
<div class="col _span-12" style="max-width: 550px; margin: 0 auto;">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><circle fill="#54C6D6" cx="60" cy="60" r="60"/><path fill="#12859A" d="M90 47H30v41c0 2.2 1.8 4 4 4h52c2.2 0 4-1.8 4-4V47z"/><path fill="#0898AF" d="M93 52H27V41c0-2.2 1.8-4 4-4h58c2.2 0 4 1.8 4 4v11z"/><path fill="#E8EAE9" d="M53 52h14v40H53z"/><path fill="#FFF" d="M52 37h16v15H52z"/><path fill="#DEE1E1" d="M75 22.6c3 0 5.4 2.4 5.4 5.4S78 33.4 75 33.4H64.2c2.8-3.7 5.4-7.2 5.8-7.6.9-1.1 3-3.2 5-3.2m0-3.6c-4 0-7.1 3.6-7.8 4.5C66.5 24.4 57 37 57 37h18c5 0 9-4 9-9s-4-9-9-9z"/><path fill="#DEE1E1" d="M45 22.6c2 0 4.1 2.1 5 3.1.3.4 3 3.9 5.8 7.6H45c-3 0-5.4-2.4-5.4-5.4s2.4-5.3 5.4-5.3m0-3.6c-5 0-9 4-9 9s4 9 9 9h18s-9.5-12.6-10.2-13.5C52.1 22.6 49 19 45 19z"/></svg>
<h1 style="margin-top: 1.5rem;">We’ve Got Sprout Swag Just For You!</h1>
<p class="lead">Thanks for attending Sprout’s webinar. We’re glad you spent time learning about the Sprout platform and hope you’re more comfortable with all that it has to offer. Enjoy some cool gear on us!</p>
</div>
</div>
<div class="row" style="display: none;">
<div class="col _span-12" style="max-width: 550px; margin: 0 auto;">
<h1>Your Sprout Swag Is on Its Way!</h1>
<p class="spacedout _gray">Stay Connected With Sprout</p>
<div style="margin-top: 1.5rem;">
<a class="IconButton icon _circle _before _small _blue _twitter" href="https://twitter.com/sproutsocial" title="Sprout Social Twitter" target="_blank"></a>
<a class="IconButton icon _circle _before _small _blue _facebook" href="https://www.facebook.com/SproutSocialInc/?fref=ts" title="Sprout Social Facebook" target="_blank"></a>
<a class="IconButton icon _circle _before _small _red _googleplus" href="https://plus.google.com/+sproutsocial/posts" title="Sprout Social Google+" target="_blank"></a>
<a class="IconButton icon _circle _before _small _blue _linkedin" href="https://www.linkedin.com/company/sprout-social-inc-" title="Sprout Social Linkedin" target="_blank"></a>
</div>
</div>
</div>
</section>
<section class="section _centered _teal js-sectionswapper-form">
<div class="col _span-12">
<h3>Fill This Out and Check Your Mail Soon.</h3>
<form action="#" class="Form _dark js-swapform">
<div class="row">
<div class="col _span-6">
<label>
<span>First Name</span>
<input name="FirstName" type="text" required>
</label>
</div>
<div class="col _span-6">
<label>
<span>Last Name</span>
<input name="LastName" type="text" required>
</label>
</div>
</div>
<div class="row">
<div class="col _span-12">
<label>
<span>Company Name</span>
<input name="CompanyName" type="text" required>
</label>
</div>
</div>
<div class="row">
<div class="col _span-12">
<label>
<span>Street Address</span>
<input name="StreetAddress" type="text" required>
</label>
</div>
</div>
<div class="row">
<div class="col _span-12">
<label>
<span>Street Address 2</span>
<input name="StreetAddress2" type="text">
</label>
</div>
</div>
<div class="row">
<div class="col _span-12">
<label>
<span>City</span>
<input name="City" type="text" required>
</label>
</div>
</div>
<div class="row">
<div class="col _span-6">
<label>
<span>Zip/ Postal Code</span>
<input name="Zipcode" type="text" required>
</label>
</div>
<div class="col _span-6">
<label>
<span>State</span>
<div class="Form-select">
<select name="select" id="select">
<option value="" disabled selected>Select A State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</label>
</div>
</div>
<div class="row">
<div class="col _span-12">
<label>
<span>Email</span>
<input name="Email" type="text" value="justin@conwaydev.com" required>
</label>
</div>
</div>
<p><button class="button _inverse _large _submit js-savebutton">Send Me The Swag</button></p>
<p class="fineprint" style="color: #fff; margin-top: 0;">
One package per organization, please.
</p>
</form>
</div>
</section>
</section>
<script>
function setValue(event) {
var target = event.target;
target.setAttribute('value', target.value);
}
Array.prototype.forEach.call(document.querySelectorAll('input:not([type="hidden"])'), function (input) {
if (!input.value) {
input.setAttribute('value', '');
input.addEventListener('input', setValue);
}
});
(function() {
var SectionSwapper = document.querySelector('.js-sectionswapper');
if (SectionSwapper) {
// After half a second display the swapped section
setTimeout(function() {
SectionSwapper.classList.add('is-swapped');
}, 1000);
}
})();
</script>
/* No context defined for this component. */
.SectionSwapper {
transition: opacity 1s $transition-in-default $transition-time-500;
.section {
transition-property: opacity, left, width, transform, flex;
transition-duration: $transition-time-500;
will-change: width, flex;
> * {
transition: opacity $transition-time-500 $transition-in-default $transition-time-500;
}
}
}
.SectionSwapper.is-swapped {
.section {
transition: all $transition-time-500 $transition-in-default;
}
}
.SectionSwapper.is-faded {
opacity: 0;
visibility: hidden;
}
.SectionSwapper {
display: flex;
overflow: hidden;
&._centersections {
align-items: center;
}
.section {
width: 100%;
flex: 1 0 100%;
}
}
.SectionSwapper.is-swapped {
.section {
transform: translateX(-100%);
}
}
@media #{$desktop-media} {
.SectionSwapper._split {
.section:first-child {
width: 100%;
flex: 1 0 100%;
}
.section:last-child {
flex: 1 0 50%;
transform: translateX(100%);
}
}
.SectionSwapper._split.is-swapped {
.section:first-child {
flex: 1 0 50%;
transform: translateX(0);
}
.section:last-child {
transform: translateX(0);
}
}
}
There are no notes for this item.