Skip to content

Commit

Permalink
Merge pull request #4 from Filip55561/main
Browse files Browse the repository at this point in the history 
Lil Redesign
  • Loading branch information
@HEJOK254
HEJOK254 authored Sep 26, 2024
2 parents e5cca69 + 36a6e0e commit 9ee6bd5
Show file tree
Hide file tree
Showing 8 changed files with 532 additions and 290 deletions.
13 changes: 13 additions & 0 deletions assets/stylesheets/footer.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
footer {
width: 100%;
box-sizing: border-box;
background-color: rgb(28, 28, 32);
padding: 2rem;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
* {
color: #f1f1f1;
padding: 0.25rem 0.5rem;
}
}
81 changes: 81 additions & 0 deletions assets/stylesheets/navbar.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
ul {
-webkit-user-select: none;
user-select: none;
position: fixed;
list-style-type: none;
padding: 0;
background-color: #333;
margin: 0;
left: 0;
top: 0;
width: 100%;
height: 60px;
}

li:not(#signature) {
float: left;
height: 100%;
}

/* dont worry my css is bad too :) */

li a {
display: flex;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: azure;
font-weight: bolder;
font-size: 24px;
text-align: center;
padding: 14px 32px;
text-decoration: none;
border-radius: 8px;
box-sizing: border-box;

justify-content: center;
align-items: center;

height: 100%;
}

li a:hover:not(.home):not(.active):not(li#github a) {
background-color: #1c8d75; /* Green for non-active links */
}

li a.home,
.active {
background-color: #40c5d6;
color: azure;
}

li a.active:hover {
background-color: #40c5d6; /* Keeps cyan background on hover */
color: azure;
}

li#github a img {
width: 32px;
height: 32px;
}

li#github {
float: right;
a {
/* (Navbar height - icon height) / 2 (left-right, top-bottom) */
padding: calc((60px - 32px) / 2);
}
}

li#signature {
/* Center the text horizontally on the screen */
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

/* Fonts etc */
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: azure;
font-size: 20px;
text-decoration: none;
}
245 changes: 188 additions & 57 deletions games/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,197 @@
<html>
<head>
<title>Games - HEJOK254</title>
<head>
<title>Games - HEJOK254</title>

<link rel = "icon" href = "../assets/favicons/games.gif" type = "image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="../assets/favicons/games.gif" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="/assets/stylesheets/navbar.css" />
<link rel="stylesheet" href="/assets/stylesheets/footer.css" />

<meta charset="UTF-8">
<meta name="description" content="HEJOK254's game library">
<meta name="author" content="HEJOK254">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="UTF-8" />
<meta name="description" content="HEJOK254's game library" />
<meta name="author" content="HEJOK254" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<!--Discord Embed-->
<meta content="Game Library - HEJOK254" property="og:title" />
<meta content="My games" property="og:description"/>
<meta content="https://hejok254.github.io/games" property="og:url"/>
<meta content="https://avatars.githubusercontent.com/u/90698026?v=4" property="og:image"/>
<meta content="#151e55" data-react-helmet="true" name="theme-color"/>
<!--Discord Embed-->
<meta content="Game Library - HEJOK254" property="og:title" />
<meta content="My games" property="og:description" />
<meta content="https://hejok254.github.io/games" property="og:url" />
<meta content="https://avatars.githubusercontent.com/u/90698026?v=4" property="og:image" />
<meta content="#151e55" data-react-helmet="true" name="theme-color" />

<meta name="mobile-web-app-capable" content="yes">
</head>
<body>
<!--Navigation bar-->
<ul>
<li><a href=".." class="home">Home</a></li>
<li><a>Games</a></li>
<li id="github"><a href="https://github.com/HEJOK254"><img src="../assets/logos/github-mark-white.svg" title="My Github" alt="GitHub logo"></a></li>
<li id="signature">HEJOK254</li>
</ul>
<meta name="mobile-web-app-capable" content="yes" />
</head>
<body>
<!--Navigation bar-->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/games/" class="active">Games</a></li>
<li id="github">
<a href="https://github.com/HEJOK254"
><img src="../assets/logos/github-mark-white.svg" title="My Github" alt="GitHub logo"
/></a>
</li>
<li id="signature">HEJOK254</li>
</ul>

<br><br><br><br>

<div class="game">
<img src="../assets/logos/chromacore.png" width="117px" height="117px" class="gameList" style="margin-left:10px;margin-top: 15px;">
<p style="margin-left:135px; margin-top:-123px; font-size: 30px; color: white; font-weight: bold; margin-bottom: 25px;">ChromaCore</p>
<p style="font-size: 18px ;margin-top: -28px; margin-left: 137px; color: #697186; margin-bottom: 5px;">Genre: Platformer</p>
<img src="../assets/logos/windows.svg" class="platform" style="margin-left:139px; margin-bottom: 10px;">
<img src="../assets/logos/html5.png" class="platform" style="margin-left:5px; margin-bottom: 10px;">
<br>
<button class="download" style="float: left; margin-bottom: 0px; margin-left: 135px;" onclick="window.location.replace('./download/ChromaCore')">Download</button>
<button class="play" style="margin-top: -25.1px; margin-bottom: 18px; margin-left: 225px;" onclick="window.location.replace('./ChromaCore/beta')">Play Beta</button>
<button class="play" style="margin-top: -42.5px; margin-left: 312px;" onclick="window.location.replace('./ChromaCore')">Play</button>
</div>
<br /><br /><br /><br />

