Fractal Starter
Project version : 0.1.2

Footer 

<div class="block-search" id="modal-block-search">
    <button class="block-search__close button js-close-search">
      <i class="icon icon--close"></i>
      <span>Annuler ma recherche</span>
   </button>

    <form class="block-search__form container container-l form-search" action="#" method="POST">
        <label>Rechercher parmi nos 2000 produits</label>
        <span class="input-container">
         <input type="search" />
         <button type="submit"><i class="icon icon--search icon--search-black"></i></button>
      </span>
    </form>

    <div class="block-search__result">

        <div class="container cards-result">
            <p class="result-number">127 produits répondent à votre recherche</p>

            <div class="cards-result__listing">
            </div>
        </div>

    </div>
</div>
<footer>
    <div class="container">
        <div class="subfooter container container-m">
            <nav class="nav__footer">
                <h6>Location</h6>
                <button class="js-nav-toogle">Location</button>

                <ul>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                </ul>
            </nav>
            <nav class="nav__footer">
                <h6>Mariages</h6>
                <button class="js-nav-toogle">Mariages</button>

                <ul>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                </ul>
            </nav>
            <nav class="nav__footer">
                <h6>Événements</h6>
                <button class="js-nav-toogle">Événements</button>

                <ul>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                </ul>
            </nav>
            <nav class="nav__footer">
                <h6>XXL Organisation</h6>
                <button class="js-nav-toogle">XXL Organisation</button>

                <ul>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                    <li><a href="">Lien</a></li>
                </ul>
            </nav>
        </div>

        <div class="footer">
            <div class="logo">
                <img src="/images/logo-label.png" alt="Logo Label des prestataires de service du spectacle vivant" />
            </div>

            <div class="copyright">
                &copy XXL Organisation 2019

                <ul class="lst__unstyled lst__inline">
                    <li><a href="#">Mentions légales</a></li>
                    <li><a href="#">Politique de confidentialité</a></li>
                </ul>
            </div>

            <div class="animated-icons">
                Réalisé avec
                <div class="icons js-animate-icons">
                    <div class="icons-container">
                        <svg aria-hidden="true" data-prefix="fas" data-icon="cheeseburger" class="svg-inline--fa fa-cheeseburger fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 256h-48l-96 64-96-64H48a48 48 0 0 0 0 96h416a48 48 0 0 0 0-96zM58.6 224h394.7c34.6 0 54.6-43.9 34.8-75.9C448 83.2 359.5 32.1 256 32c-103.5.1-192 51.2-232.2 116.1-19.8 32 .3 75.9 34.8 75.9zM384 112a16 16 0 1 1-16 16 16 16 0 0 1 16-16zM256 80a16 16 0 1 1-16 16 16 16 0 0 1 16-16zm-128 32a16 16 0 1 1-16 16 16 16 0 0 1 16-16zm352 272H32a16 16 0 0 0-16 16v16a64.06 64.06 0 0 0 64 64h352a64.06 64.06 0 0 0 64-64v-16a16 16 0 0 0-16-16z"/></svg>
                        <svg aria-hidden="true" data-prefix="fas" data-icon="french-fries" class="svg-inline--fa fa-french-fries fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M432 224h-34c-6.92 0-13.7 4.27-15.19 11-8.6 39-62.09 69-126.79 69s-118.19-30-126.79-69c-1.49-6.76-8.27-11-15.19-11H80a16 16 0 0 0-15.62 19.47l54.1 243.47A32 32 0 0 0 149.73 512h212.54a32 32 0 0 0 31.24-25.06l54.1-243.47A16 16 0 0 0 432 224zm-80.45 4.14c.4-1.78 1.46-3.22 2.06-4.91l30.14-172.46a16 16 0 0 0-20.34-18.08l-34.28 10.25c-4.24 1.27-7.17 4.51-9.13 8.33v207.27c17.55-8.38 29.15-19.54 31.54-30.4zm79.9-36.14l16.3-93.23a16 16 0 0 0-20.34-18.08l-17.31 5.17-18.75 107.26c2.24-.32 4.33-1.12 6.63-1.12zM288 268.78V32a16 16 0 0 0-8.84-14.31l-32-16A16 16 0 0 0 224 16v252.78a160.62 160.62 0 0 0 64 0zM114 192c3.6 0 7 1 10.35 1.75l-20-107.16-19.74-5.9a16 16 0 0 0-20.36 18.08L80.55 192zm78 66.54V33.17l-3.76-20.1a16 16 0 0 0-25.39-9.81l-28.51 21.62a16 16 0 0 0-6.07 15.69l36.9 197.22c5.3 7.58 14.49 14.86 26.83 20.75z"/></svg>
                        <svg aria-hidden="true" data-prefix="fas" data-icon="beer" class="svg-inline--fa fa-beer fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M368 96h-48V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24v-42.11l80.606-35.977C429.396 365.063 448 336.388 448 304.86V176c0-44.112-35.888-80-80-80zm16 208.86a16.018 16.018 0 0 1-9.479 14.611L320 343.805V160h48c8.822 0 16 7.178 16 16v128.86zM208 384c-8.836 0-16-7.164-16-16V144c0-8.836 7.164-16 16-16s16 7.164 16 16v224c0 8.836-7.164 16-16 16zm-96 0c-8.836 0-16-7.164-16-16V144c0-8.836 7.164-16 16-16s16 7.164 16 16v224c0 8.836-7.164 16-16 16z"/></svg>
                        <svg aria-hidden="true" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg>
                    </div>
                </div>
                par
                <a rel="noopener" href="http://www.mediakod.com" title="Mediakod" class="mycopy" target="_blank">
               <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="30" height="30" viewBox="0 0 595.2 524.2"><path d="M528 409.5v-45.3V162.5c0 0-0.5-5.4-2.9-12.6 -1.8-6.7-5-12.8-9.4-18 -4.3-5.6-10.2-10.5-18-13.5 -5.8-2.5-12.2-3.9-19-3.9h-92.3c0.8 0-79 92-84.6 98.3L209.5 115h-0.3c-0.3-0.3-0.5-0.5-0.5-0.5 -47.6 0-82.3 0-82.3 0 -26.5 0-48 21.5-48 48v201.7 4.7c0 26.5 21.5 48 48 48h401.6M320.4 274.8l75-93.5h68.2l-81.8 92.4 83.8 90.5h-69L320.4 274.8z"></path></svg>
            </a>
            </div>
        </div>
    </div>
