How to Design Responsive 404 Error Page in only 5 minutes
Hello guys, Planics Devloper is
providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then
copy code from our post otherwise watch our video on blog.
If you want to design card hover or
something then click here and get latest design
free Click here
How to design Best product card hoverin 2020?
design beautiful card hover amination using html and CSS . you learn in this video how to flip card using html and CSS.
How to design different type of
animation in one loader using html and css?
Free Cards Effect in HTML with CSS
skill card using html and CSS. You can
free use for as product card or review Card.
mouse hover flip animation on card using pure html and CSS. Here we show how to transform
any object using only CSS.
Here we show, how to design Responsive
404 Error page in only 5 minutes.
404.html
|
<!DOCTYPE html>
<html>
<head>
<meta
charset='utf-8'>
<meta
http-equiv='X-UA-Compatible' content='IE=edge'>
<title>404
page not found</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body>
<header
class="text-gray-700 body-font">
<div
class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row
items-center">
<a
class="flex title-font font-medium items-center text-gray-900 mb-4
md:mb-0">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none"
stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-10
h-10 text-white p-2 bg-red-500 rounded-full" viewBox="0 0 24
24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5
10-5"></path>
</svg>
<span
class="ml-3 text-xl">Planics dev</span>
</a>
<nav
class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base
justify-center">
<a
class="mr-5 hover:text-gray-900">home</a>
<a
class="mr-5 hover:text-gray-900">service</a>
<a
class="mr-5 hover:text-gray-900">about</a>
<a
class="mr-5 hover:text-gray-900">more</a>
</nav>
<button
class="inline-flex items-center bg-gray-200 border-0 py-1 px-3
focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">Go
to home
<svg
fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0
24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>
<section
class="text-gray-700 body-font">
<div
class="container mx-auto flex px-5 py-24 items-center justify-center
flex-col">
<img
class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center
rounded" alt="hero"
src="images/undraw_page_not_found_su7k.svg">
<div
class="text-center lg:w-2/3 w-full">
<h1
class="title-font sm:text-4xl text-3xl mb-4 font-medium
text-gray-900">404 "page not found" ERROR</h1>
<p
class="mb-8 leading-relaxed">A 404 error is often returned when
pages have been moved or deleted. ... 404 errors should not be confused with
DNS errors, which appear when the given URL refers to a server name that does
not exist. A 404 error indicates that the server itself was found, but that
the server was not able to retrieve the requested page.</p>
<div
class="flex justify-center">
<button class="inline-flex text-white bg-red-500 border-0 py-2
px-6 focus:outline-none hover:bg-red-600 rounded text-lg">Go to
home</button>
<button class="ml-4 inline-flex text-gray-700 bg-gray-200
border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded
text-lg">More</button>
</div>
</div>
</div>
</section>
</body>
</html>
|
0 coment�rios: