Página com theme switcher utilizando HTML, CSS e JavaScript, além de integrar um formulário de inscrição com um banco de dados Firebase.

  • By DIO
  • Last update: Nov 18, 2022
  • Comments: 2


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

💻 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

/*** 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

🌎 Nossas redes sociais

   Diogo Medeiros Mainardes
   Instagram | GitHub | LinkedIn | Twitch



   Michele Queiroz Ambrosio
   Instagram | GitHub | LinkedIn | Twitch



   Renan Johannsen de Paula
   GitHub |  LinkedIn

Github

https://github.com/digitalinnovationone/semana-frontend-mundo-invertido

Comments(2)

  • 1

    Arquivo svg

    Olá! Os arquivos svg (do monstro e das crianças na bicicleta), que aparecem embaixo do botão ''inverter mundos'', não estão mais aparecendo no site(estavam até ontem). Já substitui meus códigos pelos de vocês, mas não solucionou o problema.

    O que poderia ser? Obrigada!

  • 2

    Mundo invertido

    Boa noite!

    Vocês irão disponibilizar o código para inverter as divs do mundo invertido? Achei que era na live de JavaScript, mas não foi... é na 3?

    Obrigada!