public/404.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
box-sizing: border-box;
background: #F8F8F8;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-width: 320px;
min-height: 400px;
}
.container__page-error {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.page-error__img {
position: absolute;
width: 60px;
height: 60px;
}
.page-error__text {
text-align: center;
}
.page-error__title {
font-size: 16em;
color: #00B285;
}
.page-error__about {
font-size: 2em;
color: #777;
}
.page-error__links {
margin: 10px 0 0 0;
color: #777;
}
.page-error__link {
text-decoration: none;
color: #00B285;
}
.page-error__link:hover {
color: #008E68;
}
@media (min-width: 0px) and (max-width: 320px) {
.container {
width: 320px;
}
.page-error__img {
width: 30px;
height: 30px;
}
.page-error__title {
font-size: 8em;
}
.page-error__about {
font-size: 1em;
}
}
@media (min-width: 320px) and (max-width: 760px) {
.container {
width: 100%;
}
.page-error__img {
width: 40px;
height: 40px;
}
.page-error__title {
font-size: 8em;
}
.page-error__about {
font-size: 1em;
}
}
</style>
<title>404</title>
</head>
<body>
<div class="container">
<div class="container__page-error">
<div class="page-error__logo">
<img src="logo.png" alt="" class="page-error__img" />
</div>
<div class="page-error__text">
<div class="page-error__title">
404
</div>
<div class="page-error__about">
Запрашиваемая страница не существует.
</div>
<div class="page-error__links">
Вы можете вернуться на <a href="/" class="page-error__link">главную</a> страницу,
<a href="/users/sign_in" class="page-error__link">войти</a> или
<a href="/users/sign_up" class="page-error__link">зарегистрироваться</a>.
</div>
</div>
</div>
</div>
</body>
</html>