<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta property="og:url" content="https://xpecto.tech/" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Xpecto" />
        <meta
            name="description"
            content="Xpecto is science and technology festival of Indian
        Institute of Technology, Mandi. It has been ramped up to
        include the most electrifying events, prompting great
        discoveries, as well as enthralling brainstorming and
        grand prizes."
        />
        <meta
            name="keywords"
            content="Team, Expect, Innovate, Achieve, IIT Mandi, TechFest 2022, Xpecto, Technical festival, Techfest IIT Mandi,
        Xpecto 2022, First Technical Festival, Techfest IIT Mandi"
        />
        <link
            rel="icon"
            type="image/x-icon"
            href="images/xpecto-logo-header.png"
        />
        <script
            src="https://kit.fontawesome.com/a1542a4884.js"
            crossorigin="anonymous"
        ></script>
        <link rel="stylesheet" href="styles/page.css" />
        <link rel="stylesheet" href="styles/style.css" />

        <title>Team | Xpecto</title>
    </head>

    <style>
        #page .container {
            padding-top: 5rem;
            width: 250px;
        }
        #page .heading span {
            font-size: 2.5rem;
            padding-right: 2.5rem;
            transform: skew(0deg);
        }

        #page .content {
            /* width: 90%; */
            padding-left: 0.1rem;
            padding-right: 0.1rem;
        }
        #page .heading {
            line-height: 1.5;
            padding-left: 7.5rem;
            padding-top: 25%;
            display: flex;
            align-items: baseline;
            transform: skewX(-7.5deg);
        }
        .team-list-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }

        .person-card-container {
            margin: 1rem;
            width: 250px;
            background: rgba(0, 16, 45, 0.781);
            box-shadow: 0 0 25px -5px rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 10px;
            transition: 0.3s;
            padding: 1rem;
            transition: 0.25s;
        }
        .person-card-container:hover {
            transition: 0.25s;
            transform: translateY(-5px);
            box-shadow: 0 0 50px -5px rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(100px);
            -webkit-backdrop-filter: blur(100px);
        }

        .person-img {
            width: 125px;
            border-radius: 50%;
            margin-bottom: 0.5rem;
        }
        .person-card {
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
        }
        .person-card i {
            color: white;
        }
        .person-name {
            text-align: center;
            font-size: 1.25rem;
            font-weight: bold;
            margin: 0.25rem;
        }
        .person-role {
            text-align: center;
            font-size: 1.05rem;
        }

        .social div {
            text-decoration: none;
            padding: 0.25rem;
            transition: 0.3s;
            margin: 0.5rem 0.3rem 0.25rem 0.3rem;
        }
        .social div:hover {
            transform: translateY(-3px);
            transition: 0.3s;
            cursor: pointer;
        }
        @media (max-width: 400px) {
            #page .content {
                padding-left: 0.1rem;
                padding-right: 0.1rem;
                margin-left: 0.1rem;
                margin-right: 0.1rem;
            }
        }
        .content h2 {
            text-align: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            margin: 1.5rem;
        }
    </style>
    <body>
        <!-- -----HEADER INCLUDING LOGO AND NAVBAR----- -->
        <%- include ('partials/navbar.ejs') %>
        <!-- -----HEADER END----- -->
        <div class="" id="page">
            <div class="container">
                <div class="heading" style="color: aqua">
                    <span>&nbsp;T</span>
                    <span>&nbsp;E</span>
                    <span>&nbsp;A</span>
                    <span>&nbsp;M</span>
                </div>
            </div>
            <div class="content">
                <h2 style="color: aqua">People Who Made This Happen !!!</h2>
                <div class="team-list-container">
                    <% for( let index = 0; index < members.length; index++ ) {
                    %>
                    <div class="person-card-container">
                        <div class="person-card">
                            <% if (members[index].Image_Link) { %>
                            <img
                                class="person-img"
                                src="<%= members[index].Image_Link %>"
                                alt=""
                            />
                            <% }else{ %>
                            <img
                                class="person-img"
                                src="https://user-images.githubusercontent.com/79650502/165826483-8bb614d8-cfe8-4d61-ae32-b4c3144a7093.jpg"
                                alt=""
                            />
                            <% } %>
                            <div class="person-name">
                                <%= members[index].Name %>
                            </div>
                            <div class="person-role">
                                <%= members[index].Position %>
                            </div>
                            <div class="social">
                                <div>
                                    <% if (members[index].Facebook ) { %>
                                    <a
                                        href="<%= members[index].Facebook %>"
                                        target="_blank"
                                    >
                                        <i
                                            class="fa-brands fa-facebook-square fa-2x"
                                        ></i>
                                    </a>
                                    <% }else{ %>
                                    <a href="#" target="">
                                        <i
                                            class="fa-brands fa-facebook-square fa-2x"
                                        ></i>
                                    </a>
                                    <% } %>
                                </div>
                                <div>
                                    <% if (members[index].Instagram ) { %>
                                    <a
                                        href="<%= members[index].Instagram %>"
                                        target="_blank"
                                    >
                                        <i
                                            class="fa-brands fa-instagram-square fa-2x"
                                        ></i>
                                    </a>
                                    <% }else{ %>
                                    <a href="#">
                                        <i
                                            class="fa-brands fa-instagram-square fa-2x"
                                        ></i>
                                    </a>
                                    <% } %>
                                </div>
                                <div>
                                    <% if (members[index].Instagram ) { %>
                                    <a
                                        href="<%= members[index].Linkedin %>"
                                        target="_blank"
                                    >
                                        <i
                                            class="fa-brands fa-linkedin fa-2x"
                                        ></i>
                                    </a>
                                    <% }else{ %>
                                    <a
                                        href="<%= members[index].Linkedin %>"
                                        target="_blank"
                                    >
                                        <i
                                            class="fa-brands fa-linkedin fa-2x"
                                        ></i>
                                    </a>
                                    <% } %>
                                </div>
                            </div>
                        </div>
                    </div>
                    <% } %>

                    <!-- card end -->
                </div>
            </div>
        </div>
        <script src="scripts/script.js"></script>
        <script src="scripts/ejs.js"></script>
    </body>
</html>
