Ошибка 404 на bootstrap

<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 ———->

<div class=»error-content»>
<div class=»container»>
<div class=»row»>
<div class=»col-md-12 «>
<div class=»error-text»>
<h1 class=»error»>404 Error</h1>
<div class=»im-sheep»>
<div class=»top»>
<div class=»body»></div>
<div class=»head»>
<div class=»im-eye one»></div>
<div class=»im-eye two»></div>
<div class=»im-ear one»></div>
<div class=»im-ear two»></div>
</div>
</div>
<div class=»im-legs»>
<div class=»im-leg»></div>
<div class=»im-leg»></div>
<div class=»im-leg»></div>
<div class=»im-leg»></div>
</div>
</div>
<h4>Oops! This page Could Not Be Found!</h4>
<p>Sorry bit the page you are looking for does not exist, have been removed or name changed.</p>
<a href=»<?=base_url()?>» class=»btn btn-primary btn-round»>Go to homepage</a>
</div>
</div>
</div>
</div>
</div>

h4{
color: #253858;
margin-bottom: .8rem;
position: relative;
font-family: ‘Raleway’, sans-serif;
font-size: 1.5rem;
}
p{
margin-top: 0;
margin-bottom: 1rem;
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
color: rgb(113, 120, 126);
font-family: ‘Lato’, sans-serif;
}
.btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn-primary {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn-round {
border-radius: 30px !important;
text-decoration: none;
}

.btn {
font-size: 15px;
font-weight: 600;
padding: 9px 25px;
border-width: 2px;
box-shadow: 0 3px 8px 0 rgba(41,49,89,.15), inset 0 0 0 1px hsla(0,0%,100%,.1);
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
/*[404 error page]
—————————*/
.error-content {
padding: 0 0 70px;
}
.error-text{
text-align: center;
}
.error {
font-size: 180px;
font-weight: 100;
}
@keyframes bob {
0% {
top: 0;
}
50% {
top: 0.2em;
}
}
.im-sheep {
display: inline-block;
position: relative;
font-size: 1em;
margin-bottom: 70px;
}
.im-sheep * {
transition: transform 0.3s;
}
.im-sheep .top {
position: relative;
top: 0;
animation: bob 1s infinite;
}
.im-sheep:hover .head {
transform: rotate(0deg);
}
.im-sheep:hover .head .im-eye {
width: 1.25em;
height: 1.25em;
}
.im-sheep:hover .head .im-eye:before {
right: 30%;
}
.im-sheep:hover .top {
animation-play-state: paused;
}
.im-sheep .head {
display: inline-block;
width: 5em;
height: 5em;
border-radius: 100%;
background: #253858;
vertical-align: middle;
position: relative;
top: 1em;
transform: rotate(30deg);
}
.im-sheep .head:before {
content: »;
display: inline-block;
width: 80%;
height: 50%;
background: #253858;
position: absolute;
bottom: 0;
right: -10%;
border-radius: 50% 40%;
}
.im-sheep .head:hover .im-ear.one, .im-sheep .head:hover .im-ear.two {
transform: rotate(0deg);
}
.im-sheep .head .im-eye {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 100%;
background: white;
position: absolute;
overflow: hidden;
}
.im-sheep .head .im-eye:before {
content: »;
display: inline-block;
background: black;
width: 50%;
height: 50%;
border-radius: 100%;
position: absolute;
right: 10%;
bottom: 10%;
transition: all 0.3s;
}
.im-sheep .head .im-eye.one {
right: -2%;
top: 1.7em;
}
.im-sheep .head .im-eye.two {
right: 2.5em;
top: 1.7em;
}
.im-sheep .head .im-ear {
background: #253858;
width: 50%;
height: 30%;
border-radius: 100%;
position: absolute;
}
.im-sheep .head .im-ear.one {
left: -10%;
top: 5%;
transform: rotate(-30deg);
}
.im-sheep .head .im-ear.two {
top: 2%;
right: -5%;
transform: rotate(20deg);
}
.im-sheep .body {
display: inline-block;
width: 7em;
height: 7em;
border-radius: 100%;
background: #0054D1;
position: relative;
vertical-align: middle;
margin-right: -3em;
}
.im-sheep .im-legs {
display: inline-block;
position: absolute;
top: 80%;
left: 10%;
z-index: -1;
}
.im-sheep .im-legs .im-leg {
display: inline-block;
background: #141214;
width: 0.5em;
height: 2.5em;
margin: 0.2em;
}
.im-sheep::before {
left: 0;
content: »;
display: inline-block;
position: absolute;
top: 112%;
width: 100%;
height: 18%;
border-radius: 100%;
background: rgba(0, 0, 0, 0.2);
}

404 Error Page Design | HTML, CSS And Bootstrap

A very important and useful page for every website will show when there is no page available with a link. Almost every website uses this page because it provides a good website experience to users. There are many types of 404 or page not found designs available but in this design, we going to keep it very simple and easy to design. Very small code of HTML, CSS, and bootstrap are used to develop this page interface.

This page interface is divided into two parts, one for the image and the other for the buttons and text headings. We’ve kept it very simple, half the screen is used for image placement and half is used for the main title controls and useful buttons. This design is responsive by default because here bootstrap gives that support, we are not using any extra css to make it responsive.

This website contains various web development content if you want to learn more about user interfacing designing articles visit the below link. Also, check out a playlist of bootstrap base web page interface designs.

<!DOCTYPE html>
<html>
  <head>
    <title>404 Error Page Design | Rustcode</title>
  </head>
  <body>
   // html code 
</body>
</html>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!DOCTYPE html>
<html>
<head>
    <title>404 Error Page Design | Rustcode</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
</head>

<body>
  // html code
</body>
</html>

<body>
   <div class="container-fluid">
      <div class="row d-flex justify-content-center align-items-center height-vh">
         <div class="col-lg-6 col-12">
            <div class="col-md-12">
               <img src="image.png" width="100%">
            </div>
         </div>
         <div class="col-lg-6 col-12">
            <div class="col-12 d-flex flex-column justify-content-center align-items-center">
               <h1 class="main-heading">404</h1>
               <h2>we couldn't find this page.</h2>
               <div class="text-center mt-4 mb-5">
                  <button class="btn btn-success px-3 mr-2"><i class="fa fa-home"></i> Home</button>
                  <button class="btn btn-success px-3 mr-2"><i class="fa fa-phone"></i> Contact</button>
                  <button class="btn btn-success px-3 mr-2"><i class="fa fa-info"></i> Report</button>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

Output:

This code is not ready yet only html is done because the default design of Bootstrap is working. We will add our css in next step. You can download image from this link.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

body{
  height: 100vh;
  font-family: "Poppins", sans-serif;
  background: black !important;
  color: white !important;
  font-weight: 900 !important;
}

.height-vh{
  height: 100vh;
}

.main-heading{
  font-size: 220px;
  font-weight: 700;
}

.fa{
  font-size: 20px !important;
  padding: 5px;
}

.btn{
  color: white !important;
  font-weight: 600 !important;
  border: 1px solid white !important;
  background: transparent !important;
  border-radius: 0px !important;
}

.btn:hover{
  color: black !important;
  background: #fff !important;
}

• RELATED POSTS:
• 01. Profile Card Skeleton Screen | HTML, CSS And Bootstrap
• 02. Weather Report Card Design | HTML, CSS And Bootstrap

Single 404 error page design usign bootstrap 4. 404 error page nice design. you can just copy past in your website project. this is sample of 404 page not found error page design. simple 404 page design usign html,css and bootstrap.

We allows to free snippets of bootstrap 404 page , you can download full code of bootstrap 4 error page layout. Here in this post i will give you example of bootstrap unauthorized page snippet and you will get simple code of html, css and jquery. In bootstrap 403 page template snippet i give you three tab with html, css and js, you can easily get code of 404 error page html code layout.

How can we create a custom error 404 page using HTML CSS & JS? Solution: Check out this custom Error 404 Page With Counting Numbers Using CSS Bootstrap.

Previously I have shared an Animated Error 404 Page Design With Particle JS, But this one is with counting numbers effect. Basically, 404 is error message for page not found in Hypertext Transfer Protocol standard response code. When anyone clicks on a broken link on the webpage, then the page appears.

Today you will learn to create a 404 page design with counting numbers effect. There is an animated counting numbers effect in the 404 code, and also a massage page not found in the downside. Also, there is a double-side slant section outside the zero of 404, that creates the design more attractive.

So, Today I am sharing Custom Error 404 Page With Counting Numbers Using CSS Bootstrap. This is a responsive design means it will fit on every screen size. And there is a counting number effect which is powered by pure JavaScript, there is not any library. I think this program or design will be very useful for your website or any other project.

If you are thinking now how this 404 page actually is, then see the preview given below.

Preview Of Page Not Found Design

See this video preview to getting an idea of how this error page looks like.

Live Demo

Now you can see this visually, You also can see it live by pressing the button above. If you like this, then get the source code of its.

You May Also Like:

• Random Password Generator
• First and Last Word Selector
• CSS Blend Modes Change
• Animated Scrolling Images

Custom Error 404 Page With Counting Numbers Effect Source Code

Before sharing source code, let’s talk about it. First I have created 3 HTML span inside divs and put two class names. After that, I have put a page not found message in heading tag. Also, there are many more divs or sections for multiple purposes like shadow, outside circle, etc.

Using CSS I have done many works, like place elements on the right place, styling all content, etc. There I have created a slant section outside of the middle number which is zero, you can see in the preview at actual things what I am talking about. As you know this is also a responsive design, I have used CSS @keyframe property to creating it responsive.

Now using JavaScript I have created the counting numbers effect. For counting effect used JavaScript for loop
for() command (info). All other left things you will understand after getting the code, I can’t explain all in writing. For creating this you have to create 3 files. First for HTML, second of CSS and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Custom Error 404 Page With Counting Numbers Using CSS Bootstrap. If you have any doubt or question then comment down below.