Bootstrap snippet: 500 error page with particles

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<script src="http://themetaro.com/omega/layout2/assets/plugins/particles.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div id="particles-js"><canvas width="1417" height="709" style="width: 100%; height: 100%;"></canvas></div> <div class="page-404"> <div class="outer"> <div class="middle"> <div class="inner"> <!--BEGIN CONTENT--> <div class="inner-circle"><i class="fa fa-cogs"></i><span>500</span></div> <span class="inner-status">Opps! Internal Server Error!</span> <span class="inner-detail" style="color:#fff;"> Unfortunately we're having trouble loading the page you are looking for. Please come back in a while. </span> <!--END CONTENT--> </div> </div> </div> </div>
.clearfix:before, .clearfix:after { display: table; content: ' '; } .clearfix:after { clear: both; } body { background: #f0f0f0 !important; } #particles-js { width: 100%; height: 100%; background-color: #3b78e7; } .page-404 .outer { position: absolute; top: 0; display: table; width: 100%; height: 100%; } .page-404 .outer .middle { display: table-cell; vertical-align: middle; } .page-404 .outer .middle .inner { width: 300px; margin-right: auto; margin-left: auto; } .page-404 .outer .middle .inner .inner-circle { height: 300px; border-radius: 50%; background-color: #ffffff; } .page-404 .outer .middle .inner .inner-circle:hover i { color: #39bbdb!important; background-color: #f5f5f5; box-shadow: 0 0 0 15px #39bbdb; } .page-404 .outer .middle .inner .inner-circle:hover span { color: #39bbdb; } .page-404 .outer .middle .inner .inner-circle i { font-size: 5em; line-height: 1em; float: right; width: 1.6em; height: 1.6em; margin-top: -.7em; margin-right: -.5em; padding: 20px; -webkit-transition: all .4s; transition: all .4s; text-align: center; color: #f5f5f5!important; border-radius: 50%; background-color: #39bbdb; box-shadow: 0 0 0 15px #f0f0f0; } .page-404 .outer .middle .inner .inner-circle span { font-size: 11em; font-weight: 700; line-height: 1.2em; display: block; -webkit-transition: all .4s; transition: all .4s; text-align: center; color: #e0e0e0; } .page-404 .outer .middle .inner .inner-status { font-size: 20px; display: block; margin-top: 20px; margin-bottom: 5px; text-align: center; color: #39bbdb; } .page-404 .outer .middle .inner .inner-detail { line-height: 1.4em; display: block; margin-bottom: 10px; text-align: center; color: #999999; }
$(function () { /* Begin Particle JS */ particlesJS('particles-js', { particles: { color: '#fff', shape: 'circle', opacity: 1, size: 2.5, size_random: true, nb: 100, line_linked: { enable_auto: true, distance: 250, color: '#fff', opacity: 0.5, width: 1, condensed_mode: { enable: false, rotateX: 600, rotateY: 600 } }, anim: { enable: true, speed: 2.5 } }, interactivity: { enable: true, mouse: { distance: 250 }, detect_on: 'canvas', mode: 'grab', line_linked: { opacity: 0.5 }, events: { onclick: { push_particles: { enable: true, nb: 4 } } } }, retina_detect: true }); /* End Particle JS */ });
Dey-Dey

500 error page with particles

Dey-Dey
  Sep 8th, 10:55
22 Views