Skip to content

Instantly share code, notes, and snippets.

@michel47

michel47/200.html

Last active October 18, 2022 04:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save michel47/f3b2adb3c7ac1003318d70fd203bfdce to your computer and use it in GitHub Desktop.
Save michel47/f3b2adb3c7ac1003318d70fd203bfdce to your computer and use it in GitHub Desktop.
Download ZIP
status code 200
Raw
200.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>200 - This page on your side of the Universe</title>
<!-- Google font -->
<link href="Montserrat.css" rel="stylesheet">
<!-- Custom stlylesheet -->
<link type="text/css" rel="stylesheet" href="style.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]-->
<style>
pre {
background: #f4f4f4;
border: 1px solid #ddd;
border-left: 3px solid #f36d33;
color: #666;
page-break-inside: avoid;
font-family: monospace;
font-size: 11px;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1em 1.5em;
display: block;
word-wrap: break-word;
}
</style>
</head>
<body>
<div id="notfound">
<div class="notfound">
<div class="notfound-404">
<h1>200</h1>
</div>
<h2>This page is on your side side of the Universe</h2>
<p>The page you are accessing is fetching an <a href="app.js">one page app</a>
from <a href="https://ipfs.blockring™.ml/ipns/QmYWY1hEfnX9iBYwzWKghrU81RAaFKmSfTBkEN7AePcrNC/websites/200.html">blockring™.ml</a>
and run locally the application in your browser.</p>
<a class=button href="https://www.drit.ml">Dr I·T</a>
</a>
</div>
</div>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>
Raw
404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404 - This page is outside of our Universe</title>
<!-- Google font -->
<link href="Montserrat.css" rel="stylesheet">
<!-- Custom stlylesheet -->
<link type="text/css" rel="stylesheet" href="style.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]-->
<style>
pre {
background: #f4f4f4;
border: 1px solid #ddd;
border-left: 3px solid #f36d33;
color: #666;
page-break-inside: avoid;
font-family: monospace;
font-size: 11px;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1em 1.5em;
display: block;
word-wrap: break-word;
}
</style>
</head>
<body>
<div id="notfound">
<div class="notfound">
<div class="notfound-404">
<h1>404</h1>
</div>
<h2>This page is outside of our Universe</h2>
<p>The page you are trying to access does not exist or has been moved.
Try going back to our homepage.</p>
<a href="https://www.drit.ml">Go Home</a>
</div>
</div>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>
Raw
app.js
/* loading the one-page-app from IPFS */
Raw
Montserrat.css
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(Montserrat400.ttf) format('truetype');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url(Montserrat700.ttf) format('truetype');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
src: url(Montserrat900.ttf) format('truetype');
}
Raw
style.css
* {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body {
padding: 0;
margin: 0
}
#notfound {
position: relative;
height: 100vh
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.notfound {
max-width: 410px;
width: 100%;
text-align: center
}
.notfound .notfound-404 {
height: 280px;
position: relative;
z-index: -1
}
.notfound .notfound-404 h1 {
font-family: montserrat, sans-serif;
font-size: 230px;
margin: 0;
font-weight: 900;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background: url(bg.jpg) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
background-position: center
}
.notfound h2 {
font-family: montserrat, sans-serif;
color: #000;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
margin-top: 0
}
.notfound p {
font-family: montserrat, sans-serif;
color: #000;
font-size: 14px;
font-weight: 400;
margin-bottom: 20px;
margin-top: 0
}
.notfound a.button {
font-family: montserrat, sans-serif;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
background: #0046d5;
display: inline-block;
padding: 15px 30px;
border-radius: 40px;
color: #fff;
font-weight: 700;
-webkit-box-shadow: 0 4px 15px -5px #0046d5;
box-shadow: 0 4px 15px -5px #0046d5
}
@media only screen and (max-width:767px) {
.notfound .notfound-404 {
height: 142px
}
.notfound .notfound-404 h1 {
font-size: 112px
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment