<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" />
        <title>Xpecto | About</title>
        <link rel="stylesheet" href="./css/aboutus.css" />
        <link rel="stylesheet" href="./css/navbar.css" />

        <link
            href="https://fonts.googleapis.com/icon?family=Material+Icons"
            rel="stylesheet"
        />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://fonts.googleapis.com/css2?family=Girassol&display=swap"
            rel="stylesheet"
        />
        <!-- CSS only -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
            crossorigin="anonymous"
        />
        <!-- font-awesome -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
            referrerpolicy="no-referrer"
            integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
            crossorigin="anonymous"
        />
        <style>
            header {
                display: flex;
                padding-left: 40px;
                padding-right: 10px;
            }
            .showcase.active {
                right: 250px;
            }
            @media (max-width: 768px) {
                .showcase.active {
                    right: 50%;
                }
            }
            @media (max-width: 480px) {
                .showcase.active {
                    right: 75%;
                }
                header .logo {
                    font-size: 1.5rem;
                }
        
                header {
                    /* padding-left: 10px; */
                    padding-right: 10px;
                    display: flex;
                    /* align-items: flex-end; */
                }
                .showcase {
                    padding-right: 50px;
                }
            }
        </style>
    </head>

    <body>
        <div class="bg"></div>
        <div class="home">
            <section class="showcase">
                <header>
                    <h2 class="logo">Xpecto '22</h2>
                    <div class="toggle"></div>
                </header>
                <div class="overlay"></div>

                <section id="about">
                    <!--<h1 class="text-white">To be Updated Soon!</h1>-->
                    <h1 class="about display-1" id="heading">About Us</h1>
                    <h6 style="color:white; text-align: center; font-size: 18px;">Xpecto is the science and technology festival of Indian Institute of Technology Mandi, which has been ramped up to include the most electrifying events, prompting great discoveries, as well as enthralling brainstorming and grand prizes. Each Technical Club will host some exciting events that will highlight and award participants' greatest ideas and breakthroughs. So get in touch with your pals, mark your calendars, and get ready for Xpecto 2022-23.</h6>
                    <!---<div class="about content">
                        <div class="about menu__container">
                            <div class="about menu">
                                <div class="about icon">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="32px"
                                        height="32px"
                                        fill="currentColor"
                                        class="bi bi-lightbulb-fill material-icons md-36"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"
                                        />
                                    </svg>
                                </div>
                                <p class="about title">Innovate</p>
                                <p class="about text">
                                    Add or change your contacts and links.
                                </p>
                            </div>
                        </div>

                        <div class="about menu__container">
                            <div class="about menu">
                                <div class="about icon">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="32"
                                        height="32"
                                        fill="currentColor"
                                        class="bi bi-trophy material-icons md-36"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5c0 .538-.012 1.05-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33.076 33.076 0 0 1 2.5.5zm.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935zm10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935zM3.504 1c.007.517.026 1.006.056 1.469.13 2.028.457 3.546.87 4.667C5.294 9.48 6.484 10 7 10a.5.5 0 0 1 .5.5v2.61a1 1 0 0 1-.757.97l-1.426.356a.5.5 0 0 0-.179.085L4.5 15h7l-.638-.479a.501.501 0 0 0-.18-.085l-1.425-.356a1 1 0 0 1-.757-.97V10.5A.5.5 0 0 1 9 10c.516 0 1.706-.52 2.57-2.864.413-1.12.74-2.64.87-4.667.03-.463.049-.952.056-1.469H3.504z"
                                        />
                                    </svg>
                                </div>
                                <p class="about title">Events</p>
                                <p class="about text">
                                    Add or change your contacts and links.
                                </p>
                            </div>
                        </div>

                        <div class="about menu__container">
                            <div class="about menu">
                                <div class="about icon">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="32"
                                        height="32"
                                        fill="currentColor"
                                        class="bi bi-book-half material-icons md-36"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"
                                        />
                                    </svg>
                                </div>
                                <p class="about title">Learn</p>
                                <p class="about text">
                                    Add or change your contacts and links.
                                </p>
                            </div>
                        </div>
                    </div> --->
                </section>
            </section>
            <%- include('partials/navbar_menu.ejs') %>
        </div>

        <script src="./js/script.js" type="text/javascript"></script>

        <!-- JavaScript Bundle with Popper -->
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"
        ></script>
    </body>
</html>
