Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 16, 2021 05:32 am GMT

Animated 404 Page

First we need to know what is 404 Page ?

The HTTP 404, 404 Not Found, 404, 404 Error, Page Not Found or File Not Found error message is a Hypertext Transfer Protocol standard response code, in computer network communications, to indicate that the browser was able to communicate with a given server, but the server could not find what was requested.

Now! we will make a 404 page .

Html Code :-

<section class="page_404">    <div class="container">        <div class="row">           <div class="col-sm-12 ">        <div class="col-sm-10 col-sm-offset-1  text-center">        <div class="four_zero_four_bg">            <h1 class="text-center ">404</h1>        </div>        <div class="contant_box_404">        <h3 class="h2">        Look like you're lost        </h3>        <p>the page you are looking for not avaible!</p>        <a href="" class="link_404">Go to Home</a>    </div>        </div>        </div>        </div>    </div></section>

After Adding Html It Will Look Like this :-

Alt Text

Now Css Code :-

/*======================    404 page=======================*/.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;}.page_404  img{ width:100%;}.four_zero_four_bg{ background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);    height: 400px;    background-position: center; } .four_zero_four_bg h1{ font-size:80px; }  .four_zero_four_bg h3{             font-size:80px;             }             .link_404{              color: #fff!important;    padding: 10px 20px;    background: #39ac31;    margin: 20px 0;    display: inline-block;}    .contant_box_404{ margin-top:-50px;}

After Adding Html , Css It Will Look Like This .

Alt Text


Original Link: https://dev.to/knolcoder/animated-404-page-2np8

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To