website/index.html at main · espale-studios/website · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Espale Studios</title>
        <meta name="description" content="Espale Studios is an indepent game development studio based in Turkey">
        <meta name="keywords"
            content="espale, espale studios, ingression, ingression paltformer, ingression: platforming with portals, türk oyun, türk, portal, portal platformer, 2d portals" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Open Graph -->
        <meta property="og:title" content="Espale Studios" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://www.espalestudios.com" />
        <meta property="og:image" content="https://www.espalestudios.com/img/thumbnails/thumbnail_espale.png" />
        <meta property="og:description" content="The official website of Espale Studios" />
        <!-- Twitter -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="@EspaleStudios">
        <meta name="twitter:creator" content="@EspaleStudios">
        <meta name="twitter:title" content="Espale Studios">
        <meta name="twitter:description" content="The official website of Espale Studios">
        <meta name="twitter:image" content="https://www.espalestudios.com/img/thumbnails/thumbnail_espale.png">
        <!-- Scripts -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/navbar.css">
        <link rel="icon" href="img/favicon.ico">
        <!-- Google Search -->
        <script type="application/ld+json">
            {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [{
                "@type": "ListItem",
                "position": 1,
                "name": "Espale Studios",
                "item": "https://www.espalestudios.com"
            }]
            }
        </script>
        <link rel="canonical" href="https://www.espalestudios.com">
    </head>

    <body>
        <!-- Header -->
        <header id="header">
            <a class="logo" href="#">
                <img class="logo-image" src="img/logo.png" alt="Espale Studios Logo">
                <p class="logo-text">ESPALE STUDIOS</p>
            </a>
            <button class="nav-toggle nav-toggle-primary" type="button" aria-label="Toggle navigation" aria-controls="primary-navigation"
                aria-expanded="false">
                <span class="nav-toggle-bar"></span>
                <span class="nav-toggle-bar"></span>
                <span class="nav-toggle-bar"></span>
            </button>
            <nav id="primary-navigation">
                <ul>
                    <li><a href="#About">About</a></li>
                    <li><a href="#Games">Games</a></li>
                    <li class="nav-mobile-cta"><a href="mailto:contact@espalestudios.com"><i
                                class="fa-solid fa-envelope"></i> Contact Us</a></li>
                </ul>
            </nav>
            <a class="cta" href="mailto:contact@espalestudios.com"><button><i class="fa-solid fa-envelope"></i> Contact
                    Us</button></a>
        </header>

        <!-- Home -->
        <section class="home" id="Home">
            <div class="home-text">
                <h1>ESPALE STUDIOS</h1>
                <h2 id="slogan">"Art for art's sake"</h2>
                <p>We are a small independent games studio that develops <b>unforgettable </b> digital experiences.</p>

                <div class="socials">
                    <a href="https://twitter.com/EspaleStudios" target="_blank">
                        <i class="fa-brands fa-x-twitter fa-xl">
                            <p class="description-text">Twitter</p>
                        </i>
                    </a>
                    <a href="https://www.tiktok.com/@espale.studios" target="_blank">
                        <i class="fa-brands fa-tiktok fa-xl">
                            <p class="description-text">TikTok</p>
                        </i>
                    </a>
                    <a href="https://www.instagram.com/espale.studios/" target="_blank">
                        <i class="fa-brands fa-instagram fa-xl">
                            <p class="description-text">Instagram</p>
                        </i>
                    </a>
                    <a href="https://www.youtube.com/@espalestudios" target="_blank">
                        <i class="fa-brands fa-youtube fa-xl">
                            <p class="description-text">YouTube</p>
                        </i>
                    </a>
                    <a href="https://www.linkedin.com/company/espale-studios" target="_blank">
                        <i class="fa-brands fa-linkedin-in fa-xl">
                            <p class="description-text">LinkedIn</p>
                        </i>
                    </a>
                    <a href="https://store.steampowered.com/publisher/EspaleStudios/" target="_blank">
                        <i class="fa-brands fa-steam fa-xl">
                            <p class="description-text">Steam</p>
                        </i>
                    </a>
                    <a href="https://espale-studios.itch.io/" target="_blank">
                        <i class="fa-brands fa-itch-io fa-xl">
                            <p class="description-text">Itch IO</p>
                        </i>
                    </a>
                    <a href="https://github.com/espale-studios" target="_blank">
                        <i class="fa-brands fa-github fa-xl">
                            <p class="description-text">GitHub</p>
                        </i>
                    </a>
                </div>
            </div>

            <div class="home-image">
                <img src="img/home_hero.webp" alt="Characthers from our games">
            </div>
        </section>

        <!-- About -->
        <section class="about" id="About">
            <h2 class="section-title">About</h2>
            <p>We are a small yet passionate team of game developers based in Turkey who believe that games are the
                <b>finest
                    form of art</b>. We
                believe in the philosophy of <i>"art for art's sake"</i> and our goal is to combine this philosophy with
                game
                development to
                create <b>unforgettable</b> digital experiences.
            </p>
        </section>

        <!-- Games -->
        <section class="games" id="Games">
            <h2 class="section-title">Our Games</h2>
            <!-- Ingression -->
            <div class="game-area">
                <div class="games-image games-image-preview">
                    <a class="games-image-link" href="https://www.espalestudios.com/ingression">
                        <img src="img/games/ingression/ingression_capsule.webp" alt="Ingression">
                    </a>
                    <iframe class="games-image-hover-video"
                        src="https://www.youtube.com/embed/hMCkOCl-iOU?autoplay=1&mute=1&loop=1&controls=0&rel=0&disablekb=1&playsinline=1&modestbranding=1&showinfo=0&enablejsapi=1&playlist=hMCkOCl-iOU"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        title="Ingression Trailer"></iframe>
                </div>

                <div class="games-text">
                    <h3>Ingression</h3>
                    <p>an unforgiving & mind-bending precision platformer where you'll think and platform with
                        seamless portals.</p>
                    <a href="https://www.espalestudios.com/ingression" target="_blank" rel="noopener noreferrer"><button><i class="fa-solid fa-arrow-up-right-from-square"></i> Details</button></a>
                </div>
            </div>

            <!-- Project Chemistry -->
            <div class="game-area">
                <div class="games-text">
                    <h3>Project Chemistry</h3>
                    <p>Observe and conduct reactions with elements and molecules, experience chemistry in 3D for the first time and
                        learn in
                        the process.</p>
                    <a href="https://www.espalestudios.com/project_chemistry" rel="noopener noreferrer"><button><i
                                class="fa-solid fa-arrow-up-right-from-square"></i> Details</button></a>
                </div>


                <div class="games-image games-image-preview">
                    <a class="games-image-link" href="https://www.espalestudios.com/project_chemistry">
                        <img src="img/games/project_chemistry/project_chemistry_capsule.webp" alt="Project Chemistry">
                    </a>
                    <iframe class="games-image-hover-video"
                        src="https://www.youtube.com/embed/Nr-wJC6kdM0?autoplay=1&mute=1&loop=1&controls=0&rel=0&disablekb=1&playsinline=1&modestbranding=1&showinfo=0&enablejsapi=1&playlist=Nr-wJC6kdM0"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        title="Project Chemistry Trailer"></iframe>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <footer>
            <p>© <span id="copyright-year">2023</span> Espale Studios. All rights reserved.</p>
            <p><a href="https://github.com/espale-studios/website"><i class="fa-brands fa-github"></i> This site is
                    open-source</a></p>
            <p><a href="mailto:contact@espalestudios.com"><i class="fa-solid fa-envelope"></i>
                    contact@espalestudios.com</a></p>
        </footer>

        <!-- Scripts -->
        <link rel="stylesheet" href="css/main_colors.css">
        <script src="https://kit.fontawesome.com/f1677e7b85.js" crossorigin="anonymous"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        <script src="js/nav_toggle.js"></script>
        <script src="js/slogan_changer.js"></script>
        <script src="js/copyright_year.js"></script>
    </body>

</html>