Stylish 404 page for blogger with search

Hi, many of yours ask me "Bro how can I make an error page like sayem tutorial". So in this tutorial, I will give you a stylish 404 CSS and HTML. So let's tell you whats is do a 404 page. when anyone enter the wrong URL with your blog URL then the person sees a page it's called 404 error page see a demo at https://www.sayemtutorial.com/404
To add the 404 error page you need CSS and HTML of 404 error page.

CSS

.custom-error{margin:0 auto;padding:8em 0;line-height:1.7;max-width:970px;text-align:center}.custom-error i{font-size:10em;margin-bottom:50px}.custom-error h2{font-size:2em;font-weight:500;margin:0 0 20px 0}.custom-error a{color:#000;padding:3px 6px;transition:initial}.custom-error a:hover{background:#f24a4a;color:#fff}.errorpage-search{margin:20px 0 20px 0}.errorpage-search input.search-field{background:#f3f6f7;margin:20px auto;width:50%;border:0;padding:16px 18px}.errorpage-search input.search-field.submit404{background:#f24a4a;padding:16px 18px;margin:0 auto 20px auto}#gravityfeatured{margin:40px auto}.gravityfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px}.gravfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%;margin:0 20px 0 0}.gravfeatureditem:last-child{margin:0}.gravfeatureditem .gracontent{background:rgba(0,0,0,0.6);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%);display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,0);opacity:1;visibility:visible}.gravfeatureditem .gracontent h3{font-size:14px;color:#fff;padding:30px 10px;margin:0;text-align:center}.gravfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%}.gravfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;overflow:hidden;vertical-align:bottom;z-index:5;height:100%;padding:0;margin:auto;transition:all .3s}
@media screen and (max-width:826px){.custom-error{padding:8em 2em}.gravfeatureditem{width:50%;margin:0 10px}.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}@media screen and (max-width:641px){.gravfeatureditem{width:100%;margin:0}.gravfeatureditem.second,.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}

HTML

<div class='custom-error'>
<h2>Page Not found</h2>
<p>The page you are looking for no longer exists. Perhaps you can return back to the site's <a href='https://sayemtutorial.com'>homepage</a> and see if you can find what you are looking for. Or, you can try finding it by using the search form below.</p>
<form action='/search' class='errorpage-search' style='display: block;'>
<input class='search-field' name='q' oninput='setCustomValidity(&#39;&#39;)' oninvalid='this.setCustomValidity(&#39;Please fill out this field&#39;)' placeholder='Search this blog...' required='' type='text'/><br/>
<input name='max-results' type='hidden' value='8'/>
<input class='search-field submit404' name='submit' type='submit'/>
</form>

I hope you enjoy this article then please give your opinion on the comment box or join sayemtutorial.com to get the latest blogger widget😋.