</footer>
 
{{> @block-search }}

<footer>
   <div class="container">
      <div class="subfooter container container-m">
         {{> @nav-footer nav_footer=footer_menu.menu_location}}
         {{> @nav-footer nav_footer=footer_menu.menu_mariage}}
         {{> @nav-footer nav_footer=footer_menu.menu_events}}
         {{> @nav-footer nav_footer=footer_menu.menu_about}}
      </div>

      <div class="footer">
         <div class="logo">
            <img src="/images/logo-label.png" alt="Logo Label des prestataires de service du spectacle vivant" />
         </div>

         <div class="copyright">
            &copy {{site.title}} {{site.current_year}}

            <ul class="lst__unstyled lst__inline">
               {{#each footer_menu.menu_footer.items }}
               <li><a href="{{this.link}}">{{this.title}}</a></li>   
               {{/each}}
            </ul>
         </div>

         <div class="animated-icons">
            Réalisé avec
            <div class="icons js-animate-icons">
               <div class="icons-container">
                  <svg aria-hidden="true" data-prefix="fas" data-icon="cheeseburger" class="svg-inline--fa fa-cheeseburger fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 256h-48l-96 64-96-64H48a48 48 0 0 0 0 96h416a48 48 0 0 0 0-96zM58.6 224h394.7c34.6 0 54.6-43.9 34.8-75.9C448 83.2 359.5 32.1 256 32c-103.5.1-192 51.2-232.2 116.1-19.8 32 .3 75.9 34.8 75.9zM384 112a16 16 0 1 1-16 16 16 16 0 0 1 16-16zM256 80a16 16 0 1 1-16 16 16 16 0 0 1 16-16zm-128 32a16 16 0 1 1-16 16 16 16 0 0 1 16-16zm352 272H32a16 16 0 0 0-16 16v16a64.06 64.06 0 0 0 64 64h352a64.06 64.06 0 0 0 64-64v-16a16 16 0 0 0-16-16z"/></svg>
                  <svg aria-hidden="true" data-prefix="fas" data-icon="french-fries" class="svg-inline--fa fa-french-fries fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M432 224h-34c-6.92 0-13.7 4.27-15.19 11-8.6 39-62.09 69-126.79 69s-118.19-30-126.79-69c-1.49-6.76-8.27-11-15.19-11H80a16 16 0 0 0-15.62 19.47l54.1 243.47A32 32 0 0 0 149.73 512h212.54a32 32 0 0 0 31.24-25.06l54.1-243.47A16 16 0 0 0 432 224zm-80.45 4.14c.4-1.78 1.46-3.22 2.06-4.91l30.14-172.46a16 16 0 0 0-20.34-18.08l-34.28 10.25c-4.24 1.27-7.17 4.51-9.13 8.33v207.27c17.55-8.38 29.15-19.54 31.54-30.4zm79.9-36.14l16.3-93.23a16 16 0 0 0-20.34-18.08l-17.31 5.17-18.75 107.26c2.24-.32 4.33-1.12 6.63-1.12zM288 268.78V32a16 16 0 0 0-8.84-14.31l-32-16A16 16 0 0 0 224 16v252.78a160.62 160.62 0 0 0 64 0zM114 192c3.6 0 7 1 10.35 1.75l-20-107.16-19.74-5.9a16 16 0 0 0-20.36 18.08L80.55 192zm78 66.54V33.17l-3.76-20.1a16 16 0 0 0-25.39-9.81l-28.51 21.62a16 16 0 0 0-6.07 15.69l36.9 197.22c5.3 7.58 14.49 14.86 26.83 20.75z"/></svg>
                  <svg aria-hidden="true" data-prefix="fas" data-icon="beer" class="svg-inline--fa fa-beer fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M368 96h-48V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24v-42.11l80.606-35.977C429.396 365.063 448 336.388 448 304.86V176c0-44.112-35.888-80-80-80zm16 208.86a16.018 16.018 0 0 1-9.479 14.611L320 343.805V160h48c8.822 0 16 7.178 16 16v128.86zM208 384c-8.836 0-16-7.164-16-16V144c0-8.836 7.164-16 16-16s16 7.164 16 16v224c0 8.836-7.164 16-16 16zm-96 0c-8.836 0-16-7.164-16-16V144c0-8.836 7.164-16 16-16s16 7.164 16 16v224c0 8.836-7.164 16-16 16z"/></svg>
                  <svg aria-hidden="true" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg>
               </div>
            </div>
            par
            <a rel="noopener" href="http://www.mediakod.com" title="Mediakod" class="mycopy" target="_blank">
               <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="30" height="30" viewBox="0 0 595.2 524.2"><path d="M528 409.5v-45.3V162.5c0 0-0.5-5.4-2.9-12.6 -1.8-6.7-5-12.8-9.4-18 -4.3-5.6-10.2-10.5-18-13.5 -5.8-2.5-12.2-3.9-19-3.9h-92.3c0.8 0-79 92-84.6 98.3L209.5 115h-0.3c-0.3-0.3-0.5-0.5-0.5-0.5 -47.6 0-82.3 0-82.3 0 -26.5 0-48 21.5-48 48v201.7 4.7c0 26.5 21.5 48 48 48h401.6M320.4 274.8l75-93.5h68.2l-81.8 92.4 83.8 90.5h-69L320.4 274.8z"></path></svg>
            </a>
         </div>
      </div>
   </div>
</footer>
 
{
  "site": {
    "title": "XXL Organisation",
    "current_year": 2019,
    "social": {
      "title": "Suivez-nous",
      "icons": [
        {
          "title": "Facebook",
          "class": "facebook",
          "link": "#"
        },
        {
          "title": "Youtube",
          "class": "youtube",
          "link": "#"
        },
        {
          "title": "Twitter",
          "class": "twitter",
          "link": "#"
        },
        {
          "title": "Instagram",
          "class": "instagram",
          "link": "#"
        },
        {
          "title": "LinkedIn",
          "class": "linkedin",
          "link": "#"
        },
        {
          "title": "Vimeo",
          "class": "vimeo",
          "link": "#"
        }
      ]
    }
  },
  "footer_menu": {
    "menu_location": {
      "title": "Location",
      "items": [
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        }
      ]
    },
    "menu_events": {
      "title": "Événements",
      "items": [
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        }
      ]
    },
    "menu_mariage": {
      "title": "Mariages",
      "items": [
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        }
      ]
    },
    "menu_about": {
      "title": "XXL Organisation",
      "items": [
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        },
        {
          "title": "Lien",
          "link": "#"
        }
      ]
    },
    "menu_footer": {
      "items": [
        {
          "title": "Mentions légales",
          "link": "#"
        },
        {
          "title": "Politique de confidentialité",
          "link": "#"
        }
      ]
    }
  }
}
  • Content: 
    footer {
  position: relative;
  z-index: 5;
  background: $c-background-light;
  margin-top: $margin-xl;
  font-size: $font-size-footer;

  @include mediaWQuery($media-query-m) {
    margin-top: 200px;
  }

  > .container {
    position: relative;

    @include mediaWQuery($media-query-m) {
      &::before {
        content: "";
        position: absolute;
        display: block;
        top: -148px;
        right: 0;
        width: 245px;
        height: 150px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right bottom;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='246' height='150' viewBox='0 0 246 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.3 149.2L100 0h146L145 149z' fill='%23F5F3ED' fill-rule='evenodd' /%3E%3C/svg%3E");
      }
    }
  }

  @include mediaWQuery($media-query-m) {
  }

  // Footer navigation
  .subfooter {
    padding: 2rem 0;

    @include mediaWQuery($media-query-m) {
      padding: 3rem 1rem;

      @supports (display: flex) {
        display: flex;
        --margin: 1rem;
        --multiplier: calc(40rem - 100%);

        > .nav__footer {
          flex-grow: 1;
          //  flex-basis: calc(var(--multiplier * 999));
          flex-basis: 20%;
          word-break: break-all;

          padding: var(--margin, 1rem);
        }
      }
    }
  }

  .footer {
    .logo {
      margin-bottom: $margin-s;
      text-align: center;

      > img {
        margin-top: $margin-s;
        max-width: 75px;
        height: auto;
      }

      @include mediaWQuery($media-query-m) {
        text-align: left;
      }
    }
    .copyright {
      text-align: center;
      color: #8a7272;

      > ul {
        margin-top: $margin-s;
        @include mediaWQuery($media-query-m) {
          display: inline-block;
          margin-top: 0;
          padding-left: $margin-s;
          margin-left: $margin-xs;
          border-left: 1px solid $c-link-footer;
        }

        > li {
          > a {
            color: $c-link-footer;
            text-decoration: underline;
            text-decoration-color: transparent;
            transition: 0.3s ease;
            &:hover,
            &:focus {
              text-decoration-color: initial;
            }
          }

          @include mediaWQuery($media-query-m) {
            & + li {
              &::before {
                content: "-";
                display: inline-block;
                vertical-align: center;
                margin-right: $margin-xs;
              }
            }
          }
        }
      }
    }

    .animated-icons {
      line-height: 1;
      padding-bottom: $margin-xl;
      margin-top: 0.5rem;
      color: $c-link-footer;
      text-align: center;

      a {
        display: inline-block;
        width: 24px;
        vertical-align: middle;
        height: auto;
        margin-top: -1px;
        color: $c-link-footer;
        svg {
          height: auto;
          width: 100%;
        }
      }

      .icons {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        height: 15px;
        width: 15px;
        overflow: hidden;
        margin-top: -3px;

        .icons-container {
          position: absolute;
          width: 100%;
          top: 0;
          left: 0;
          font-size: 0;
          animation: animateCopyright 10s infinite;

          > svg {
            width: 15px;
            height: 15px;
          }
        }
      }
    }

    @keyframes animateCopyright {
      0% {
        transform: translateY(0);
      }
      20% {
        transform: translateY(0);
      }
      25% {
        transform: translateY(-15px);
      }
      45% {
        transform: translateY(-15px);
      }
      50% {
        transform: translateY(-30px);
      }
      70% {
        transform: translateY(-30px);
      }
      75% {
        transform: translateY(-45px);
      }
      95% {
        transform: translateY(-45px);
      }
      100% {
        transform: translateY(0);
      }
    }
  }
}

// Margin rules
#main + footer {
  margin-top: calc(#{$margin-footer} + 100px);

  @include mediaWQuery($media-query-m) {
    margin-top: calc(#{$margin-footer} + 170px);
  }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: components/06-components/21-footer/footer.scss
  • Size: 4.3 KB

There are no notes for this item.