T Capital

Hero Alt 

<section class="hero-alt pb-5 bm-animate bm-fade-in">
    <div class="overlay"></div>
    <div class="image-wrapper">
        <img alt="T.Capital operates through two distinct investment strategies in Ventures and Tech Fund, managing €2.3 billion on behalf of Deutsche Telekom" src="/images/bitmap/hero-alt.jpg" />
    </div>
    <div class="container-xxl h-100 d-flex align-items-end">
        <div class="row">
            <div class="col-xxl-10 offset-xxl-1">
                <div class="row">
                    <div class="col-lg-8">
                        <h1 class="h2 text-white pb-5">T.Capital operates through two distinct investment strategies in Ventures and Tech Fund, managing €2.3 billion on behalf of Deutsche Telekom</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="hero-alt pb-5 bm-animate bm-fade-in">
    <div class="overlay"></div>
    {{#if image}}
        <div class="image-wrapper">
            <img alt="{{ heading }}" src="{{ image }}"/>
        </div>
    {{/if}}
    <div class="container-xxl h-100 d-flex align-items-end">
        <div class="row">
            <div class="col-xxl-10 offset-xxl-1">
                <div class="row">
                    <div class="col-lg-8">
                        <h1 class="h2 text-white pb-5">{{ heading }}</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
{
  "heading": "T.Capital operates through two distinct investment strategies in Ventures and Tech Fund, managing €2.3 billion on behalf of Deutsche Telekom",
  "image": "/images/bitmap/hero-alt.jpg"
}
  • Content: 
    //  hero alt

section{
    &.hero-alt{
        height: 600px;
        position: relative;
        .overlay{
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.85) 100%);
            height: 100px;
            width: 100%;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
        }
        .image-wrapper{
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: bottom center;
            }
        }
        .container-xxl{
            position: relative; 
            z-index: 3;
        }
        h1{
            text-shadow: 0 0 33px #000;
        }
    }
}
  • URL: /components/raw/hero-alt/hero-alt.scss
  • Filesystem Path: src/components/02-components/hero-alt/hero-alt.scss
  • Size: 884 Bytes

No notes defined.