183 lines
8.0 KiB
PHP
183 lines
8.0 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="True" name="HandheldFriendly">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
<meta name="description" content="Scrapeboard is a new kind of arcade game played on a skateboard deck and four pads that combines elements of rhythm, racing, and fighting games to create a unique, challenging, and physically demanding boss rush experience." />
|
|
<meta name="keywords" content="arcade, arcade games, diy arcade cabinets, alt ctrl, alternative controllers, video games, indie game, indie games, indie dev, gamedev, game dev, game programming">
|
|
<meta property="og:url" content="http://scrape.nugget.fun">
|
|
<meta property="og:title" content="Scrapeboard">
|
|
<meta property="og:description" content="Scrapeboard is a new kind of arcade game played on a skateboard deck and four pads that combines elements of rhythm, racing, and fighting games to create a unique, challenging, and physically demanding boss rush experience.">
|
|
<meta property="og:image" content="http://scrape.nugget.fun/www/open_graph_card.jpg">
|
|
<meta property="og:type" content="website">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@diskmem">
|
|
<meta name="twitter:creator" content="@diskmem">
|
|
<title>Scrapeboard</title>
|
|
<link rel="stylesheet" href="www/style.css" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<video id="landing_video" autoplay muted disablepictureinpicture disableremoteplayback loop="true"
|
|
poster="www/scrapeboard_new_cover.jpg">
|
|
<source src="www/scrapeboard_new.webm">
|
|
</video>
|
|
<style>
|
|
@media (min-width: 800px)
|
|
{
|
|
div#hero
|
|
{
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
width: 75%;
|
|
}
|
|
|
|
div#hero img#head_0
|
|
{
|
|
grid-area: 1 / 1 / 2 / 3;
|
|
}
|
|
|
|
div#hero img#head_1
|
|
{
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
}
|
|
|
|
div#hero img#head_2
|
|
{
|
|
grid-area: 2 / 2 / 3 / 3;
|
|
}
|
|
}
|
|
@media (max-width: 800px)
|
|
{
|
|
div#hero
|
|
{
|
|
grid-template-columns: repeat(1, 1fr);
|
|
grid-template-rows: repeat(3, 1fr);
|
|
width: 99%;
|
|
}
|
|
|
|
div#hero img#head_0
|
|
{
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
|
|
div#hero img#head_1
|
|
{
|
|
/* width: 90%; */
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
}
|
|
|
|
div#hero img#head_2
|
|
{
|
|
/* width: 90%; */
|
|
grid-area: 3 / 1 / 4 / 2;
|
|
}
|
|
}
|
|
</style>
|
|
<div id="hero">
|
|
<img id="head_0" src="www/ad_head_transparent_0.png" />
|
|
<img id="head_1" src="www/ad_head_transparent_1.png" />
|
|
<img id="head_2" src="www/ad_head_transparent_2.png" />
|
|
</div>
|
|
<style>
|
|
@media (min-width: 800px)
|
|
{
|
|
div#boarding
|
|
{
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-template-rows: repeat(1, 1fr);
|
|
grid-gap: 3%;
|
|
width: 91%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px)
|
|
{
|
|
div#boarding
|
|
{
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(3, 1fr);
|
|
grid-gap: 5%;
|
|
width: 99%;
|
|
}
|
|
|
|
div#boarding img#boarding_4
|
|
{
|
|
}
|
|
}
|
|
</style>
|
|
<div id="boarding">
|
|
<a href="www/Boarding_1.gif"><img id="boarding_0" src="www/Boarding_1_thumb.gif" /></a>
|
|
<a href="www/Boarding_0.gif"><img id="boarding_1" src="www/Boarding_0_thumb.gif" /></a>
|
|
<a href="www/Multiplay_Closing-Flan.gif"><img id="boarding_2" src="www/Multiplay_Closing-Flan_thumb.gif" /></a>
|
|
<a href="www/Boarding_2.gif"><img id="boarding_3" src="www/Boarding_2_thumb.gif" /></a>
|
|
<a href="www/Boarding_3.gif"><img id="boarding_4" src="www/Boarding_3_thumb.gif" /></a>
|
|
</div>
|
|
<!-- <div id="heading">
|
|
<div id="title">
|
|
<img id="plank" src="resource/Title_plank.png" />
|
|
<img id="board" src="resource/Introduction_skateboard.png" />
|
|
<img id="lizard" src="resource/littleSlimeGoop/1_downRight.png" />
|
|
</div>
|
|
<div id="question">
|
|
So you think you can skateboard, but can you <i>scrape</i>board, you slime bag?
|
|
</div>
|
|
</div> -->
|
|
<!-- <div id="blob">
|
|
<div id="detail">
|
|
We have the <span class="highlight">technology</span> to put you on a board which is a
|
|
wireless electric <span class="highlight">video game</span> controller. Do you have the
|
|
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
|
|
to <i>Tony Hawk</i>?
|
|
</div>
|
|
<div id="detail2">
|
|
We have the <span class="highlight">technology</span> to put you on a board which is a
|
|
wireless electric <span class="highlight">video game</span> controller. Do you have the
|
|
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
|
|
to <i>Tony Hawk</i>?
|
|
</div>
|
|
<div id="detail3">
|
|
We have the <span class="highlight">technology</span> to put you on a board which is a
|
|
wireless electric <span class="highlight">video game</span> controller. Do you have the
|
|
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
|
|
to <i>Tony Hawk</i>?
|
|
</div>
|
|
<div id="detail4">
|
|
We have the <span class="highlight">technology</span> to put you on a board which is a
|
|
wireless electric <span class="highlight">video game</span> controller. Do you have the
|
|
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
|
|
to <i>Tony Hawk</i>?
|
|
</div>
|
|
<div id="detail5">
|
|
We have the <span class="highlight">technology</span> to put you on a board which is a
|
|
wireless electric <span class="highlight">video game</span> controller. Do you have the
|
|
<span class="highlight">moves</span> to skate through a gauntlet of goons all the way
|
|
to <i>Tony Hawk</i>?
|
|
</div>
|
|
</div> -->
|
|
<div id="instructions">
|
|
<img id="line" src="www/hero_instructions_foreground.png" />
|
|
<img id="diagram" src="www/instructions.png" />
|
|
</div>
|
|
<img id="description" src="www/hero_description_foreground.png" />
|
|
<div id="comedy">
|
|
<iframe src="https://www.youtube.com/embed/ai9WlJdfbvI" frameborder="0"
|
|
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
<div id="comedy_credits">
|
|
video by <a href="http://twitter.com/beachethan">@beachethan</a>
|
|
</div>
|
|
<div class="credits">
|
|
Scrapeboard is created by <a href="http://twitter.com/diskmem">@diskmem</a> and
|
|
<a href="http://twitter.com/snakesandrews">@snakesandrews</a><br/>
|
|
with engineering by <a href="http://twitter.com/clementshimizu">@ClementShimizu</a><br/>
|
|
</div>
|
|
<div id="ink">
|
|
<img src="www/Ink.png">
|
|
</div>
|
|
</body>
|
|
</html>
|