threestack-arcade/index.html at main · tigerpadla/threestack-arcade · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html lang="en">

<head>
    <title>Home</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
        content="ThreeStack Arcade is a collaborative project created for our first hackathon as part of the Code Institute Full Stack Development Bootcamp. It features a central arcade hub linking to individual games developed by each team member.">
    <meta name="keywords"
        content="ThreeStack Arcade, Code Institute, hackathon project, full stack development, arcade games, web development, team project, coding bootcamp, JavaScript games, collaborative coding">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
    <link rel="manifest" href="assets/favicons/site.webmanifest">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <!-- Background video -->
    <video id="bg-video" autoplay muted loop playsinline aria-hidden="true">
        <source src="assets/videos/home-bg.mp4" type="video/mp4">
    </video>

    <header>
        <div class="site-header" role="banner" aria-label="Site header">
            <h1 class="site-title">ThreeStack Arcade</h1>
            <p class="site-subtitle">Your portal back to the ’80s!</p>
        </div>
    </header>

    <main>
        <section class="games-center" aria-label="Available games">
            <div class="game-grid">
                <article class="game-card" aria-labelledby="g1-title">
                    <img src="assets/images/action-stations-thumbnail.png" alt="Action Stations! preview"
                        class="game-thumb">
                    <h3 id="g1-title" class="game-title">Action Stations!</h3>
                    <a class="play-btn" href="actionStations.html" role="button">INSERT THE COIN</a>

                    <!-- Creator link: update href and name to the actual creator profile -->
                    <div class="creator">
                        <a class="creator-link" href="https://github.com/thomil13" target="_blank"
                            rel="noopener noreferrer" aria-label="Open creator GitHub profile">
                            <img src="assets/images/github-icon.png" alt="GitHub icon" class="creator-icon">
                            <span class="creator-name">Thomas Milde</span>
                        </a>
                    </div>
                </article>

                <article class="game-card" aria-labelledby="g2-title">
                    <img src="assets/images/duck-em-up-thumbnail.png" alt="Duck 'Em Up preview" class="game-thumb">
                    <h3 id="g2-title" class="game-title">Duck 'Em Up</h3>
                    <a class="play-btn" href="duck-em-up.html" role="button">INSERT THE COIN</a>

                    <!-- Creator link: update href and name to the actual creator profile -->
                    <div class="creator">
                        <a class="creator-link" href="https://github.com/tigerpadla" target="_blank"
                            rel="noopener noreferrer" aria-label="Open creator GitHub profile">
                            <img src="assets/images/github-icon.png" alt="GitHub icon" class="creator-icon">
                            <span class="creator-name">Maksym Karleichuk</span>
                        </a>
                    </div>
                </article>

                <article class="game-card" aria-labelledby="g3-title">
                    <img src="assets/images/snake-thumbnail.png" alt="Snake preview" class="game-thumb">
                    <h3 id="g3-title" class="game-title">Snake</h3>
                    <a class="play-btn" href="snake.html" role="button">INSERT THE COIN</a>

                    <!-- Creator link: update href and name to the actual creator profile -->
                    <div class="creator">
                        <a class="creator-link" href="https://github.com/ColeiosCode" target="_blank"
                            rel="noopener noreferrer" aria-label="Open creator GitHub profile">
                            <img src="assets/images/github-icon.png" alt="GitHub icon" class="creator-icon">
                            <span class="creator-name">Josh Cole</span>
                        </a>
                    </div>
                </article>
            </div>
        </section>
    </main>

    <footer>
        <div class="site-footer" role="contentinfo" aria-label="Site footer">
            <p class="footer-text">Hackathon Project | Code Institute Bootcamp</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="assets/js/script.js"></script>
</body>

</html>