index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BRCS Christmas Tournament</title>
    <!-- Favicon -->
    <link rel="icon" href="images/santa.jpg">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            background-image: url('images/xmas-snow-background.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

        header {
            background-color: red;
            color: white;
            padding: 20px;
            text-align: center;
        }

        footer {
            margin-top: 50px; /* change this */
            background-color: red;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .challenge-card {
            background-color: green;
            color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s;
            width: 350px; /* customize */
            height: 200px; /* customize */
            margin: 45px; /* space between cards */
        }

        .challenge-card:hover {
            transform: scale(1.05);
        }

        .challenge-button {
            background-color: red;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <h1>BRCS Christmas Special 🎅🎄</h1>
    </header>
    
    <!-- Challenges Section -->
    <section class="container mt-5" id="challenges">
        <div class="row text-center"> <!-- Centering the cards -->
            <div class="col-md-4">
                <div class="challenge-card">
                    <h3>Missing XMAS Reindeer (750 pts)</h3>
                    <p>Cyber - Elves took control of Santa's Christmas factory and they kidnapped Rudolf as well. Can you decrypt the message from the elves and find Rudolf?</p>
                    <a href="https://github.com/intrepidbird/christmas/blob/main/challenges/cyber" target="_blank"><button class="challenge-button">Message</button></a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="challenge-card">
                    <h3>Elf Name Generator (300 pts)</h3>
                    <p>Python - Santa has so many helpers that he can no longer name each one of them with original names. Can you solve this issue by creating an elf name generator in Python?</p>
                    <a href="https://github.com/intrepidbird/christmas/blob/main/challenges/python/names.txt" target="_blank"><button class="challenge-button">Example Elf Names</button></a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="challenge-card">
                    <h3>Java Christmas Tree Algorithm (300 pts)</h3>
                    <p>Java - Santa Claus needs help designing a perfect Christmas tree! Help Saint Nicolas out by writing a Java script that prints a nice XMAS tree in the terminal.</p>
                    <a href="https://github.com/intrepidbird/christmas/blob/main/challenges/java/tree.txt" target="_blank"><button class="challenge-button">Tree Example</button></a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="challenge-card">
                    <h3>C++ Christmas Tree Algorithm (450 pts)</h3>
                    <p>C++ - Santa Claus needs help designing a perfect Christmas tree! Help Saint Nicolas out by writing a C++ script that prints a nice XMAS tree in the terminal.</p>
                    <a href="https://github.com/intrepidbird/christmas/blob/main/challenges/cpp/tree.txt" target="_blank"><button class="challenge-button">Tree Example</button></a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="challenge-card">
                    <h3>Artificial Intelligence Santa Claus (150 pts)</h3>
                    <p>A naughty elf messed up Santa's picture collection with AI-generated pictures of Santa. Can you help Santa out by finding out which pictures don't belong?</p>
                    <a href="https://docs.google.com/presentation/d/1wE1rJeSYgDkgTsxCxzm9yzqTxcQe1kzc7HyxMP7fT7M" target="_blank"><button class="challenge-button">Santa's Album</button></a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="challenge-card">
                    <h3>Answer Submission Form</h3>
                    <p>Please submit one answer per team.</p>
                    <a href="https://forms.gle/T3vNhCuN69zBUzHY7" target="_blank"><button class="challenge-button">Submission Form</button></a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        &copy; 2023 BRCS Christmas. All rights reserved.
    </footer>

    <!-- Bootstrap & jQuery JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>