<div class="commitment-slide">
    <div class="img-container ">
        <img src="https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg" alt="" class="main-img rounded">
        <img src="https://thumbs.mic.com/Mjk1YmZkMDkwZSMvajdmc0JIYjZRMnJrcXl1OWplWWhLQUhsQUNZPS81N3g0ODoxMzcxeDcyNi84MDB4NDUwL2ZpbHRlcnM6Zm9ybWF0KGpwZWcpOnF1YWxpdHkoODApL2h0dHBzOi8vczMuYW1hem9uYXdzLmNvbS9wb2xpY3ltaWMtaW1hZ2VzL3VqeDl5azRvZXJyczJobDdhcXRrejhwb2Z4dG9qeTBsN211Z2Q5emJnZGx4Z2h3ZWptYmpnenpxaDJwcGoweHouanBn.jpg"
            alt="" class="sub-img-1 rounded">
    </div>
</div>
<div class="commitment-slide">
  <div class="img-container ">
  <img src="{{mainImgSrc}}" alt="{{mainImgAlt}}" class="main-img rounded">
  <img src="{{subImg1Src}}" alt="{{subImg1Alt}}" class="sub-img-1 rounded">
  </div>
</div>
{
  "mainImgSrc": "https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg",
  "mainImgAlt": null,
  "subImg1Src": "https://thumbs.mic.com/Mjk1YmZkMDkwZSMvajdmc0JIYjZRMnJrcXl1OWplWWhLQUhsQUNZPS81N3g0ODoxMzcxeDcyNi84MDB4NDUwL2ZpbHRlcnM6Zm9ybWF0KGpwZWcpOnF1YWxpdHkoODApL2h0dHBzOi8vczMuYW1hem9uYXdzLmNvbS9wb2xpY3ltaWMtaW1hZ2VzL3VqeDl5azRvZXJyczJobDdhcXRrejhwb2Z4dG9qeTBsN211Z2Q5emJnZGx4Z2h3ZWptYmpnenpxaDJwcGoweHouanBn.jpg",
  "subImg1Alt": null,
  "subImg2Src": "https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg",
  "subImg2Alt": null,
  "subImg3Src": null,
  "subImg3Alt": "https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg",
  "lableLinkSrc": "www.starbucks.ca",
  "lableLinkText": "Starbucks is committed to being nice to plants"
}
  • Content:
    .commitment-slide {
      @extend %flex-col;
      width: 100%;
    
      img {
        object-fit: cover;
      }
    
      .img-container {
    
        height: 533px;
        width: 400px;
        position: relative;
        margin: 0 auto;
    
        .main-img {
          width: 100%;
          height: 100%;
        }
    
        .sub-img-1,
        .sub-img-2,
        .sub-img-3 {
          position: absolute;
          left: -144px;
    
        }
    
        .sub-img-1 {
          height: 238px;
          width: 186px;
          bottom: 118px;
    
          &.only {
            bottom: 60px;
          }
        }
    
        .sub-img-2,
        .sub-img-3 {
          height: 186px;
          width: 186px;
        }
    
        @media all and (min-width: 768px) {
          transform: scale(0.7);
    
          .sub-img-1,
          .sub-img-2,
          .sub-img-3 {
            transform: scale(0.6);
            left: -115px;
          }
    
          .sub-img-1 {
            height: 238px;
            width: 186px;
            bottom: 118px;
    
            &.only {
              bottom: 50px;
            }
          }
    
          .sub-img-2 {
            bottom: -10px;
          }
    
          .sub-img-3 {
            top: -35px;
          }
        }
    
        @media all and (min-width: 930px) {
          transform: scale(0.8);
    
          .sub-img-1,
          .sub-img-2,
          .sub-img-3 {
            transform: scale(0.85);
          }
    
          .sub-img-1 {
            &.only {
              bottom: 50px
            }
          }
    
          .sub-img-2 {
            bottom: -50px;
          }
    
          // .sub-img-3 {}
        }
    
        @media all and (min-width: 1100px) {
          transform: scale(1);
    
          .sub-img-1,
          .sub-img-2,
          .sub-img-3 {
            position: absolute;
            left: -144px;
          }
    
          .sub-img-1 {
            height: 238px;
            width: 186px;
            bottom: 118px;
    
            &.only {
              bottom: 60px;
            }
          }
    
          .sub-img-2,
          .sub-img-3 {
            height: 186px;
            width: 186px;
          }
    
          .sub-img-2 {
            bottom: -45px;
          }
    
          .sub-img-3 {
            top: -25px;
          }
        }
      }
    }
    
  • URL: /components/raw/commitment-slide/_commitment-slide.scss
  • Filesystem Path: structures/03-organisms/commitment-slide/_commitment-slide.scss
  • Size: 1.9 KB

There are no notes for this item.