<div class="banner ">
    <div class="full-height hero">
        <div class="video-frame-container">
            <div class='video-background ' data-youtube-id=""></div>
            <img class="video-placeholder dp-md-n" src="" alt="">
        </div>
        <div class="tint layer-2">
            <div class="cta hero">
                <h1>SOCIAL IMPACT</h1>
                <div class="hr dp-md-n"></div>
                <h2>We’re in the people business, serving coffee.</h2>
                <p>That means exceeding the expectations of our customers and the over 23,000 Canadian employees we call partners. Many of us join to be part of something bigger than ourselves — to make a difference in our communities. These are our voices.</p>
                <a href="https://www.youtube.com/watch?v=8cwhxoIFKQ0" data-lity class="button large dp-n dp-lg-b">Watch story</a>
                <a href="https://www.youtube.com/watch?v=8cwhxoIFKQ0" target="_blank" class="button large dp-nb dp-lg-n">Watch story</a>
            </div>

        </div>

    </div>

</div>
<div class="banner ">
    <div class="full-height hero">
        {{render '@video-background' heroBanner}}
        <div class="tint layer-2">
            {{render '@cta-big--hero' heroBanner}}
            {{render '@scroll-icon'}}
        </div>

    </div>

</div>
{
  "heroBanner": {
    "backgroundAsset": null,
    "headerMain": "SOCIAL IMPACT",
    "subHeader": "We’re in the people business, serving coffee.",
    "copyText": "That means exceeding the expectations of our customers and the over 23,000 Canadian employees we call partners. Many of us join to be part of something bigger than ourselves — to make a difference in our communities. These are our voices.",
    "youTubeId": "8cwhxoIFKQ0",
    "buttonText": "Watch story",
    "bgAlt": null
  },
  "bannerLeft": {
    "backgroundAsset": "https://media.glassdoor.com/l/35/fa/c7/4d/starbucks-partners.jpg",
    "headerMain": null,
    "subHeader": "Together we inspire. ",
    "copyText": "Our partners, customers, suppliers and neighbours are leading in an inclusive society and a healthy environment. ",
    "youTubeId": "8cwhxoIFKQ0",
    "buttonText": "diannes story",
    "bgAlt": null
  },
  "bannerRight": {
    "backgroundAsset": "http://vadis.org/wp-content/uploads/2015/07/drew-award.jpg",
    "headerMain": null,
    "subHeader": "Together we act.",
    "copyText": "As Canada faces complex social issues, we’re finding new ways to solve them.",
    "youTubeId": "8cwhxoIFKQ0",
    "buttonText": "greg's story",
    "bgAlt": null
  },
  "middleBanner": {
    "backgroundAsset": "http://vadis.org/wp-content/uploads/2015/07/drew-award.jpg",
    "headerMain": null,
    "subHeader": "Together we act.",
    "copyText": "As Canada faces complex social issues, we’re finding new ways to solve them.",
    "youTubeId": "8cwhxoIFKQ0",
    "buttonText": null,
    "bgAlt": null
  }
}
  • Content:
    .banner {
      width: 100%;
      flex-direction: column;
      overflow: visible;
    
      .hr {
        height: 1px;
        width: 100px;
        border: 1px solid $light;
        background-color: $light;
      }
    
      .half {
        overflow: hidden;
        width: 100%;
        position: relative;
        min-height: 400px;
        height: 100vh;
        max-height: 400px;
    
    
        img {
          transition: all 500ms ease-in-out;
        }
    
        .cta {
          width: 100%;
    
          p {
            height: 95px;
            vertical-align: center;
          }
    
          a {
            margin: 16px 0;
          }
    
          margin:0;
        }
    
        .tint {
          min-height: 400px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
    
      }
    
      .tint {
        opacity: 0;
        @extend %flex-col;
        animation: fadeIn 1s 1s linear forwards;
        min-height: $min-height-banner;
    
    
      }
    
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
    
        to {
          opacity: 1;
        }
      }
    
      @include respond-above(md) {
        flex-direction: row;
    
        .cta {
    
          a {
            margin-bottom: 80px;
          }
    
    
          p {
            max-width: 675px;
          }
    
    
          &.hero {
            height: calc($min-height-banner - 98px);
            // min-height: $min-height-banner;
            padding-bottom: 20px;
            margin: 10px auto;
    
            h2 {
              max-width: 700px;
            }
    
            h2 {
              margin: 0 auto;
            }
    
            p {
    
              margin: 50px 0;
              line-height: 32px;
            }
    
          }
        }
    
        .half {
          width: 50%;
          max-height: unset;
          min-height: 600px;
    
          .cta {
            min-height: 300px;
            max-width: 860px;
    
            h2 {
              margin: 0 0 20px;
              width: 244px;
            }
    
            p {
              font-size: 22px;
              line-height: 30px;
              height: 165px;
            }
          }
    
    
          &:hover {
            z-index: 999;
    
            img {
              transform: scale(1.1);
            }
          }
        }
      }
    
      @include respond-above(lg) {
    
        .cta {
          &.hero {
            $min-height-banner: 800px;
            height: calc($min-height-banner -98px);
          }
        }
    
        .half {
          min-height: 100vh;
    
          .tint {
            justify-content: flex-end;
          }
    
          .cta {
            h2 {
              width: 320px;
            }
    
            p {
              width: 480px;
              height: 110px;
            }
    
            a {
              margin-bottom: 80px;
            }
          }
        }
      }
    }
    
    .fr {
      .banner {
        @include respond-above(md) {
          .half {
            p {
    
            }
          }
        }
    
        @include respond-above(lg) {
          .half {
            p {
              // font-size: 21px;
              min-width: 515px;
            }
          }
        }
      }
    }
  • URL: /components/raw/banner/_banner.scss
  • Filesystem Path: structures/03-organisms/banner/_banner.scss
  • Size: 2.6 KB

There are no notes for this item.