MATW-Medusa-Myth

MATW se refere a um conjunto de projetos que serão baseados na Mitologia Grega e significa Myths Around The World ( Medusa será a que inaugurará esta coleção!) 🎭📖

Neste projeto falaremos sobre a górgona Medusa e as versões de sua história. Já se perguntou como tudo aconteceu na realidade? Quais as críticas sociais podemos encontrar em seu mito? Acompanhe!

O Projeto - Desktop

• O projeto conta com as linguagens HTML5, CSS6 e JavaScript;
• É possível encontrá-lo em: https://viihneris.github.io/MATW-Medusa-Myth/ (Recomendado: Navegador Chrome e/ou Android || Teste você mesmo!😉)
  
  

NavBar

Através do menu de navegação, tanto na versão desktop quanto para mobile, é possível percorrer as seções da página, as quais são: "História" (versões do mito), "Curiosidades" e "Sobre Dev" (sobre a Desenvolvedora).

Observe abaixo:

Introdução

Na versão desktop, o usuário é recebido com uma pequena animação com a imagem da estátua de Medusa, seu nome e um resumo de sua história:



A sensação é que ela está lhe observando...

Seção 1: HISTÓRIA

A seção "História" conta com as principais versões do mito. O usuário poderá escolher qual deseja ler primeiro dentre as 3 (três) opções: "Medusa e a Família Górgona", "Atena e sua Sacerdotisa" e "A Lástima de Medusa":

• Opção 1 - Medusa e a Família Górgona:
  
  
  
  
• Opção 2 - Atena e sua Sacerdotisa:
  
  
  
  
• Opção 3 - A Lástima de Medusa:
  
  
  
  

Seção 2: CURIOSIDADES

A seção "Curiosidades" revela alguns pontos ou referências intrigantes ao mito da Medusa. Quem sabe você já não conheça alguns deles? 😉:



Acesse este projeto e veja todas as curiosidades!

Seção 3: Sobre Dev

A seção "Sobre Dev" é a última seção deste projeto. Conta um pouco sobre a desenvolvedora e outras informações relevantes relacionadas a ela. Observe:

O Projeto - Mobile

A versão mobile conta com as mesmas descrições citadas anteriormente: NavBar (dimensionado ao menu hamburguer), Introdução, História, Curiosidades e Sobre a Dev, que estão organizados respectivamente abaixo.

Vídeo do Projeto

Vídeos demonstrativos sobre o projeto MATW!

MATW-Medusa-part1.mp4

MATW-Medusa-part2.mp4

Conhecimentos Aplicados

• HTML5:

  • Sections;
  • Article;
  • Main;
  • Divs;
  • NavBar;
  • Header;
  • Footer;
  • h1, h2, h3, h4, h5, h6;
  • Paragraphs;
  • Listas (ul, li);
  • Buttons;
  • Inputs;
  • Labels;
  • Citações (q);
  • Acessibilidade;
  • Metas.

• CSS6:

  • Classes;
  • IDs;
  • Keyframes;
  • Root;
  • CSS Reset;
  • Position;
  • Display;
  • Font (size, family, weight);
  • Z-index;
  • Margin;
  • Padding;
  • Animation;
  • Border;
  • Dimensions (width, height, index, position, display, transform, transition, overflow, float);
  • Backdrop;
  • Opacity;
  • Checked, label, span.

• JavaScript:

  • Classes;
  • IDs;
  • addEventListener;
  • Events;
  • setTimeout;
  • Hypertext Reference (Manipulation);
  • Window (scroll -> top, behavior);
  • Ternary Operator;
  • Loops;
  • Conditionals;
  • CONST, let;
  • Factory Functions;
  • ForEach;
  • QuerySelector;
  • Arrays.
    
    

Veja você mesmo!

Fique a vontade! Clique no link ao lado para você mesmo testar o MATW - Medusa! 👉🏻💜 https://viihneris.github.io/MATW-Medusa-Myth/

ATENÇÃO: Para melhor experiência, recomendo que utilize o navegador Chrome e/ou seu dispositivo Android.