JMT Alimentation Animal
Project version : 1.0.3

Section Newsletter: In Sidebar 

<aside class="site-sidebar">
    <section class="section section-newsletter">
        <div class="container section-newsletter__container">
            <div class="section-newsletter__title">
                <h5>Rejoignez la communauté JMT !</h5>
                <p>Recevez des informations sur les produits, les offres et les magasins.</p>
            </div>

            <form action="" method="" class="form--newsletter form--newsletter--lighter">
                <label>Votre adresse e-mail</label>
                <div class="input-icon__container">
                    <i class="icon icon--enveloppe icon--enveloppe--gray"></i>
                    <input type="text" aria-label="Votre adresse e-mail" />
                </div>

                <input type="submit" class="button" value="Inscrivez-vous !" />

                <label class="checkbox-container form--newsletter__opt-in">
               <input type="checkbox"/>
               <span>En cochant cette case, vous acceptez nos <a href="">politiques de confidentialité</a></span>
            </label>
            </form>
        </div>
    </section>
</aside>
 
<aside class="site-sidebar">
   <section class="section section-newsletter">
      <div class="container section-newsletter__container">
         <div class="section-newsletter__title">
            <h5>Rejoignez la communauté JMT !</h5>
            <p>Recevez des informations sur les produits, les offres et les magasins.</p>
         </div>

         {{> @form-newsletter lighter=true }}
      </div>
   </section>
</aside>
 
/* No context defined for this component. */
  • Content: 
    .section-newsletter {
   padding: $margin-xl 0;
   background: $c-brown-dark;
   color: $c-white;

   &__container {
      @include mediaWQuery($media-query-m) {
         display: flex;
         align-items: center;
         form { width: 100% }
      }

      @include mediaWQuery($media-query-l) {
         form { width: 60% }
      }
   }

   &__title {
      @include mediaWQuery($media-query-m) {
         width: 100%;
         max-width: 500px;
         flex-grow: 1;
         margin-right: $margin-xl;

         > h5 { margin: 0 }
         > p {
            max-width: 35ch;
            margin-bottom: 0;
         }
      }
   }

   input[type="submit"] {
      @include mediaWQuery($media-query-m) {
         padding-left: 1rem;
         padding-right: 1rem;
      }

      @include mediaWQuery($media-query-l) {
         padding-left: 2rem;
         padding-right: 2rem;
      }
   }
}

.site-sidebar {
   .section-newsletter {
      padding: 1.5rem 0;
      border-bottom: 10px solid darken($c-brown-dark, 20%);

      &__title h5 { font-size: rem(27) }
      &__title p { display: none }

      &__container {
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
      }

      form {
         width: 100%;
         flex-direction: column;
         margin-top: $margin-m;
      }

      form .input-icon__container {
         margin-bottom: .7rem;
      }

      form input[type="text"] {
         padding: .5rem;
         border-radius: $border-radius-xs !important;
      }

      form input[type="submit"] {
         border-radius: $border-radius-xs !important;
      }

      form .checkbox-container {
         margin-top: .7rem;
         font-size: rem(16);
      }

      form .icon { display: none }
   }
}
  • URL: /components/raw/section-newsletter/section-newsletter.scss
  • Filesystem Path: components/06-components/10-sections/01-section-newsletter/section-newsletter.scss
  • Size: 1.8 KB

There are no notes for this item.