Error 404 amigable

Aquesta pràctica és molt fàcil de fer, el primer de tot hem de seleccionar un subdomini de la

xarxa. Jo per exemple, agafaré el subdomini media. Primer de tot hem d’anar a public_html/dgomezr.com/media i hem de crear una carpeta que es digui error-404.

sudo mkdir error-404

Dins d’error hem de crear un html, que serà el que ens sortirà quan tinguem l’error 404.

nano index.html

Una vegada hem creat el anterior hem d’anar al fitxer següent:

sudo nano /etc/apache2/sites-availables/media.dgomezr.com

Això en teoria ja ho tenim configurar però, ara hem d’afegir una linia al codi.

ErrorDocument 404 /error-404/index.html

Una vegada hem afegit això, ja hem fet tot en aquest subdomini. Si volem que ens surti a més subdominis només hem de fer el mateix una altra vegada.

Això és el que surt a la meva pàgina web quan hi ha aquest error.

El meu codi html és el següent:

<!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>Error 404</title>

<style type=”text/css”>

* {

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

body {

padding: 0;

margin: 0;

backgroung-color: skyblue;

}

#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: 767px;

width: 100%;

line-height: 1.4;

padding: 0px 15px;

}

.notfound .notfound-404 {

position: relative;

height: 150px;

line-height: 150px;

margin-bottom: 25px;

}

.notfound .notfound-404 h1 {

font-family: ‘Titillium Web’, sans-serif;

font-size: 186px;

font-weight: 900;

margin: 0px;

text-transform: uppercase;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-size: cover;

background-position: center;

}

.notfound h2 {

font-family: ‘Titillium Web’, sans-serif;

font-size: 26px;

font-weight: 700;

margin: 0;

}

.notfound p {

font-family: ‘Montserrat’, sans-serif;

font-size: 14px;

font-weight: 500;

margin-bottom: 0px;

text-transform: uppercase;

}

.notfound a {

font-family: ‘Titillium Web’, sans-serif;

display: inline-block;

text-transform: uppercase;

color: #fff;

text-decoration: none;

border: none;

background: #5c91fe;

padding: 10px 40px;

font-size: 14px;

font-weight: 700;

border-radius: 1px;

margin-top: 15px;

-webkit-transition: 0.2s all;

transition: 0.2s all;

}

.notfound a:hover {

opacity: 0.8;

}

@media only screen and (max-width: 767px) {

.notfound .notfound-404 {

height: 110px;

line-height: 110px;

}

.notfound .notfound-404 h1 {

font-size: 120px;

}

}

</style>

</head>

<body>

404

<h2>Oops! This Page Could Not Be Found</h2>

<p>Sorry but the page you are looking for does not exis$

<a href=”/”>Go To Homepage</a>

</div>

</div>

</body>

</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s