{"id":19733115,"url":"https://github.com/gustavoestevesr/lp-stranger-things-stepper-form-angular","last_synced_at":"2026-04-12T02:35:33.152Z","repository":{"id":242773849,"uuid":"809024363","full_name":"gustavoestevesr/lp-stranger-things-stepper-form-angular","owner":"gustavoestevesr","description":"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.","archived":false,"fork":false,"pushed_at":"2024-06-06T11:04:47.000Z","size":15697,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-10T18:18:14.515Z","etag":null,"topics":["angular","animation-css","components","dark-mode","data-binding","defer","html","lazy-loading","ngoptimizedimage","scss","typescript"],"latest_commit_sha":null,"homepage":"https://lp-stranger-things-stepper-form-angular.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gustavoestevesr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-01T13:21:17.000Z","updated_at":"2024-06-06T11:04:51.000Z","dependencies_parsed_at":"2024-11-12T00:40:02.282Z","dependency_job_id":null,"html_url":"https://github.com/gustavoestevesr/lp-stranger-things-stepper-form-angular","commit_stats":null,"previous_names":["gustavoestevesr/lp-stranger-things-stepper-form-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gustavoestevesr%2Flp-stranger-things-stepper-form-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gustavoestevesr%2Flp-stranger-things-stepper-form-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gustavoestevesr%2Flp-stranger-things-stepper-form-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gustavoestevesr%2Flp-stranger-things-stepper-form-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gustavoestevesr","download_url":"https://codeload.github.com/gustavoestevesr/lp-stranger-things-stepper-form-angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241058592,"owners_count":19902214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","animation-css","components","dark-mode","data-binding","defer","html","lazy-loading","ngoptimizedimage","scss","typescript"],"created_at":"2024-11-12T00:29:13.959Z","updated_at":"2026-04-12T02:35:28.123Z","avatar_url":"https://github.com/gustavoestevesr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg width=\"300\" src=\"https://micheleambrosio.github.io/semana-frontend-mundo-invertido/assets/images/banner/logo.svg\"\u003e\n\u003c/p\u003e\n\n-------\nUma 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)? \n\n## ▶️ Semana Front-end\n- [Live Dia 01](https://www.youtube.com/watch?v=FZgIQUDn8zo)\n- [Live Dia 02](https://www.youtube.com/watch?v=WHbhgxJLbN4)\n## 💻 Tecnologias\n- HTML\n- CSS\n- JavaScript\n\n## 💬 Assuntos abordados\n- HTML\n    - Estruturação da página \n    - Semântica\n    - Acessibilidade\n    - Web Scraping\n    - SEO\n- CSS\n    - Posicionamentos\n    - Pseudo-elementos\n    - Pseudo-classes\n    - Flexbox\n    - Animações \n- JavaScript\n    - Introdução ao JavaScript\n    - Manipulação do DOM\n    - Introdução ao Firebase\n    - Integração com o Firebase\n\n## 🎨 Variáveis do Tema CSS\n```css\n/*** VARIABLES \u0026 THEMES ***/\n\n:root {\n  --primary-color: #cf0f0f;\n  --primary-color-contrast: #ffffff;\n  --field-background-color: #000;\n}\n\n.light-theme {\n  --page-background: linear-gradient(\n    180deg,\n    #ffffff 0%,\n    #ffffff 65%,\n    rgba(255, 255, 255, 0.75) 100%\n  );\n  --header-background-color: #e3e3e3;\n  --highlight-color: #000000;\n  --featured-font-family: \"Archivo\", sans-serif;\n  --character-top-image-src: url(\"../images/characters/kids-on-the-bike.svg\");\n  --character-top-image-color: #ffffff;\n  --character-bottom-image-src: url(\"../images/characters/inverted-world-monster.svg\");\n  --character-bottom-image-color: #e5e5e5;\n  --background-lamp-image: url(\"../images/backgrounds/lamps.png\");\n  --footer-background-color: #b5bbbf;\n}\n\n.dark-theme {\n  --page-background: linear-gradient(\n    180deg,\n    #050000 0%,\n    #130404 65%,\n    rgba(19, 1, 1, 0.75) 100%\n  );\n  --header-background-color: #220f0f;\n  --highlight-color: #ffffff;\n  --featured-font-family: \"Rubik Glitch\", sans-serif;\n  --character-bottom-image-src: url(\"../images/characters/kids-on-the-bike.svg\");\n  --character-bottom-image-color: rgba(255, 255, 255, 0.1);\n  --character-top-image-src: url(\"../images/characters/inverted-world-monster.svg\");\n  --character-top-image-color: #000;\n  --background-lamp-image: url(\"../images/backgrounds/lamps-inverted.png\");\n  --footer-background-color: #000;\n}\n```\n## 🔗 Links auxiliares\n\n- [W3C - World Wide Web Consortium](http://w3c.org)\n- [WAI - Web Acessibility Initiative](https://www.w3.org/WAI/)\n- [WCAG 2](https://www.w3.org/WAI/WCAG21/quickref/) \n- [Figma](https://www.figma.com/file/I3Q42CcVUziRN3iMfTrbfb/Stranger-Things?node-id=0%3A1) \n- [Demo](https://lp-stranger-things-stepper-form-angular.vercel.app/) \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgustavoestevesr%2Flp-stranger-things-stepper-form-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgustavoestevesr%2Flp-stranger-things-stepper-form-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgustavoestevesr%2Flp-stranger-things-stepper-form-angular/lists"}