<section class="banner section-intro">
    <h2 class="text-primary"></h2>
    <p class="text-gray"></p>
</section>
<section class="banner section-intro">
  <h2 class="text-primary">{{breaklines header}}</h2>
  <p class="text-gray">{{subHeader}}</p>
</section>
/* No context defined for this component. */
  • Content:
    .section-intro {
      padding: 0 10%;
      position: relative;
    
      h2 {
        line-height: 30px;
      }
    
      p {
        font-weight: 300;
        font-size: 14px;
      }
    
      .bg-scene {
        @extend %absolute-fill;
      }
    
      @include respond-above(md) {
    
        // &:nth-of-type(3) {
        //   border: 2px solid red;
        //   h2 {
        //     font-size: 33px;
        //   }
        // }
        h2 {
          margin: 0 auto;
          line-height: 60px;
          max-width: 730px;
    
          &.wide {
            max-width: 800px;
            font-size: 34px;
          }
        }
    
        p {
          font-size: 22px;
          line-height: 30px;
          margin-bottom: 30px;
        }
    
    
      }
    
      .bg-scene {
        z-index: 0;
    
        .circle {
          position: absolute;
    
          &.blur {
            border: none;
          }
    
          &:first-of-type {
            $size: 50px;
            width: $size;
            height: $size;
            border: 2px solid $green;
            top: -90px;
            left: 10%;
          }
    
          &:nth-of-type(2) {
            $size: 55px;
            width: $size;
            height: $size;
            top: -85px;
            left: 50%;
          }
    
          &:nth-of-type(3) {
            $size: 100px;
            width: $size;
            height: $size;
            border: 2.5px solid $green;
            right: 5%;
            top: -75px;
    
          }
    
          &:nth-of-type(4) {
            $size: 40px;
            width: $size;
            height: $size;
            opacity: 0.8;
            top: 10px;
            left: 20%;
          }
    
          &:nth-of-type(5) {
            $size: 34px;
            width: $size;
            height: $size;
            top: 90px;
            left: 9%;
          }
    
          &:nth-of-type(6) {
            $size: 35px;
            width: $size;
            height: $size;
            right: 45%;
            bottom: 20px;
            border: 2.5px solid $green;
          }
    
          &:last-of-type {
            $size: 40px;
            width: $size;
            height: $size;
            bottom: 25px;
            right: 3%;
            opacity: 0.9;
          }
        }
      }
    
      @include respond-above(lg) {
        .bg-scene {
          .circle {
            &:nth-of-type(5) {
              $size: 34px;
              width: $size;
              height: $size;
              top: 90px;
              left: 15%;
            }
          }
        }
      }
    
    
    }
    
    .fr {
      .section-intro {
    
    
        @include respond-above(lg) {
          padding: 0 3%;
    
          p {
            margin: 21px auto 30px;
            font-size: 21px;
            width: 950px;
          }
        }
      }
    }
  • URL: /components/raw/section-intro/_section-intro.scss
  • Filesystem Path: structures/02-molecules/section-intro/_section-intro.scss
  • Size: 2.3 KB

There are no notes for this item.