Styled 404 error page example

404.php

<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package WordPress
 * @subpackage MY_Theme
 * @since 1.0
 * @version 1.0
 */
?>

    <?php get_header(); ?>
    <div class="wrap">

        <div class="agileits-main">
            <div class="agileinfo-row">
                <div class="w3layouts-errortext">
                    <h2>4<span>0</span>4!!</h2>
                    <h1>Sorry! The page you were looking for could not be found </h1>
                    <p class="w3lstext">You have been tricked into click on a link that can not be found. Please check the url or go to <a href="<?php echo home_url(); ?>">main page</a> and see if you can locate what you are looking for </p>
                </div>

                <div class="page-content">
                    <?php get_search_form(); ?>
                </div> <!-- .page-content -->
            </div>
        </div>

    </div>

    <?php get_footer(); ?>

error-404.css

/*=====================================
 404 Page CSS
========================================*/

.error404 .site-content {
    background: #000;
    padding-bottom: 64px;
}

.wrap {
    font-family: 'Open Sans', sans-serif;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fbb034;
}

.agileinfo-row {
    width: 65%;
    margin: 0 auto;
    text-align: center;
}

.w3layouts-errortext {
    padding-top: 64px;
    text-align: center;
}

.w3layouts-errortext h1 {
    font-size: 20px;
    color: #fff;
    font-weight: 300;
}

p.w3lstext {
    font-size: 15px;
    color: #fff;
    line-height: 29px;
    font-weight: 400;
    width: 65%;
    text-transform: capitalize;
    margin: 24px auto 40px;
}

p.w3lstext a {
    padding-right: 10px;
}

.w3layouts-errortext span,
p.w3lstext a {
    color: #fbb034;
}

p.w3lstext a:hover {
    color: #ffffff;
}

.w3layouts-errortext h2 {
    font-size: 100px;
    color: #fff;
}

/*=====================================
 404!! responsive-design 
========================================*/

@media(max-width:1366px) {
    p.w3lstext {
        width: 75%;
    }
    .w3layouts-errortext h2 {
        letter-spacing: 10px;
    }
}

@media(max-width:1080px) {
    .agileinfo-row {
        width: 75%;
    }
}

@media(max-width:667px) {
    p.w3lstext {
        width: 100%;
        font-size: 14px;
        line-height: 32px;
    }
    .w3layouts-errortext h2 {
        font-size: 70px;
        color: #fff;
    }
    .w3layouts-errortext {
        padding-top: 32px;
    }
}

@media(max-width:414px) {
    .w3layouts-errortext h2 {
        font-size: 50px;
    }
    .w3layouts-errortext {
        padding-top: 32px;
    }
}

@media(max-width:384px) {
    .agileinfo-row {
        width: 87%;
    }
    .w3layouts-errortext h2 {
        letter-spacing: 10px;
    }
}

@media(max-width:320px) {
    .w3layouts-errortext h2 {
        font-size: 50px;
    }
}