175 lines
4.1 KiB
HTML
175 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Libre Games: By Everyone, for Everyone</title>
|
|
<style>
|
|
html { /* center HTML and reduce width */
|
|
background-color: black;
|
|
margin: auto;
|
|
max-width: 60em;
|
|
}
|
|
|
|
body { /* establish document colors and font */
|
|
background-color: #1c1b22; /* dark grey background */
|
|
color: #dee2e6; /* off white text */
|
|
font-family: Roboto, Arial, sans-serif;
|
|
text-align: center;
|
|
}
|
|
|
|
.text-orange {
|
|
color: #ff8f23;
|
|
}
|
|
|
|
.text-blue {
|
|
color: #4fbad5;
|
|
}
|
|
|
|
/* only strong part of header is bolded */
|
|
|
|
h1, h2 {
|
|
color: #dee2e6; /* off white text */
|
|
font-weight: normal;
|
|
}
|
|
|
|
h1 strong, h2 strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* images used as part of headers have fixed height */
|
|
|
|
h1 img {
|
|
height: 2em;
|
|
}
|
|
|
|
h2 img {
|
|
height: 1.5em;
|
|
}
|
|
|
|
p {
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* class to display a floated gallery of card elements */
|
|
|
|
.gallery-flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 55em;
|
|
}
|
|
|
|
.gallery-flex .card {
|
|
background-color: #35333f; /* lighter gray background for cards */
|
|
border-radius: 8px;
|
|
color: #dee2e6; /* off white text */
|
|
font-weight: normal;
|
|
margin: 0.5em;
|
|
padding: 0.5em;
|
|
min-width: 25.5em;
|
|
width: 25em;
|
|
}
|
|
|
|
.gallery-flex strong {
|
|
color: #FF8F23;
|
|
}
|
|
|
|
.gallery-flex ul, .gallery-flex p {
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1 style="background-color:#212529;text-align:center;">
|
|
<strong class="text-blue">Libre</span><strong class="text-orange">Gaming</span>
|
|
</h1>
|
|
|
|
<h1><img src="images/libregaming.svg" alt="logo" /> Libre Games: By <strong>Everyone</strong> for <strong>Everyone</strong></h1>
|
|
|
|
<p><span style="color:#ff8f23">Libre games are fun games owned by the
|
|
community: Everyone who <strong>plays</strong> the game, <strong>develops</strong> it, and
|
|
<strong>shares</strong> it.</span></p>
|
|
|
|
<h2><img src="images/team-line.svg" alt="icon" /> Community owned games</h2>
|
|
|
|
<p><span style="color:#ff8f23">When a game is owned by the <strong>community</strong>
|
|
everyone can do anything they like with it!</span></p>
|
|
|
|
<div class="gallery-flex">
|
|
<div class="card">
|
|
<h1>Modding</h1>
|
|
<h1><img alt="tools icon" src="images/tools-line.svg" /></h1>
|
|
<ul>
|
|
<li>Create and share a <strong>modified</strong> project
|
|
</li>
|
|
</ul>
|
|
<p>From <strong>simple</strong> modifications to
|
|
<strong>full</strong> conversions!</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h1>Sharing</h1>
|
|
<h1><img alt="team icon" src="images/team-line.svg" /></h1>
|
|
<ul>
|
|
<li><strong>Share</strong> copies of the game!</li>
|
|
<li><strong>Freely</strong> use the game's content on any platform!</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h1>Learning</h1>
|
|
<h1><img alt="book icon" src="images/book-open-line.svg" /></h1>
|
|
<ul>
|
|
<li><strong>Learn</strong> how the game is built by looking
|
|
<strong>under the hood</strong>.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h1>Collaborating</h1>
|
|
<h1><img alt="service icon" src="images/service-line.svg" /></h1>
|
|
<ul>
|
|
<li><strong>Participate</strong> in the game's development by
|
|
<strong>improving</strong> it and/or giving
|
|
<strong>feedback</strong>.</li>
|
|
<li><strong>Create</strong> or
|
|
<strong>improve</strong> translations.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h1>Preserving</h1>
|
|
<h1><img alt="fingerprint icon" src="images/fingerprint-line.svg" /></h1>
|
|
<ul>
|
|
<li>Help port the game to new platforms and ensure it
|
|
<strong>lives forever</strong>.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p></div></p>
|
|
|
|
<h2>How is this achieved?</h2>
|
|
|
|
<div class="gallery-flex">
|
|
<div class="card">
|
|
<h1>Sharing</h1>
|
|
<h1><img alt="team icon" src="images/team-line.svg" /></h1>
|
|
<p><strong>Everything</strong> needed to make the game:</p>
|
|
<ul>
|
|
<li>Code</li>
|
|
<li>Music</li>
|
|
<li>Art</li>
|
|
<li>3D models</li>
|
|
<li>Documentation</li>
|
|
<li>...</li>
|
|
</ul>
|
|
<p>Is made <strong>available</strong> to <strong>everyone</strong>
|
|
with full permission to <strong>share</strong> and
|
|
<strong>remix</strong> (and even make a new game from it).</p>
|
|
</div>
|
|
|
|
<p></div></p>
|
|
</body>
|
|
</html>
|