e<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects</title>
    <link rel="stylesheet" href="gmtcwebsiteversion2.css">  
</head>
<body>
    <header style="display: flex; align-items: center; justify-content: space-between; background-color: #E0F2E9; padding: 15px 30px; font-family: Arial, sans-serif;">
        <nav>
            <ul class="navbar" style="list-style: none; margin: 0; padding: 0; display: flex; gap: 20px;">
                <!-- Top section link -->
                <li><a href="index.html#top" style="font-weight: bold; text-decoration: none; color: #333;">Top</a></li>
                <!-- Events section link -->
                <li><a href="index.html#events" style="font-weight: bold; text-decoration: none; color: #333;">Events</a></li>
                <!-- Projects page link -->
                <li><a href="projects.html" style="font-weight: bold; text-decoration: none; color: #333;">Projects</a></li>
                <!-- About section link -->
                <li><a href="index.html#about" style="font-weight: bold; text-decoration: none; color: #333;">About</a></li>
                <!-- Join Us section link -->
                <li><a href="index.html#join" style="font-weight: bold; text-decoration: none; color: #333;">Join Us</a></li>
            </ul>
        </nav>
    </header>
    <h1 class="eventtitle">Our Projects</h1>

    <div class="projects-container">
        <!-- Repeat this block for each project -->
        <div class="project-box">
            <div class="project-img">
                <img src="websitegmtc.png"/>
            </div>
            <h2>GMTC website development</h2>
            <p>HTML,CSS,Github pagesを使い、gmtc Japan公式ウェブサイトを開発しました！</p>
            <a href="project1.html" class="learn-more-btn">Learn More</a>
        </div>

        <div class="project-box">
            <div class="project-img"></div>
            <h2>Project 2</h2>
            <p>coming soon</p>
            <a href="project2.html" class="learn-more-btn">Learn More</a>
        </div>

        <div class="project-box">
            <div class="project-img"></div>
            <h2>Project 3</h2>
            <p>Coming soon</p>
            <a href="project3.html" class="learn-more-btn">Learn More</a>
        </div>

        <div class="project-box">
            <div class="project-img"></div>
            <h2>Project 4</h2>
            <p>coming soon</p>
            <a href="project4.html" class="learn-more-btn">Learn More</a>
        </div>

        <div class="project-box">
            <div class="project-img"></div>
            <h2>Project 5</h2>
            <p>coming soon!</p>
            <a href="project5.html" class="learn-more-btn">Learn More</a>
        </div>

        <div class="project-box">
            <div class="project-img"></div>
            <h2>Project 6</h2>
            <p>coming soon!</p>
            <a href="project6.html" class="learn-more-btn">Learn More</a>
        </div>

        <div class="project-box">
            <div class="project-img"></div>
            <h2>Project 7</h2>
            <p>coming soon!</p>
            <a href="project7.html" class="learn-more-btn">Learn More</a>
        </div>

        <div class="project-box">
            <div class="project-img"></div>
            <h2>Project 8</h2>
            <p>coming soon!</p>
            <a href="project8.html" class="learn-more-btn">Learn More</a>
        </div>

    </div>

</body>
</html>