Ellpeck/Web
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

first draft of ff site

Browse source
This commit is contained in:
Ellpeck 2019-11-15 20:48:02 +01:00
parent 17e9f2730f
commit e1a1bea28a
19 changed files with 245 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
foefrenzy/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

151
foefrenzy/index.html Normal file
View file

@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foe Frenzy</title>
<meta name="author" content="Ellpeck">
<meta name="description" content="A fast-paced fighting game where you battle up to three of your friends with random, short-lasting items">
<meta name="keywords" content="Ellpeck, Foe Frenzy, Steam, Discord, itch, itch.io, Battle, 2d, Top Down, Pixelart, MonoGame, Fighting, Game">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<meta property="og:title" content="Foe Frenzy">
<meta property="og:description" content="A fast-paced fighting game where you battle up to three of your friends with random, short-lasting items">
<meta property="og:image" content="https://www.ellpeck.de/foefrenzy/media/logo.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Ellpeck">
<meta name="twitter:creator" content="@Ellpeck">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-150032076-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
let gtag = function () {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-150032076-2');
</script>
</head>
<body>
<div class="main rounded">
<img src="media/banner.png" class="banner rounded" alt="Foe Frenzy Logo">
<p>Foe Frenzy is a fast-paced fighting game where you battle up to three of your friends with random, short-lasting items in an attempt to be the last survivor.</p>
<h1>Get the Game</h1>
<p>You can buy Foe Frenzy for <strong>$12.99</strong> on any of the following platforms.</p>
<div class="store-buttons">
<a class="btn btn-primary store-button" role="button" href="https://store.steampowered.com/app/1194170/">
<img src="media/steam.png" class="store-img" alt="Buy on Steam">
</a>
<a class="btn btn-primary store-button" role="button" href="https://discordapp.com/store/skus/606152985181028352/">
<img src="media/discord.png" class="store-img" alt="Buy on Discord">
</a>
<a class="btn btn-primary store-button" role="button" href="https://ellpeck.itch.io/foefrenzy">
<img src="media/itch.png" class="store-img" alt="Buy on itch.io">
</a>
</div>
<h1>Trailer</h1>
<div class="trailer-div">
<iframe class="trailer rounded" src="https://www.youtube.com/embed/Z7ZeuVBNuf4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h1>Screenshots</h1>
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
<li data-target="#carousel" data-slide-to="4"></li>
<li data-target="#carousel" data-slide-to="5"></li>
</ol>
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img class="d-block w-100 rounded" src="media/screenshots/first.png" alt="Screenshot of the main menu">
</div>
<div class="carousel-item">
<img class="d-block w-100 rounded" src="media/screenshots/second.png" alt="Screenshot of the map selection menu">
</div>
<div class="carousel-item">
<img class="d-block w-100 rounded" src="media/screenshots/third.png" alt="Screenshot of a cave map featuring two players">
</div>
<div class="carousel-item">
<img class="d-block w-100 rounded" src="media/screenshots/fourth.png" alt="Screenshot of a beach map featuring two players">
</div>
<div class="carousel-item">
<img class="d-block w-100 rounded" src="media/screenshots/fifth.png" alt="Screenshot of the victory screen">
</div>
<div class="carousel-item">
<img class="d-block w-100 rounded" src="media/screenshots/sixth.png" alt="Screenshot of the achievements screen">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<h1>Features</h1>
<ul>
<li><strong>Local multiplayer</strong> that allows you to battle up to three of your friends. Play with up to two people on the keyboard or connect additional controllers!</li>
<li><strong>Online multiplayer</strong> to play with your friends either over Steam, Discord or using your IP. If you have a friend over, you can even combine local and online multiplayer and play with both at the same time!<sup><a href="#footnote-1">[1]</a></sup></li>
<li><strong>12 maps to play</strong>, all with different interactable terrain; battle your friends in the water, on slippery ice, in a vine-filled jungle, in a dark cave and more!</li>
<li><strong>15 items to battle with</strong>, from swords to bows to wings that you can use to fly over deadly lava!</li>
<li><strong>14 achievements</strong> that you can try to obtain with your friends, each one unlocking an additional character look you can choose for your player!</li>
<li><strong>An original soundtrack</strong> with a unique music style for each map theme, created by the amazing <a href="https://twitter.com/jamalgreenmusic">Jamal Green</a>!</li>
<li><strong>Regular updates</strong> that will add new items, new maps and more!</li>
</ul>
<p>
<small><a id="footnote-1">[1]:</a> When creating a Multiplayer lobby, the host has the option to invite players using Discord's or Steam's online play features, regardless of which platform the host and the invitees have bought the game on. <em>Sadly, Discord's online play feature is currently only supported on Windows.</em></small>
</p>
<h1>About the Project</h1>
<p>
Foe Frenzy is a game created by <a href="https://ellpeck.de">Ellpeck</a>, a student and indie game developer from Germany. It started as a small project inspired by Mario Kart and similar games, because the short-lasting battle items you can use in those games allow for fast and fun gameplay.
</p>
<p>
Development on the project started early in 2019, back when Foe Frenzy was still considered a small side project. Ellpeck made <a href="https://ellpeck.de/blog-small_projects">a blog post</a> about the process of Foe Frenzy's early creation in which he described how creating small projects is easier. After a while of developing the game, Ellpeck took a break from it due to lack of motivation. When he came back to it about two months later, he decided to turn Foe Frenzy into a bigger project, which included redesigning the art for the game, as well as the plan to turn it into a commercial project. Shortly after the rework, he made <a href="https://ellpeck.de/blog-big_projects">a second blog post</a> about this decision.
</p>
<p>With Foe Frenzy, Ellpeck hopes to have created a game that brings fun and banter to many friend groups' gaming meetups.</p>
<h1>Press</h1>
<p>
If you want to create a video or write an article about Foe Frenzy, you are more than welcome to! If you want to have it featured on this site, you can send an e-mail to <a href="mailto:me@ellpeck.de">me@ellpeck.de</a>.
</p>
<p>
If you're a games journalist or a let's player and you would like to request a key for the game, you can also send an e-mail to the address above. Please include a link to a site that showcases your content. Thanks!
</p>
<h2>Assets</h2>
<p>You're free to use the following images for your video or article about Foe Frenzy. Just right-click any of the images you would like to use and select <code>Save image as...</code> to save them.</p>
<div class="assets">
<img src="media/press/banner720.png" class="asset" alt="The game's banner in 16:9">
<img src="media/press/banner.png" class="asset" alt="The game's banner as a strip">
<img src="media/press/logo.png" class="asset" alt="The game's logo">
<img src="media/press/name.png" class="asset" alt="The game's logo and name">
</div>
<p><small>Note that the gray background on some of the images simply exists to make them stand out from this site's background color. It's not actually part of the images themselves.</small></p>
</body>
</html>

BIN
foefrenzy/media/background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
foefrenzy/media/banner.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
foefrenzy/media/discord.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
foefrenzy/media/itch.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
foefrenzy/media/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
foefrenzy/media/press/banner.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
foefrenzy/media/press/banner720.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 510 KiB

BIN
foefrenzy/media/press/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
foefrenzy/media/press/name.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
foefrenzy/media/screenshots/fifth.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 326 KiB

BIN
foefrenzy/media/screenshots/first.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 316 KiB

BIN
foefrenzy/media/screenshots/fourth.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
foefrenzy/media/screenshots/second.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 405 KiB

BIN
foefrenzy/media/screenshots/sixth.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 336 KiB

BIN
foefrenzy/media/screenshots/third.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 415 KiB

BIN
foefrenzy/media/steam.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

94
foefrenzy/style.css Normal file
View file

@ -0,0 +1,94 @@
body {
position: relative;
background-image: url("media/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.main {
width: 50%;
display: block;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 40px;
background-color: white;
}
.banner {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.store-buttons {
text-align: center;
}
.store-button {
margin: 5px;
}
.store-img {
width: 160px;
height: auto;
}
.btn {
border-radius: 0px;
}
h1 {
margin-top: 20px;
}
.trailer-div {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.trailer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.assets {
text-align: center;
}
.asset {
width: 40%;
height: auto;
margin: 10px;
background-color: #BBBBBB;
}
li {
margin-top: 5px;
}
@media (max-width: 1200px) {
.main {
width: 80%;
}
}
@media (max-width: 768px) {
.store-img {
width: 100px;
}
}
@media (max-width: 510px) {
.main {
width: 90%;
padding: 20px;
}
}