member.html

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Club</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous" />
    <style>
        @import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #animation-container {
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: -1;
            top: 0;
            left: 0;
            background-image: url('background.jpg');
            background-size: 100% auto;
            /* Updated */
            background-repeat: no-repeat;
            animation: move-background 50s linear infinite;
        }

        @keyframes move-background {
            0% {
                background-position: bottom;
            }

            100% {
                background-position: top;
            }
        }

        @media (max-width: 768px) {
            #animation-container {
                background-size: auto 150%;
                animation-duration: 25s;
                /* Updated */
            }
        }

        .nav-item .active {
            background-color: rgba(0, 123, 255, 0.5);
            color: #fff;
        }

        .nav-item .nav-link:hover {
            background-color: rgba(0, 123, 255, 0.5);
            color: #fff;
        }

        .bi {
            vertical-align: -0.125em;
            fill: currentColor;
        }

        .me-2 {
            margin-right: 0.5rem !important;
        }

        .pt-5 {
            padding-top: 0rem !important;
        }

        .my-5 {
            margin-top: 0rem !important;
            margin-bottom: 3rem !important;
        }

        .btn-group {
            padding-bottom: 1.5rem !important;
        }

        .col-lg-4 {
            position: relative;
            transform: scale(1);
            transition: all 0.3s ease-in-out;
        }

        .col-lg-4:hover {
            transform: scale(1.1);
        }

        .svg-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 1rem;
        }

        .col-lg-4 svg {
            opacity: 0;
        }

        .col-lg-4:hover svg {
            opacity: 1;
        }

        .bg-dark {
            --bs-bg-opacity: 0;
        }

        .me-2 {
            margin-left: 1rem !important;
            margin-right: 1rem !important;
        }

        .fot {
            font-weight: bold;
            position: relative;
            text-align: center;
            justify-content: center;
            align-items: center;
            height: 50px;
            color: #6c757d;
            border-color: transparent;
            opacity: 1;
            z-index: 1000;
        }

        .coming {
            display: flex;
            position: relative;
            color: white;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            height: 84%;
            max-width: 100%;
            z-index: 100;
        }

        .navbar-nav .nav-link {
            border-radius: 10px;
        }

        .wc {
            color: #fff;
        }

        .sticky-navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
        }
    </style>
</head>

<div id="animation-container"></div>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark" style="opacity:1; background-color: transparent; color: white;">
        <a class="navbar-brand" href="home.html"><img src="Coding Club Logo Dark.png" alt="Coding Club Logo.png"
                width="40px" height="40px"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a href="home.html" class="nav-link wc" aria-current="page">Home</a>
                </li>
                <li class="nav-item">
                    <a href="events.html" class="nav-link wc" aria-current="page">Events</a>
                </li>
                <li class="nav-item">
                    <a href="ourteam.html" class="nav-link wc" aria-current="page">Our Team</a>
                </li>
                <li class="nav-item">
                    <a href="member.html" class="nav-link active wc" aria-current="page">Member</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="coming wc">
        Coming Soon...
    </div>

    <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 ">
        <div class="col-md-4 d-flex align-items-center" style="padding-left: 1.5rem;">
            <span class="mb-3 mb-md-0 text-body-secondary"
                style="color: #6c757d; font-weight: bold ; white-space: nowrap; ">Copyright © 2023 Created with ❤ by
                Devansh Garg and Mehul Gupta</span>
        </div>

        <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
            <li class="ms-3">
                <a class="text-body-secondary" href="mailto:codingclub@iitrpr.ac.in" target="_blank"><svg xmlns="http://www.w3.org/2000/svg"
                        width="25" height="25" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
                        <path
                            d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" />
                    </svg></a>
            </li>
            <li class="ms-3">
                <a class="text-body-secondary" href="https://www.linkedin.com/company/coding-club-iit-ropar/mycompany/"
                    target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                        class="bi bi-linkedin" viewBox="0 0 16 16">
                        <path
                            d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
                    </svg></a>
            </li>
            <li class="ms-3">
                <a class="text-body-secondary" href="https://www.instagram.com/coding_iitrpr/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg"
                        width="25" height="25" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
                        <path
                            d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
                    </svg></a>
            </li>
        </ul>
    </footer>

    <!-- <footer class="fot">
        Copyright © 2023 Created with ❤ by Devansh Garg and Mehul Gupta
    </footer> -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
</body>

</html>