Styled 404 error page example

	<?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(); ?>

view raw 404.php hosted with ❤ by GitHub

	/*=====================================
	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;
	}
	}

view raw error-404.css hosted with ❤ by GitHub

Widget CSS for WordPress

	/*=====================================
	Widget CSS
	=======================================*/
	.widget-area ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	.widget-area .widget {
	border: 1px solid #f1f2f7;
	margin-bottom: 40px;
	border-radius: 5px;
	padding: 0px 5px;
	}
	.widget-area h2 {
	font-size: 20px;
	background: #fff;
	padding: 7px 5px;
	margin: 0;
	}
	.widget-area a {
	font-size: 16px;
	color: #212327;
	font-weight: 600;
	}
	.widget-area li {
	padding: 5px 7px;
	border-bottom: 1px solid #e8e8f0;
	}
	.widget-area li:last-of-type {
	border: 0;
	}
	.widget h2 {
	font-size: 20px;
	color: #555;
	font-weight: 700;
	}
	.widget select {
	width: 100%;
	}
	.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 2;
	}
	.widget a {
	color: #555;
	}
	.widget {
	margin-bottom: 50px;
	}
	.widget_calendar,
	.widget_tag_cloud,
	.widget_search {
	border: 0px!important;
	}
	.widget ul ul {
	padding-left: 10px;
	}
	.widget ul ul ul {
	padding-left: 5px;
	}
	.widget table {
	width: 100%;
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}
	.widget table th,
	.widget table td {
	padding: 5px;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}
	.widget table th {
	background: #ddd;
	}
	.widget.widget_rss li {
	margin-bottom: 30px;
	}
	.widget.widget_rss .rssSummary {
	font-size: 95%;
	padding-top: 10px;
	}
	.widget.widget_rss cite {
	padding-top: 10px;
	display: inline-block;
	font-weight: 700;
	}
	.widget.widget_rss .rsswidget {
	font-size: 110%;
	}
	.widget.widget_rss .rss-date {
	font-size: 80%;
	}
	.widget a:hover {
	color: #000;
	}

view raw widget-css-for-wp.css hosted with ❤ by GitHub