"Error page 404 page"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="error_section">
<p class="error_section_subtitle">Opps Page is not available !</p>
<h1 class="error_title">
<p>404</p>
404
</h1>
<a href="#" class="btn">Back to home</a>
</section>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
body {
font-weight: 600;
color: #343434;
}
.error_section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background-image: linear-gradient(-225deg, #1A1A1A, #343434);
}
.error_section_subtitle {
color: #25F193;
text-transform: uppercase;
letter-spacing: 5pt;
font-weight: 500;
font-size: 0.8rem;
margin-bottom: -5em;
}
.error_section .error_title {
--x-shadow: 0;
--y-shadow: 0;
--x:50%;
--y:50%;
font-size: 15rem;
transition: all 0.2s ease;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const title = document.querySelector('.error_title')
//////// Light //////////
document.onmousemove = function(e) {
let x = e.pageX - window.innerWidth/2;
let y = e.pageY - window.innerHeight/2;
title.style.setProperty('--x', x + 'px')
title.style.setProperty('--y', y + 'px')
}
////////////// Shadow ///////////////////
title.onmousemove = function(e) {
let x = e.pageX - window.innerWidth/2;
let y = e.pageY - window.innerHeight/2;
let rad = Math.atan2(y, x).toFixed(2);
let length = Math.round(Math.sqrt((Math.pow(x,2))+(Math.pow(y,2)))/10);
let x_shadow = Math.round(length * Math.cos(rad));
let y_shadow = Math.round(length * Math.sin(rad));
title.style.setProperty('--x-shadow', - x_shadow + 'px')
title.style.setProperty('--y-shadow', - y_shadow + 'px')
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: