文
章
目
录
章
目
录
本文主要提供H5+CSS3开发的404 NOT FOUND错误页面模板代码下载,并且带有方块消除的小游戏,方便用户可以休闲一下。
效果
核心代码
<section class="huge-section fluid-container">
<div class="row">
<div class="huge-side left-side col-xs-12 col-sm-6">
<div class="row">
<div class="huge-content col-xs-8 col-xs-offset-2">
<a href="javascript:;">
<img class="logo" src="static/picture/logo.png">
</a>
<h1>404</h1>
<h2>The page you are looking for doesn't exist.</h2>
<a class="btn" href="javascript:;">
Go back to our Homepage
</a>
<footer>
<!--Social Icons-->
<ul class="social-icons">
<li>
<a href="javascript:;" class="social-icon">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="javascript:;" class="social-icon">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="javascript:;" class="social-icon">
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="javascript:;" class="social-icon">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
<!--/Social Icons-->
</footer>
</div>
</div>
</div>
<div class="huge-side right-side col-xs-12 col-sm-6">
<div class="huge-background-img">
<div id="container">
<div id="game"></div>
<div id="score">0</div>
<div id="instructions">Click (or press the spacebar) to place the block</div>
<div class="game-over">
<h2>Game Over</h2>
<p>You did great, you're the best.</p>
<p>Click or spacebar to start again</p>
</div>
<div class="game-ready">
<div id="start-button">Start</div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</section>