{% include "footer_join" %}
<footer class="footer">
  <div class="footer-wrapper">
    <div class="footer-top">
      <div class="footer-top-left">
        <img class="footer-top-left-logo" src="https://s3.amazonaws.com/static.northpass.com/Omnisend/logo.png">
        <div class="footer-top-left-text">
          The top-rated marketing automation platform for ecommerce.
        </div>
        <img class="footer-top-left-badges" src="https://s3.amazonaws.com/static.northpass.com/Omnisend/omni_footer_badges_2022.png">
      </div>
      <div class="footer-top-right">
        <div class="footer-top-right-top">
          <div class="footer-top-right-top-text">
            Get insights about omnichannel marketing automation and Omnisend news. Once per month. No spam, ever!
          </div>
          <form class="footer-top-right-top-newsletter">
            <!-- keep the line below intact, don't divide into two lines! -->
            <input id="newsletter-form" class="footer-top-right-top-newsletter-input" placeholder="Enter your email"><button disabled id="newsletter-button" class="footer-top-right-top-newsletter-button">Subscribe</button>
          </form>
        </div>
        <div class="footer-top-right-bottom">
          <div class="footer-top-right-bottom-columns-wrapper">
            <div class="footer-top-right-bottom-column">
              <div class="footer-top-right-bottom-column-title">
                Product
              </div>
              <ul class="footer-top-right-bottom-column-list">
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/features/">
                    Features
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/pricing/">
                    Pricing
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/features/multi-store-accounts/">
                    Multi-Store Accounts
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/reviews-2/">
                    Reviews
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://support.omnisend.com/?_ga=2.135224433.1576613929.1535033507-843474724.1532935523">
                    Support
                  </a>
                </li>
              </ul>
            </div>

            <div class="footer-top-right-bottom-column">
              <div class="footer-top-right-bottom-column-title">
                Platforms
              </div>
              <ul class="footer-top-right-bottom-column-list">
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/shopify-email-marketing/">
                    Shopify
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/shopify-plus/">
                    Shopify Plus
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/bigcommerce-app/">
                    BigCommerce
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/omnisend-bookings-for-wix/">
                    Wix
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/woocommerce-plugin/">
                    WooCommerce
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="footer-top-right-bottom-columns-wrapper">
            <div class="footer-top-right-bottom-column">
              <div class="footer-top-right-bottom-column-title">
                Resources
              </div>
              <ul class="footer-top-right-bottom-column-list">
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/why-omnisend/">
                    Why Omnisend
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/blog/">
                    Blog
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://developers.omnisend.com/">
                    Developer center
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://partnerpage.omnisend.com/">
                    Freelancer/agency directory
                  </a>
                </li>
              </ul>
            </div>

            <div class="footer-top-right-bottom-column">
              <div class="footer-top-right-bottom-column-title">
                Comparisons
              </div>
              <ul class="footer-top-right-bottom-column-list">
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/mailchimp-alternative/">
                    Mailchimp alternatives
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/aweber-alternative/">
                    Aweber alternatives
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/constant-contact-alternative/">
                    Constant Contact alternatives
                  </a>
                </li>
                <li class="footer-top-right-bottom-column-list-element">
                  <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/blog/klaviyo-alternatives/">
                    Klaviyo alternatives
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="footer-top-right-bottom-column">
            <div class="footer-top-right-bottom-column-title">
              Omnisend
            </div>
            <ul class="footer-top-right-bottom-column-list">
              <li class="footer-top-right-bottom-column-list-element">
                <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/about/">
                  About us
                </a>
              </li>
              <li class="footer-top-right-bottom-column-list-element">
                <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/careers/">
                  Careers<span style="color: #1E2423; background: #88D880; padding: 3px; border-radius: 5px; font-weight: 400; margin-left: 6px; font-size: 10px;">HIRING</span>
                </a>
              </li>
              <li class="footer-top-right-bottom-column-list-element">
                <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/newsroom/">
                  Newsroom
                </a>
              </li>
              <li class="footer-top-right-bottom-column-list-element">
                <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/partners/">
                  Partner program
                </a>
              </li>
              <li class="footer-top-right-bottom-column-list-element">
                <a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/partner-portal/">
                  Partner portal
                </a>
              </li>
              <li class="footer-top-right-bottom-column-list-element">
                <a class="footer-top-right-bottom-column-list-element-link" href="https://appmarket.omnisend.com/app-list/home">
                  App market
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-bottom">
      <div class="footer-bottom-links">
        <div class="footer-bottom-links-text">
          © Omnisend 2022
        </div>
        <a class="footer-bottom-links-text" href="https://status.omnisend.com/">
          Status
        </a>
        <a class="footer-bottom-links-text" href="https://www.omnisend.com/data-processing-agreement/">
          Data processing agreement
        </a>
        <a class="footer-bottom-links-text" href="https://www.omnisend.com/terms/">
          Terms of use
        </a>
        <a class="footer-bottom-links-text" href="https://www.omnisend.com/privacy/">
          Privacy policy
        </a>
        <a class="footer-bottom-links-text" href="https://www.omnisend.com/anti-spam/">
          Anti-spam policy
        </a>
      </div>
      <div class="footer-bottom-social">
        <a class="footer-bottom-social-button" href="https://www.facebook.com/omnisend/">
          <i class="fa-brands fa-facebook"></i>
        </a>
        <a class="footer-bottom-social-button" href="https://twitter.com/omnisend">
          <i class="fa-brands fa-twitter"></i>
        </a>
        <a class="footer-bottom-social-button" href="https://www.linkedin.com/company/omnisend/">
          <i class="fa-brands fa-linkedin-in"></i>
        </a>
        <a class="footer-bottom-social-button" href="https://www.instagram.com/omnisend/">
          <i class="fa-brands fa-instagram"></i>
        </a>
        <a class="footer-bottom-social-button" href="https://www.youtube.com/channel/UCy0iaBjHUoF0DIbg8Ygj31A">
          <i class="fa-brands fa-youtube"></i>
        </a>
      </div>
    </div>
  </div>  
