<section>
    <div class="Hero">
        <div class="Hero-content">
            <p class="u-padding-r-bottom u-padding-r-top u-text-r-xs">
                <a href="#" class="u-textClean u-color-60 u-text-h4"><span class="Dot u-background-60"></span>categoria</a>
            </p>
            <h2 class="u-text-h2"><a href="#" class="u-color-95 u-textClean">labore facere aut</a></h2>
            <p class="u-padding-r-bottom u-padding-r-top u-text-p u-margin-r-bottom">Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.</p>
            <a href="#news" class="js-scrollTo u-linkClean Button Button--info u-text-r-xs">porro vel rem
        <span class="u-padding-r-left Icon Icon-expand"></span></a>
        </div>
        <a href="#servizi" class="Forward Forward--absolute js-scrollTo" aria-hidden="true">
      <span class="Icon Icon-expand"></span>
    </a>
    </div>
</section>
  • Content:
    /* @define Hero; */
    
    /*
     *  1.About 3 x Header size
     */
    
    :root {
      --Hero-height: 30em; /* 1 */
      --Hero-background-img: url("//placehold.it/2000x500?text=placeholder");
    }
    
    .Hero {
      background: var(--Hero-background-img);
      background-size: cover;
      height: var(--Hero-height);
    
      @extend .u-posRelative;
    }
    
    .Hero-content {
      @extend .u-posRelative;
      @extend .u-layoutCenterVertically;
    
      @extend .u-padding-r-all;
      @extend .u-background-grey-20;
    
      @extend .u-sizeFull;
    
      @extend .u-md-size6of12;
      @extend .u-md-before2of12;
    
      @extend .u-lg-size5of12;
      @extend .u-lg-before1of8;
    
      opacity: 0.95;
    }
    
  • URL: /components/raw/hero/index.css
  • Filesystem Path: src/components/hero/index.css
  • Size: 607 Bytes

There are no notes for this item.