https://github.com/gustavoestevesr/lp-stranger-things-stepper-form-angular
Desenvolvimento de uma landing page temático da série Stranger Things utilizando o Angular .Nesse projeto foi aplicado conceitos avançados de SCSS para design da página. Bem como o toggle do tema light mode e dark mode de toda a página com a semântica da série.
https://github.com/gustavoestevesr/lp-stranger-things-stepper-form-angular
angular animation-css components dark-mode data-binding defer html lazy-loading ngoptimizedimage scss typescript
Last synced: about 2 months ago
JSON representation
Desenvolvimento de uma landing page temático da série Stranger Things utilizando o Angular .Nesse projeto foi aplicado conceitos avançados de SCSS para design da página. Bem como o toggle do tema light mode e dark mode de toda a página com a semântica da série.
- Host: GitHub
- URL: https://github.com/gustavoestevesr/lp-stranger-things-stepper-form-angular
- Owner: gustavoestevesr
- Created: 2024-06-01T13:21:17.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-06T11:04:47.000Z (almost 2 years ago)
- Last Synced: 2025-01-10T18:18:14.515Z (over 1 year ago)
- Topics: angular, animation-css, components, dark-mode, data-binding, defer, html, lazy-loading, ngoptimizedimage, scss, typescript
- Language: TypeScript
- Homepage: https://lp-stranger-things-stepper-form-angular.vercel.app
- Size: 15 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
-------
Uma jornada para quem não tem medo do desconhecido. O caminho para o Mundo Invertido é incerto, repleto de obstáculos e perigos. Porém, a recompensa é grande: salvar Hawkings e o mundo todo das garras de Vecna. Você está preparado(a)?
## ▶️ Semana Front-end
- [Live Dia 01](https://www.youtube.com/watch?v=FZgIQUDn8zo)
- [Live Dia 02](https://www.youtube.com/watch?v=WHbhgxJLbN4)
## 💻 Tecnologias
- HTML
- CSS
- JavaScript
## 💬 Assuntos abordados
- HTML
- Estruturação da página
- Semântica
- Acessibilidade
- Web Scraping
- SEO
- CSS
- Posicionamentos
- Pseudo-elementos
- Pseudo-classes
- Flexbox
- Animações
- JavaScript
- Introdução ao JavaScript
- Manipulação do DOM
- Introdução ao Firebase
- Integração com o Firebase
## 🎨 Variáveis do Tema CSS
```css
/*** VARIABLES & THEMES ***/
:root {
--primary-color: #cf0f0f;
--primary-color-contrast: #ffffff;
--field-background-color: #000;
}
.light-theme {
--page-background: linear-gradient(
180deg,
#ffffff 0%,
#ffffff 65%,
rgba(255, 255, 255, 0.75) 100%
);
--header-background-color: #e3e3e3;
--highlight-color: #000000;
--featured-font-family: "Archivo", sans-serif;
--character-top-image-src: url("../images/characters/kids-on-the-bike.svg");
--character-top-image-color: #ffffff;
--character-bottom-image-src: url("../images/characters/inverted-world-monster.svg");
--character-bottom-image-color: #e5e5e5;
--background-lamp-image: url("../images/backgrounds/lamps.png");
--footer-background-color: #b5bbbf;
}
.dark-theme {
--page-background: linear-gradient(
180deg,
#050000 0%,
#130404 65%,
rgba(19, 1, 1, 0.75) 100%
);
--header-background-color: #220f0f;
--highlight-color: #ffffff;
--featured-font-family: "Rubik Glitch", sans-serif;
--character-bottom-image-src: url("../images/characters/kids-on-the-bike.svg");
--character-bottom-image-color: rgba(255, 255, 255, 0.1);
--character-top-image-src: url("../images/characters/inverted-world-monster.svg");
--character-top-image-color: #000;
--background-lamp-image: url("../images/backgrounds/lamps-inverted.png");
--footer-background-color: #000;
}
```
## 🔗 Links auxiliares
- [W3C - World Wide Web Consortium](http://w3c.org)
- [WAI - Web Acessibility Initiative](https://www.w3.org/WAI/)
- [WCAG 2](https://www.w3.org/WAI/WCAG21/quickref/)
- [Figma](https://www.figma.com/file/I3Q42CcVUziRN3iMfTrbfb/Stranger-Things?node-id=0%3A1)
- [Demo](https://lp-stranger-things-stepper-form-angular.vercel.app/)