</footer>


<style>
  .footer {
      background: #1E2423;
      width: 100%;
  }
  .footer-wrapper {
    padding: 80px 4% 0;
  }
  .footer * {
      color: white;
      font-weight: 300;
      font-size: 0.9375rem;
      text-decoration: none !important;
  }
  .footer-top {
      display: flex;
      justify-content: space-between;
      padding-bottom: 80px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer-top-left {
      max-width: 300px;
  }
  .footer-top-left-logo {
      max-width: 180px;
  }
  .footer-top-left-text {
      margin: 50px 0;
  }
  .footer-top-left-badges {
      max-width: 272px;
  }
  .footer-top-right {
    width: min-content;
  }
  .footer-top-right-top {
      display: flex;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      justify-content: space-between;
  }
  .footer-top-right-top-text {
      width: 50%;
      font-size: 1.125rem;
      margin-right: 30px;
  }
  .footer-top-right-top-newsletter {
      margin: auto 0;
      display: flex;
  }
  .footer-top-right-top-newsletter-input {
      background: #FFFFFF19;
      color: white;
      padding: 12px 16px;
      border-radius: 5px 0 0 5px;
      min-width: 60%;
      border: none;
      outline: none !important;
  }
  .footer-top-right-top-newsletter-input::placeholder {
      color: #FFFFFF4C;
  }
  .footer-top-right-top-newsletter-button {
      background: #2F8481;
      color: white;
      padding: 12px 32px;
      border: none;
      border-radius: 0px 5px 5px 0px;
      font-weight: 400;
  }
  .footer-top-right-bottom {
      padding-top: 50px;
      display: flex;
      justify-content: space-evenly;
      float: right;
      width: min-content;
  }
  .footer-top-right-bottom-columns-wrapper {
    display: flex;
  }
  .footer-top-right-bottom-column {
      padding: 0 30px;
  }
  .footer-top-right-bottom-column-list {
      padding-left: 0;
  }
  .footer-top-right-bottom-column-title {
      font-family: 'Faktum', sans-serif;
      font-weight: 600;
      font-size: 1.125rem;
      padding-bottom: 18px;
  }
  .footer-top-right-bottom-column-list-element {
      padding: 6px 0;
      list-style-type: none;
      white-space: nowrap;
  }
  a.footer-top-right-bottom-column-list-element-link:hover {
      color: darkgray;
  }
  .footer-bottom {
      display: flex;
      justify-content: space-between;
      height: 100px;
  }
  .footer-bottom-links {
      display: flex;
      justify-content: space-evenly;
      margin: auto 0;
  }
  .footer-bottom-links-text {
      color: #ACB5B4;
      padding: 0 16px;
  }
  a.footer-bottom-links-text:hover {
      color: white ;
  }
  .footer-bottom-social {
      display: flex;
      justify-content: space-evenly;
      margin: auto 0;
  }
  .footer-bottom-social-button {
      padding: 0 12px;
      font-size: 1.125rem;
  }
  .footer-bottom-social-button .fa-brands {
      color: #ACB5B4;
  }

  .footer-bottom-social-button .fa-brands:hover {
      color: white;
  }

  .np-powered-by {
      background: #1E2423;
  }
  .np-powered-by-link {
    color: white !important;
  }

  @media only screen and (min-width: 1800px) {
    .footer-wrapper {
      padding: 80px 10% 0;
    }
    .footer-top-left-text {
      font-size: 1.25rem;
    }
    .footer-top-right-top-text {
      font-size: 1.25rem;
    }
    .footer-top-right-top-newsletter-input {
      font-size: 1.25rem;
    }
    .footer-top-right-bottom-column-title {
      font-size: 1.375rem;
    }
    .footer * {
      font-size: 1.125rem;
    }
    .footer-top-right-top-newsletter-button {
      font-size: 1.25rem;
    }
    .footer-bottom-social * {
      font-size: 1.5rem;
    }
    .homepage-join-button {
      font-size: 1.375rem;
    }
  }

  @media only screen and (max-width: 1350px) {
    .footer-top-right-bottom-column {
      padding: 0 20px;
    }
    .footer-top-right-bottom-column-list-element {
      white-space: normal;
    }
  }
  @media only screen and (max-width: 1150px) {
    .footer-top {
      flex-direction: column;
    }
    .footer-top-left {
      display: flex;
      justify-content: space-evenly;
      max-width: none;
    }
    .footer-top-left-badges {
      max-width: none;
      width: 30%;
      height: auto;
      object-fit: contain;
    }
    .footer-top-left-logo {
      max-width: none;
      width: 30%;
      height: auto;
      object-fit: contain;
    }
    .footer-top-left-text {
      width: 30%;
    }
    .footer-top-right {
      width: auto;
    }
    .footer-top-right-top {
      justify-content: space-between;
    }
    .footer-top-right-bottom {
      float: none;
      width: auto;
    }
  }
  @media only screen and (max-width: 1070px) {
    .footer-bottom-links-text {
      padding: 0 8px;
    }
  }
  @media only screen and (max-width: 800px) {
    .footer * {
      font-size: 1.2rem;
    }
    .footer-top-left, .footer-top-right, .footer-top-right-top, .footer-top-right-bottom, .footer-bottom, .footer-bottom-links {
      flex-direction: column;
    }
    .footer-top-left-badges{
      width: 90%;
    } 
    .footer-top-left-logo {
      width: 60%;
    } 
    .footer-top-left-text {
      width: 90%;
      font-size: 1.2rem;
      margin: 30px 0;
    }
    .footer-top-right-top-text {
      width: 100%;
      margin: 20px 0;
    }
    .footer-top-right-bottom-column {
      padding: 0 20px 20px 0;
      width: 220px;
    }
    .footer-top {
      padding-bottom: 40px;
    }
    .footer-bottom {
      height: auto;
    }
    .footer-bottom-links-text {
      padding: 6px 0;
    }
    .footer-top-right-bottom {
      padding-top: 30px;
    }
    .footer-bottom-social {
      margin: 20px 0;
    }
  }
  @media only screen and (max-width: 400px) {
    .footer-top-right-bottom-columns-wrapper {
      flex-direction: column;
    }
  }
</style>

<script>
  function checkIfEmailIsValid() {
    if ($("#newsletter-form")[0].value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
      $('#newsletter-button').prop("disabled", false);
    }
    else {
      $('#newsletter-button').prop("disabled", true);
    };
  };

  function SendInfos() {
    for (let x of document.cookie.split('; ')) {
      if (x.split('=')[0] == 'hubspotutk') {
        var HSCookie = x.split('=')[1];
        break;
      }
    };
    if (typeof HSCookie === 'undefined') {
      var HSCookie = 'undefined'
    };
    var xhr = new XMLHttpRequest();
    url = 'https://api.hsforms.com/submissions/v3/integration/submit/6548544/766142d2-5375-4562-96cb-9a2cbd6c675d';
    xhr.open("POST", url, true);

    getIPs()
    .then(function(result) {
      var userIP = result.join('\n');
      xhr.send(
        {
          "fields": [{
            "name": "email",
            "value": $('#newsletter-form').value
          }],
          "context": {
            "ipAddress": userIP, // Customer IP
            "hutk": HSCookie, // you can get value from js cookies (hubspotutk)
            "pageName": "Omnisend", // just page title
            "pageUri": window.location.href // link from where the subscription was made
          }
      });
    })
    .catch(function() {
      var userIP = '0.0.0.0';
      xhr.send(
        {
          "fields": [{
            "name": "email",
            "value": $('#newsletter-form').value
          }],
          "context": {
            "ipAddress": userIP, // Customer IP
            "hutk": HSCookie, // you can get value from js cookies (hubspotutk)
            "pageName": "Omnisend", // just page title
            "pageUri": window.location.href // link from where the subscription was made
          }
      });
    });
  };

  document.getElementById("newsletter-form").addEventListener('change', checkIfEmailIsValid);
  $('#newsletter-button').click(SendInfos);
</script>
