<section class="elements-area section-padding-50">
    <div style="height:100px;"></div>
    <div class="container-header" style="background-image:url('/img/bg-img/bg-index.jpg');background-size:cover;">
        <div class="row" >
            <div class="col-12 col-lg-5">
             <a href="https://www.apache.org/events/current-event.html">
                                 <img src="https://www.apache.org/events/current-event-125x125.png" style="position:absolute;bottom:50px;float:right;margin-left:20px;margin-right:-10px;margin-top:50px;"/>
                                 </a>
            </div>
            <div class="col-12 col-lg-7" style="display:flex;justify-content: center">
                <div style="background:rgba(255, 255, 255, 0.95);margin-top:50px;margin-bottom:50px;padding:35px;border-radius:15px;display:inline-block;max-width:750px;">
                    <div class="row" style="margin-left:0px;margin-right:0px;">
                        <h1 class="header-apache-text">Apache <span class="sp-green">S</span><span
                                    class="sp-blue">tream</span><span class="sp-green">P</span><span class="sp-blue">ipes</span>
                        </h1>
                        <div class="apache-teaser">A self-service (Industrial) IoT toolbox to enable non-technical users to connect, analyze and explore IoT data streams.</div>
                    </div>
                    <div class="row" style="margin-left:0px;margin-right:0px;">
                        <div class="feature-highlights-section" style="margin-bottom:20px;">
                            <div class="feature-highlights">
                            <span class="feature-highlights-icon">
                                <i class="fas fa-tools"></i>
                            </span>
                                <span class="feature-highlights-text">The Open Source <span
                                            class="feature-highlights-bg">toolbox for the Industrial IoT.</span>
                            </span>
                            </div>
                            <div class="feature-highlights">
                            <span class="feature-highlights-icon">
                                <i class="fab fa-cloudscale"></i>
                            </span>
                                <span class="feature-highlights-text"><span class="feature-highlights-bg">Easy to use</span> and extensible.
                            </span>
                            </div>
                            <div class="feature-highlights">
                            <span class="feature-highlights-icon">
                                <i class="fas fa-home"></i>
                            </span>
                                <span class="feature-highlights-text">Runs <span class="feature-highlights-bg">on-premise</span>
                                in your own infrastructure.
                            </span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="d-flex col-12">
                            <a href="/download.html" class="sp-button sp-button-large sp-button-blue sp-button-margin"><i
                                        class="fas fa-rocket"></i> Get started
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="d-flex col-12">
                            <a href="/docs/index.html" class="sp-button sp-button-medium sp-button-gray sp-button-margin"><i class="fas fa-book"></i> Docs
                            </a>
                            <a href="https://www.github.com/apache/streampipes" class="sp-button sp-button-medium sp-button-gray sp-button-margin"><i class="fab fa-github"></i> Github
                            </a>
                            <a href="/mailinglists.html" class="sp-button sp-button-medium sp-button-gray sp-button-margin"><i class="fas fa-envelope"></i> Mailing Lists
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="d-flex col-12" style="margin-top: 10px;">
                        <div style="font-size: 14pt;font-weight: 500;">Meet us at one of the upcoming <a href="/meetus.html">events</a>!</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</section>