"Responsive 404 Error"
Bootstrap 3.0.0 Snippet by BubblegunTV

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="de"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>404 Error</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="index.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <main> <div class="fehler fullHeight" style="height: 941px;"> <div class="content" id="contentOne" style="margin-top: 363px;"> <h1>404</h1> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6 message"> <p class="row"> </p><div class="col-xs-4"> <i class="fa fa-exclamation-triangle icon" aria-hidden="true"></i> </div> <div class="col-xs-8 noCenter text"> Fehler! Die Seite existiert nicht. Guck ob du deine URL Richtig geschreiben hast oder guck unten nach Projekten in den folgenden Verzeichnissen. </div> <p></p> </div> <div class="col-md-3"></div> </div> <div class="down" id="down" style="margin-top: 188.2px;"> <i class="fa fa-angle-down bounce animated" aria-hidden="true"></i> </div> </div> </div> <div class="show fullHeight" style="height: 941px;"> <div class="content" id="contentTwo" style="margin-top: 333px;"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6 noCenter"> <h3>Folgende Verzeichnisse sind zu erreichen:</h3> <table class="table text"> <thead> <tr> <td>Verzeichnis</td> <td>Öffnen</td> </tr> </thead> <tbody> <tr> <td>My Site 1</td> <td><a href="#" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a></td> </tr> <tr> <td>Meine Seite 2</td> <td><a href="#" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a></td> </tr> <!-- MORE --> </tbody> </table> </div> <div class="col-md-3"></div> </div> </div> </div> </main> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script> var WindowHeight = $(window).height(); var contentOneHeight = $("#contentOne").height(); var contentTwoHeight = $("#contentTwo").height(); var distanceOne = WindowHeight-contentOneHeight; var distanceTwo = WindowHeight-contentTwoHeight; var marginOne = distanceOne/2; var marginTwo = distanceTwo/2; var down = WindowHeight/100*20; $(".fullHeight").css("height", WindowHeight); $("#contentOne").css("margin-top",marginOne); $("#contentTwo").css("margin-top",marginTwo); $("#down").css("margin-top", down); $("#down").click(function(){ $('html, body').animate({ scrollTop: ($(".show").offset().top)}, 'slow'); }); </script> </body></html>
body{ overflow-x:hidden; } .fehler{ background:#fed024; } .show{ background:#2a2025; color:#fff; } .show h3{ margin-bottom:35px; } .show a{ color:#fed024; text-decoration:none; } .fehler h1{ color:#313131; } h1{ margin:0 !important; font-size:6em; } .content{ margin:0 auto; text-align:center; position:absolute; width:100%; } .short{ width:60% !important; margin:0 auto; } .icon{ font-size:4em; transition:all .2s; } .icon:hover{ transform: scale(1.1); color:#f00; } .noCenter{ text-align:left; } .text{ font-size:1.3em; font-weight:300; } .message{ margin-top:35px; } .down{ text-align:center; position:absolute; font-size:2.5em; width:100%; cursor:pointer; } .animated{ animation-duration: 2s; animation-fill-mode: both; animation-timing-function: ease-in-out; animation-iteration-count:infinite; } @keyframes bounce{ 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} } .bounce{ animation-name: bounce; } .table thead{ border-bottom:3px solid #fff; } .table tbody tr{ border-bottom:1px solid #fff; }

Related: See More

Argon Design System
Success and Error Icon Animation
Simple & Clean 404 Error Page style
Simple & Clean 404 Error Page Design

Questions / Comments: