Fractal Starter
Project version : 0.1.2

Hero Frontpage 

<div class="hero hero--frontpage">
    <div class="container hero--inner">
        <a href="#openVideo" id="openVideoBtn" class="block-modal-video">
            <div class="block-modal-video__container">
                <video autoplay preload muted loop>
               <source src="../../videos/xxl-video-homepage.mp4" type="video/mp4"> 
               <source src="../../videos/xxl-video-homepage.webm" type="video/webm"> 
            </video>

                <h2>Donnez<br>une autre dimension<br>à vos événements</h2>
            </div>

            <span>Lire la vidéo</span>
        </a>
    </div>
</div>

<div class="modal-video">
    <div class="modal-video__container">
        <div class="modal-video__container-close">
            <button class="button mk-icon-close btn__unstyled" id="closeVideoBtn">
            <svg aria-hidden="true" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="#000" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
            Fermer
         </button>
        </div>

        <div class="modal-video__container-iframe">
            <iframe src="https://player.vimeo.com/video/108018156" width="640" height="360" autoplay="true" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
        </div>
    </div>
</div>
 
<div class="hero hero--frontpage">
   <div class="container hero--inner">
      {{> @block-video }}
   </div>
</div>

<div class="modal-video">
   <div class="modal-video__container">
      <div class="modal-video__container-close">
         <button class="button mk-icon-close btn__unstyled" id="closeVideoBtn">
            <svg aria-hidden="true" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="#000" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
            Fermer
         </button>
      </div>

      <div class="modal-video__container-iframe">
         <iframe src="https://player.vimeo.com/video/108018156" width="640" height="360" autoplay="true" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
      </div>
   </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .hero--frontpage {
   position: relative;
   margin-bottom: $margin-l;
   background-color: $c-black;

   @include mediaWQuery($media-query-l) {
      padding-bottom: 16.5%;
   }

   &::before {
      background-color: $c-black;
      background-image: url("../images/herofront-bg.jpg");

      @include mediaWQuery($media-query-l) {
         content: "";
         position: absolute;
         top: -400px;
         left: -100px;
         width: calc(100% + 200px);
         height: calc(100% + 400px);
         margin-bottom: $margin-xl;

         background-position: bottom center;
         background-size: cover;
         background-repeat: no-repeat;
      }

      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
         background-image: url("../images/herofront-bg@2x.jpg");
      }
   }

   .hero--inner {
      display: grid;

      @include mediaWQuery($media-query-l) {
         grid-template-columns: 4fr 2fr;
         padding-top: 5rem;
         padding-bottom: 5rem;
      }

      .block-modal-video {
         grid-column: 1/2;
         margin-left: -1rem;
         margin-right: -1rem;
         transform: translateZ(0);

         @include mediaWQuery($media-query-l) {
            margin: 0;
            height: auto;
         }
      }
   }
}
  • URL: /components/raw/hero-frontpage/hero-frontpage.scss
  • Filesystem Path: components/06-components/15-heros/01-hero-frontpage/hero-frontpage.scss
  • Size: 1.3 KB

There are no notes for this item.