partners.html

---
layout: default
title: Our Partners
permalink: /partners/
header-title: Our Partners
header-desc: "We are backed by a large network of academic institutions and our industrial partners. Especially, we receive strong support from the Technical University of Munich (TUM), whose president, Prof. Dr. Thomas F. Hofmann, is our project patron, and the Munich University of Applied Sciences (HM) with its highly practice-orientated programs."
header-image: /assets/images/robert-stump-bwpgwJesFhw-unsplash.jpg
header-image-height: 2000
header-image-width: 3000
scroll-link: "#list"
first-button: "<a href='/pitch/' class='btn btn--primary'>Become Partner</a>"
second-button: "<a href='#list' class='smoothscroll btn btn--stroke'>Learn More</a>"
---

<!-- clients
    ================================================== -->
<section id="list" class="s-clients">
    <div class="row section-header" data-aos="fade-up">
        <div class="col-full">
            <h3 class="subhead">Our Partners</h3>
            <h1 class="display-2">Elara Aerospace has been honored to partner up with these partners</h1>
        </div>
    </div>
    <!-- end section-header -->

    <style>
        /* Popup CSS */
        .popup {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0, 0, 0); /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
        }

        .popup-title {
            color: black;
        }

        .popup-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* Additional styling for gallery */
        .gallery img {
            cursor: pointer;
            margin: 10px;
            width: 100px; /* Adjust size as needed */
            width: 300px; /* Set width to 300px */
            height: 300px; /* Set height to 300px */
        }
    </style>

    <!-- Gallery Section -->
    <div class="row clients-outer" data-aos="fade-up">
        <div class="col-full">
            {% assign grouped_companies = site.data.companies | group_by: "category" %} {% for category in grouped_companies %}
            <h2>{{ category.name }}</h2>
            <div class="responsive">
                <div class="gallery">
                    {% for company in category.items %}
                    <img src="{{ company.logo }}" alt="{{ company.name }}" data-company="{{ company.name }}" data-info="{{ company.info }}" data-url="{{ company.url }}" class="company-logo" />
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Popup Section -->
    <div id="popup" class="popup">
        <div class="popup-content">
            <span class="close">&times;</span>
            <h2 class="popup-title" id="companyName"></h2>
            <p id="companyInfo"></p>
            <a id="companyLink" href="#" target="_blank" class="btn btn--primary">Visit Website</a>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const popup = document.getElementById("popup");
            const closeBtn = document.querySelector(".close");

            document.querySelectorAll(".company-logo").forEach((item) => {
                item.addEventListener("click", function () {
                    const companyName = this.getAttribute("data-company");
                    const companyInfo = this.getAttribute("data-info");
                    const companyUrl = this.getAttribute("data-url");

                    document.getElementById("companyName").innerText = companyName;
                    document.getElementById("companyInfo").innerText = companyInfo;
                    document.getElementById("companyLink").setAttribute("href", companyUrl);

                    popup.style.display = "block";
                });
            });

            closeBtn.onclick = function () {
                popup.style.display = "none";
            };

            window.onclick = function (event) {
                if (event.target == popup) {
                    popup.style.display = "none";
                }
            };
        });
    </script>
</section>
<!-- end s-clients -->