<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">minus iusto et</a></h2>
            <p class="u-padding-r-bottom u-padding-r-top u-text-p u-margin-r-bottom">Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et
                totam quo distinctio.</p>
            <a href="#news" class="js-scrollTo u-linkClean Button Button--info u-text-r-xs">ut aliquam exercitationem
        <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.