-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #12 from vanribeiro/dev
feat: add a 404.html page
- Loading branch information
Showing
2 changed files
with
165 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&family=Style+Script&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="./assets/style/commons/reset.css"> | ||
| <link rel="stylesheet" href="./assets/style/app.css"> | ||
| <link rel="stylesheet" href="./assets/style/pages/404.css"> | ||
| <title>404 - Página não encontrada</title> | ||
| </head> | ||
| <body> | ||
| <header class="header-page header-page--not-found"> | ||
| <div class="header-page__container header-page__container--mobile this-container "> | ||
| <div class="header-page__menu-icon__container"> | ||
| <i class="humburger__icon icons"></i> | ||
| </div> | ||
| <nav class="header-page__menu"> | ||
| <ul class="header-page__list"> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
| <main class="not-found"> | ||
| <div class="this-container"> | ||
| <section class="not-found__section"> | ||
| <div class="not-found__section__main"> | ||
| <article class="not-found__section__content"> | ||
| <header class="not-found__section__content__header"> | ||
| <h1 class="not-found__section__content__title">404</h1> | ||
| <h2 class="not-found__section__content__subtitle">página não encontrada</h2> | ||
| </header> | ||
| <div class="not-found__section__content__cta"> | ||
| <a class="button button--outlined" href="/"> | ||
| voltar para a home | ||
| </a> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </main> | ||
| <footer class="footer footer--not-found"></footer> | ||
| <nav class="menu-mobile" style="display: none"> | ||
| <div class="menu-mobile__close-button-container this-container"> | ||
| <span class="menu-mobile__close-button"> | ||
| × | ||
| </span> | ||
| </div> | ||
| <div class="menu-mobile__container this-container"></div> | ||
| </nav> | ||
| <script type="module" src="./js/index.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| @import url('./../commons/variables.css'); | ||
| @import url('./../components/button.css'); | ||
|
|
||
| .not-found{ | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .header-page--not-found .header-page__container{ | ||
| display: flex; | ||
| align-items: center; | ||
| border: 0; | ||
| } | ||
|
|
||
| .not-found__section__content__header{ | ||
| text-align: center; | ||
| } | ||
|
|
||
| .not-found__section__content__title{ | ||
| font-family: var(--home-font-title); | ||
| font-size: 6rem; | ||
| font-weight: 700; | ||
| color: var(--title-color); | ||
| } | ||
|
|
||
| .not-found__section__content__subtitle{ | ||
| font-family: var(--home-font-subtitle); | ||
| font-size: 2.3rem; | ||
| color: var(--subtitle-color); | ||
| letter-spacing: 0.1rem; | ||
| } | ||
|
|
||
| .not-found__section__content__cta{ | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-top: 24px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| @media screen and (max-width: 540px) { | ||
| .not-found__section__content__title{ | ||
| font-size: 5rem; | ||
| } | ||
|
|
||
| .not-found__section__content__subtitle{ | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| .header-page--not-found .header-page__container{ | ||
| justify-content: flex-end; | ||
| } | ||
|
|
||
| .header-page--not-found .header-page__menu{ | ||
| width: 100%; | ||
| justify-content: center; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (min-width: 541px) { | ||
|
|
||
| .header-page--not-found .header-page__container{ | ||
| justify-content: flex-end; | ||
| } | ||
|
|
||
| .header-page--not-found .header-page__list{ | ||
| align-items: center; | ||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
| @media screen and (max-width: 743px) { | ||
| .not-found{ | ||
| height: calc(100vh - 160px); | ||
| } | ||
| } | ||
|
|
||
| @media screen and (min-width: 744px) { | ||
|
|
||
| .not-found{ | ||
| height: calc(100vh - 160px); | ||
| } | ||
|
|
||
|
|
||
| .header-page--not-found .header-page__menu{ | ||
| width: 100%; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .header-page--not-found .header-page__list{ | ||
| width: 20%; | ||
| justify-content: space-around; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| @media screen and (min-width: 1200px) { | ||
|
|
||
| body{ | ||
| overflow-y: hidden; | ||
| } | ||
|
|
||
| .not-found{ | ||
| height: calc(100vh - 175px); | ||
| } | ||
|
|
||
| } |