<div class="game">
<img src="../assets/logos/machineer.webp" width="117px" height="117px" class="gameList" style="margin-left:10px;margin-top: 0px;">
<p style="margin-left:135px; margin-top:-123px; font-size: 30px; color: white; font-weight: bold; margin-bottom: 25px;">Machineer</p>
<p style="font-size: 18px ;margin-top: -28px; margin-left: 137px; color: #697186; margin-bottom: 5px;">Genre: Sandbox</p>
<img src="../assets/logos/windows.svg" class="platform" style="margin-left:139px; margin-bottom: 10px;">
<img src="../assets/logos/html5.png" class="platform" style="margin-left:5px; margin-bottom: 10px;">
<br>
<button class="download" style="float: left; margin-bottom: 0px; margin-left: 135px;" onclick="window.location.replace('./download/Machineer')">Download</button>
<button class="play" style="margin-top: -25.1px; margin-bottom: 18px; margin-left: 225px;" onclick="window.location.replace('./Machineer')">Play</button>
</div>
<main>
<div class="game">
<img
src="../assets/logos/chromacore.png"
width="117px"
height="117px"
class="gameList"
style="margin-left: 10px; margin-top: 15px" />
<p
style="
margin-left: 135px;
margin-top: -123px;
font-size: 30px;
color: white;
font-weight: bold;
margin-bottom: 25px;
">
ChromaCore
</p>
<p
style="
font-size: 18px;
margin-top: -28px;
margin-left: 137px;
color: #697186;
margin-bottom: 5px;
">
Genre: Platformer
</p>
<img
src="../assets/logos/windows.svg"
class="platform"
style="margin-left: 139px; margin-bottom: 10px" />
<img
src="../assets/logos/html5.png"
class="platform"
style="margin-left: 5px; margin-bottom: 10px" />
<br />
<button
class="download"
style="float: left; margin-bottom: 0px; margin-left: 135px"
onclick="window.location.replace('./download/ChromaCore')">
Download
</button>
<button
class="play"
style="margin-top: -25.1px; margin-bottom: 18px; margin-left: 225px"
onclick="window.location.replace('./ChromaCore/beta')">
Play Beta
</button>
<button
class="play"
style="margin-top: -42.5px; margin-left: 312px"
onclick="window.location.replace('./ChromaCore')">
Play
</button>
</div>
<div class="game">
<img
src="../assets/logos/machineer.webp"
width="117px"
height="117px"
class="gameList"
style="margin-left: 10px; margin-top: 0px" />
<p
style="
margin-left: 135px;
margin-top: -123px;
font-size: 30px;
color: white;
font-weight: bold;
margin-bottom: 25px;
">
Machineer
</p>
<p
style="
font-size: 18px;
margin-top: -28px;
margin-left: 137px;
color: #697186;
margin-bottom: 5px;
">
Genre: Sandbox
</p>
<img
src="../assets/logos/windows.svg"
class="platform"
style="margin-left: 139px; margin-bottom: 10px" />
<img
src="../assets/logos/html5.png"
class="platform"
style="margin-left: 5px; margin-bottom: 10px" />
<br />
<button
class="download"
style="float: left; margin-bottom: 0px; margin-left: 135px"
onclick="window.location.replace('./download/Machineer')">
Download
</button>
<button
class="play"
style="margin-top: -25.1px; margin-bottom: 18px; margin-left: 225px"
onclick="window.location.replace('./Machineer')">
Play
</button>
</div>
<div class="game">
<img
src="../assets/logos/applecatch.webp"
width="117px"
height="117px"
class="gameList"
style="margin-left: 10px; margin-top: 0px"
alt="Apple Catch Icon" />
<p
style="
margin-left: 135px;
margin-top: -123px;
font-size: 30px;
color: white;
font-weight: bold;
margin-bottom: 25px;
">
Apple Catch
</p>
<p
style="
font-size: 18px;
margin-top: -28px;
margin-left: 137px;
color: #697186;
margin-bottom: 5px;
">
Genre: Arcade
</p>
<img
src="../assets/logos/android.svg"
class="platform"
style="margin-left: 139px; margin-bottom: 10px"
title="Android™" />
<br />
<button
class="download"
style="margin-bottom: 18px; margin-left: 135px"
onclick="window.location.replace('./download/AppleCatch')">
Download
</button>
</div>
</main>

<div class="game">
<img src="../assets/logos/applecatch.webp" width="117px" height="117px" class="gameList" style="margin-left:10px;margin-top: 0px;" alt="Apple Catch Icon">
<p style="margin-left:135px; margin-top:-123px; font-size: 30px; color: white; font-weight: bold; margin-bottom: 25px;">Apple Catch</p>
<p style="font-size: 18px ;margin-top: -28px; margin-left: 137px; color: #697186; margin-bottom: 5px;">Genre: Arcade</p>
<img src="../assets/logos/android.svg" class="platform" style="margin-left:139px; margin-bottom: 10px;" title="The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.">
<br>
<button class="download" style="margin-bottom: 18px; margin-left: 135px;" onclick="window.location.replace('./download/AppleCatch')">Download</button>
</div>
</body>
<footer>
<!-- It looked weird with just the legal link lol -->
<p>HEJOK254</p>
<p><a href="/legal">Legal Information</a></p>
</footer>
</body>
</html>
Loading

0 comments on commit 9ee6bd5

Please sign in to comment.