<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">sed vel itaque</a></h2>
            <p class="u-padding-r-bottom u-padding-r-top u-text-p u-margin-r-bottom">Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.</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-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.