• Captura de tela
• Links
• Construído com
• O que aprendi
• Desenvolvimento contínuo
• Recursos úteis
• Fernando Mendes

• Site URL: https://nandosti.github.io/portfolio-hmtl-css/

Nesse desafio, aprendi a criar um layout atraente e responsivo utilizando HTML e CSS. Além disso, aprimorei meus conhecimentos em animações e transições, explorando conceitos como keyframes e cubic-bezier para adicionar movimento suave aos elementos da página.

Também compreendi como utilizar o recurso de ancoragem em HTML para direcionar o usuário para diferentes seções da página, tornando a experiência de navegação mais fluida. A técnica de ajustar o tamanho das fontes em relação à viewport (unidade "vw") se mostrou valiosa para criar um design adaptável a diferentes dispositivos.

Aprendi a estruturar o código de forma organizada, utilizando classes e IDs para aplicar estilos de maneira eficiente. Além disso, a experimentação com sombras e efeitos de iluminação trouxe profundidade e destaque aos elementos visuais.

Também explorei a utilização de pseudo-elementos (::before e ::after) para criar padrões visuais como estrelas em movimento, agregando um toque a mais no meu design. As animações CSS foram um componente essencial, e pude aplicar diferentes animações em resposta a ações do usuário, como clicar em seções específicas do site.

No geral, esse projeto me proporcionou um entendimento mais sólido das capacidades do HTML e CSS, bem como habilidades práticas na criação de layouts atraentes e interativos.

  .stars2::after{
    content: " ";
    position: absolute;
    top: 150px;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    box-shadow: 15px 15px white,
      125px 35px white,
      50px 80px white,
      10px 120px white,
      275px 90px white,
      230px 10px white,
      120px 130px white,
      300px 130px white,
      220px 115px white;
  }
@keyframes move-stars {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-150px);
    }
}


.tracking-in-expand {
	-webkit-animation: tracking-in-expand 1s ease-in-out both;
	animation: tracking-in-expand 1s ease-in-out both;
}


 @-webkit-keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }

Pretendo continuar focado em construir um conhecimento sólido nessas tecnologias. Ainda há muitos conceitos importantes para serem desenvolvidos. Todos os dias aprendo novos conceitos que são gradativamente adicionados ao meu repertório de ferramentas.

• Mdn - O Mozilla Developer Network (MDN) desempenha um papel crucial ao fornecer recursos abrangentes e atualizados para desenvolvedores web em todo o mundo.
• W3School - O W3Schools é um recurso online amplamente utilizado por desenvolvedores para aprender e aprimorar suas habilidades em tecnologias web.
• Dev em Dobro - Este é um canal onde encontro muito material. Tem muito conteúdo relacionado ao desenvolvimento. Recomendo a todos que querem aprender sobre esse e outros conceitos relacionados.

Fernando Mendes