"404 Error page"
Bootstrap 4.1.1 Snippet by Reason706

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
<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 ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<div class="container error-container">
<div class="row d-flex align-items-center justify-content-center">
<div class="col-md-12 text-center">
<h1 class="big-text">Oops!</h1>
<h2 class="small-text">404 - PAGE NOT FOUND</h2>
</div>
<div class="col-md-6 text-center">
<p>The page you are looking for might have been removed had its name changed or is temporarily unavailable.</p>
<form class="example" action="action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search.." name="search">
<button class="search-btn" type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
<h2 class="small-text">OR</h2>
<a href="# " class="button button-dark-blue iq-mt-15 text-center">GOTO HOME PAGE</a>
</div>
</div>
</div>
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
body{
background: #fff;
}
.error-container {
height: 100vh !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: montserrat, sans-serif;
}
.big-text {
font-size: 200px;
font-weight: 900;
font-family: sans-serif;
background: url(https://cdn.pixabay.com/photo/2018/05/30/15/39/thunderstorm-3441687_960_720.jpg) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
background-position: center;
}
.small-text {
font-family: montserrat, sans-serif;
color: rgb(0, 0, 0);
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
}
/* Style the search field */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: