index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MaxCLIP Competition</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

</head>
<body class="antialiased leading-normal tracking-normal text-gray-300">
    <!-- background blobs -->
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>

    <nav class="navbar animate__animated animate__fadeInDown">
        <div class="container mx-auto px-4 py-2 flex justify-between items-center">
            <a class="brand-text text-2xl font-bold text-white-custom flex items-center" href="index.html">
                <img src="images/logo_transparent.png" alt="" class="h-10 mr-2"> MaxCLIP
            </a>        
            <div class="hidden lg:flex space-x-4">
                <a class="navbar-link" href="index.html">Home</a>
                <a class="navbar-link" href="competition.html">Competition</a>
                <a class="navbar-link" href="leaderboard.html">Leaderboard</a>
                <a class="navbar-link" href="participate.html">Participate</a>
                <a class="navbar-link" href="about.html">About</a>
                <a class="navbar-link" href="contact.html">Contact</a>
            </div>
            <button class="lg:hidden" id="navbarToggle">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
        <div id="mobileMenu" class="lg:hidden flex flex-col mt-4 space-y-2">
            <a class="mobile-menu-item" href="index.html">Home</a>
            <a class="mobile-menu-item" href="competition.html">Competition</a>
            <a class="mobile-menu-item" href="leaderboard.html">Leaderboard</a>
            <a class="mobile-menu-item" href="participate.html">Participate</a>
            <a class="mobile-menu-item" href="about.html">About</a>
            <a class="mobile-menu-item" href="contact.html">Contact</a>
        </div>
    </nav>
    

    <div class="container mx-auto px-4 py-12 flex-grow content-container">
        <h1 class="text-6xl font-bold text-center mb-8 animate__animated animate__fadeInUp text-white-custom">MaxCLIP Optimization Competition</h1>
        <div class="flex flex-col md:flex-row justify-center items-center md:space-x-8 animate__animated animate__fadeInUp animate__delay-1s">
            <div class="text-center md:text-left max-w-xl mx-auto md:mx-0">
                <p class="text-xl mb-4 animate__animated animate__fadeInUp animate__delay-1s text-white-custom">We seek to level the CLIP optimization playing field by standardizing the dataset, model architecture, hardware setup, and training time. Competitors design the most effective optimization algorithm to maximize performance, all under standardized conditions. </p>
                <a class="btn-animated bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded inline-block animate__animated animate__fadeInUp animate__delay-2s transform hover:scale-105 transition-transform duration-300" href="competition.html" role="button">Join the Competition</a>
                <a class="btn-animated bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded inline-block animate__animated animate__fadeInUp animate__delay-2s transform hover:scale-105 transition-transform duration-300" href="leaderboard.html" role="button">See Leaderboard</a>
            </div>
            <div class="mt-8 md:mt-0">
                <img src="images/clip.png" alt="MaxCLIP Competition" class="rounded-img outlined-img animate__animated animate__fadeInUp animate__delay-1s">
            </div>
        </div>
    </div>

    <footer class="footer py-4 text-center animate__animated animate__fadeInUp animate__delay-1s">
        <div class="container mx-auto">
            <p>MaxCLIP - Inspiring Innovation in CLIP Optimization | &copy; 2024</p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const navbarToggle = document.getElementById('navbarToggle');
            const mobileMenu = document.getElementById('mobileMenu');
            
            navbarToggle.addEventListener('click', function () {
                mobileMenu.classList.toggle('show');
            });
        });
    </script>    
    
</body>
</html>