How to display a 404 or error page using CSS, HTML and JavaScript.

Create 404 pages in 1 minute.

It doesn't require much customization so I've provided the source code below without any explanation. Take the source code from below and place an image and email address. Therefore, a wrong address page of a website will be created.

Source Code:

              <body>
        <div class="container">
     <img class="img" src="/404/error.png"></img><br/>
            <h1>Not found <span>:(</span></h1>
            <p>Sorry, but the page you were trying to view does not exist.</p>
            <p>It looks like this was the result of either:</p>
            <ul>
                <li>a mistyped address</li>
                <li>an out-of-date link</li>
                <li>internet connection lose</li>
                <li>browser access lose </li>
            </ul>
            <button onclick="/" type="button"> Home </button>
            <button onclick="/contact.html" type="button">Contact </button>
            <button onclick="mailto:cs.jubayer@gmail.com" type="button" role="go">Email </button>
            <script>
                var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host;
            </script>
            <script src="//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
        </div>
    </body>
        <style>
            ::-moz-selection {
                background: #b3d4fc;
                text-shadow: none;
            }

            ::selection {
                background: #b3d4fc;
                text-shadow: none;
            }

            html {
                padding: 30px 10px;
                font-size: 20px;
                line-height: 1.4;
                color: #737373;
                background: #f0f0f0;
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
            }

            html,
            input {
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            }

            body {
                max-width: 500px;
                _width: 500px;
                padding: 30px 20px 50px;
                border: 1px solid #b3b3b3;
                border-radius: 4px;
                margin: 0 auto;
                box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
                background: #fcfcfc;
            }

            h1 {
                margin: 0 10px;
                font-size: 50px;
                text-align: center;
            }

            h1 span {
                color: #bbb;
            }

            h3 {
                margin: 1.5em 0 0.5em;
            }

            p {
                margin: 1em 0;
            }

            ul {
                padding: 0 0 0 40px;
                margin: 1em 0;
            }

            .container {
                max-width: 380px;
                _width: 380px;
                margin: 0 auto;
            }
            container img {
              text-align:center;
              justify-content:center;
              position:relative;
            }

            /* google search */

            #goog-fixurl ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            #goog-fixurl form {
                margin: 0;
            }

            #goog-wm-qt,
            #goog-wm-sb {
                border: 1px solid #bbb;
                font-size: 16px;
                line-height: normal;
                vertical-align: top;
                color: #444;
                border-radius: 2px;
            }

            #goog-wm-qt {
                width: 220px;
                height: 20px;
                padding: 5px;
                margin: 5px 10px 0 0;
                box-shadow: inset 0 1px 1px #ccc;
            }

            #goog-wm-sb {
                display: inline-block;
                height: 32px;
                padding: 0 10px;
                margin: 5px 0 0;
                white-space: nowrap;
                cursor: pointer;
                background-color: #f5f5f5;
                background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1);
                background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1);
                background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1);
                background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1);
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                *overflow: visible;
                *display: inline;
                *zoom: 1;
            }

            #goog-wm-sb:hover,
            #goog-wm-sb:focus {
                border-color: #aaa;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
                background-color: #f8f8f8;
            }

            #goog-wm-qt:hover,
            #goog-wm-qt:focus {
                border-color: #105cb6;
                outline: 0;
                color: #222;
            }

            input::-moz-focus-inner {
                padding: 0;
                border: 0;
            }
            button {
             background:linear-gradient(290deg,hotpink,gold,greenyellow,skyblue,white);

  color: blue;
  font-weight:800;
  border: 1px solid blue;
  padding: 5px;
  height: 50px;
  width: 70px;
  margin: 0 2px;
  border-radius: 5px;
  cursor:pointer;
  text-transform: uppercase;
}
            button:hover {
             text-transform:lowercase;
             color:darkgrey;
        }

        </style>

Result:

My Talk:

Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!

Popular Posts

How to display a 404 or error page using CSS, HTML and JavaScript.

How to display a 404 or error page using CSS, HTML and JavaScript.

My Talk:

Posted by Priyo Event

Post a Comment

0 Comments

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form

Popular Posts

How to display a 404 or error page using CSS, HTML and JavaScript.

How to display a 404 or error page using CSS, HTML and JavaScript.

My Talk:

Posted by Priyo Event

You may like these posts

Post a Comment

0 Comments

Social Plugin

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form