2022-01-27 15:10:02 -05:00
<! 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 : 800 px )
{
div #hero
{
grid - template - columns : repeat ( 2 , 1 fr );
grid - template - rows : repeat ( 2 , 1 fr );
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 : 800 px )
{
div #hero
{
grid - template - columns : repeat ( 1 , 1 fr );
grid - template - rows : repeat ( 3 , 1 fr );
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 : 800 px )
{
div #boarding
{
grid - template - columns : repeat ( 5 , 1 fr );
grid - template - rows : repeat ( 1 , 1 fr );
grid - gap : 3 % ;
width : 91 % ;
}
}
@ media ( max - width : 800 px )
{
div #boarding
{
grid - template - columns : repeat ( 2 , 1 fr );
grid - template - rows : repeat ( 3 , 1 fr );
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 >
2018-07-25 22:02:44 -04:00
</ html >