<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">quae qui et</a></h2>
            <p class="u-padding-r-bottom u-padding-r-top u-text-p u-margin-r-bottom">Quasi tempora occaecati eum dolorem modi enim maiores et. Autem et magnam eos non qui ut dignissimos. Sit consequatur dolores voluptas nobis omnis consequatur. Quaerat explicabo autem quod dolores. Ab dolorem praesentium. Quo minus doloribus
                ipsam officiis quia.</p>
            <a href="#news" class="js-scrollTo u-linkClean Button Button--info u-text-r-xs">notizie ed eventi
        <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-size4of12;
      @extend .u-lg-before1of8;
    
      opacity: 0.95;
    }
    
  • URL: /components/raw/hero/index.css
  • Filesystem Path: src/modules/hero/index.css
  • Size: 607 Bytes

There are no notes for this item.