Back to menu
Error Pages with Source code - HTML & Bootstrap 0 939
Demo Download

A 404 page is a website landing page that tells your website visitors the page they requested is unavailable or, in some cases, doesn’t exist. Its primary purpose is to inform your users they’ve reached a 404 error. But first, why’s a 404 page so important? If you don’t create a 404 page, your server can’t provide an adequate response for a resource that isn’t found.

Create index.html

                            
                                <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Shangxin | Title</title>
      <link href="../assets/img/favicon.png" rel="icon">
  <link href="../assets/img/apple-touch-icon.png" rel="apple-touch-icon">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    
  </head>
  <body>
    <div class="container">
        <div class="row mt-5">
          <div class="col-md-6 mt-5 p-2">
            <img src="assets/img/image/error.gif" class="error-image" alt="error page">
          </div>
          <div class="col-md-6">
              <span class="text-black error papyrus">400 <strong class="text-danger"> Error!</strong> </span>
              <br>
              <h5 class="text-uppercase mt-4 font-weight-bold text-black">oops ! Page not found </h5>
              <span>Sorry, the page you're looking for doesn't exist. if you think something is broken,report a problem.</span><br>
              <div class="mt-4 text-center">
                <a href="https://www.youtube.com/channel/UCfTb6PYe9RzzyuOXLGa8X1A" target="_blank" class="btn btn-outline-danger border-danger shadow-lg">Report Problem <i class="fas fa-exclamation-triangle"></i> </a>
                <a href="http://www.bimash.com.np" target="_blank" class="btn btn-outline-primary border-primary shadow-lg">Return Home <i class="fas fa-home"></i></a>
              </div>
          </div>
        </div>
        </div>
  </body>
</html>

Create style.css

                            
                                .papyrus{
  font-family: papyrus;
  font-size : 80px;
}

The 404 Not Found error message is an HTTP standard response code indicating your web browser was able to communicate with the website’s server, but the server could not find the resource you requested. Anytime you enter a URL into your browser, the browser makes a request on your behalf.

Demo Download
Share
http://bimash.com.np/SourceCode/Code/error-pages-using-html-and-css

Popular Posts