<div class="newsletter-optin">
    <div class="page-layout-md--default">
        <div class="newsletter-optin__title">The INNOQ Newsletter</div>
        <div class="newsletter-optin__subtitle">Nie mehr spannende Artikel, Veranstaltungstipps und Podcasts zu Architektur,
            Entwicklung und Technologietrends verpassen!</div>
        <remote-form>
            <form class="newsletter-optin__form" action="#" method="post">
                <div class="form-group newsletter-optin__inputfield">
                    <label for="newsletter_email" class="sr-only">E-Mail</label>
                    <input type="email" name="email" value="" class="form-control" id="newsletter_email" placeholder="Your email address">
                    <button type="submit" class="btn btn--small btn--cta" data-label="Subscribe">Subscribe</button>
                </div>
                <div class="form-group">
                    <div class="custom-form-control checkbox">
                        <input id="custom-checkbox-1" type="checkbox" class="form-control__input">
                        <label for="custom-checkbox-1" class="form-label">Hiermit willige ich in die Erhebung und Verarbeitung der vorstehenden
                            Daten für das Empfangen des monatlichen Newsletters der innoQ Deutschland
                            GmbH per E-Mail ein.Diese Einwilligung können Sie per E-Mail an info@innoq.com,
                            direkt per Link in der Newsletter-Email oder an die im Impressum genannten
                            Kontaktdaten jederzeit widerrufen. Die Datenschutzerklärung der innoQ Deutschland
                            GmbH habe ich Kenntnis genommenund bestätige dies mit Absendung des Formulars.</label>
                    </div>
                </div>
            </form>
        </remote-form>
    </div>
</div>
<div class="newsletter-optin">
    <div class="page-layout-md--default">
        <div class="newsletter-optin__title">The INNOQ Newsletter</div>
        <div class="newsletter-optin__subtitle">Nie mehr spannende Artikel, Veranstaltungstipps und Podcasts zu Architektur, Entwicklung und Technologietrends verpassen!</div>
        <remote-form>
            <form class="newsletter-optin__form" action="#" method="post">
                <div class="form-group newsletter-optin__inputfield">
                    <label for="newsletter_email" class="sr-only">E-Mail</label>
                    <input type="email" name="email" value="" class="form-control" id="newsletter_email" placeholder="Your email address" />
                    <button type="submit" class="btn btn--small btn--cta" data-label="Subscribe">Subscribe</button>
                </div>
                <div class="form-group">
                    <div class="custom-form-control checkbox">
                        <input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
                        <label for="custom-checkbox-1" class="form-label">Hiermit willige ich in die Erhebung und Verarbeitung der vorstehenden Daten für das Empfangen des monatlichen Newsletters
                            der innoQ Deutschland GmbH per E-Mail ein.Diese Einwilligung können Sie per E-Mail an info@innoq.com, direkt per Link in der Newsletter-Email oder an die im Impressum
                            genannten Kontaktdaten jederzeit widerrufen. Die Datenschutzerklärung der innoQ Deutschland GmbH habe ich Kenntnis genommenund bestätige dies mit Absendung des Formulars.</label>
                    </div>
                </div>
            </form>
        </remote-form>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    .newsletter-optin {
      $gradient-from: rgba(0, 0, 0, .6);
      $gradient-to: rgba(0, 0, 0, .3);
    
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-image: linear-gradient($gradient-from, $gradient-to), asset-url('visual-newsletter.jpg');
      background-size: cover;
      padding: $spacer-lg;
      overflow: hidden;
      text-align: center;
      color: $newsletter-optin-color;
    }
    
    .newsletter-optin__title {
      @extend %h1;
      margin-bottom: $spacer-sm;
      color: $newsletter-optin-color;
    }
    
    .newsletter-optin__subtitle {
      @extend %h5;
      margin-bottom: $spacer-lg;
      color: $newsletter-optin-color;
    }
    
    .newsletter-optin__form {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    
      .form-control {
        border: 0;
        padding: $spacer-sm $spacer-md;
        font-size: $button-small-font-size;
      }
    }
    
    .newsletter-optin__inputfield {
      display: flex;
      flex-direction: row;
    
      .btn {
        margin-bottom: 0;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .newsletter-optin__form {
        display: flex;
        justify-content: center;
    
        .form-group {
          margin-bottom: 0;
        }
      }
    }
    
  • URL: /components/raw/newsletter-optin/_newsletter-optin.scss
  • Filesystem Path: components/02-molecules/newsletter-optin/_newsletter-optin.scss
  • Size: 1.2 KB
  • Handle: @newsletter-optin
  • Preview:
  • Filesystem Path: components/02-molecules/newsletter-optin/newsletter-optin.html

There are no notes for this item.