Download fylo dark theme landing page - fylo dark theme landing page Download do código-fonte

fylo dark theme landing page

Componentes de terceiros

1.0.0

Baixar

fylo dark theme landing page - Frontend Mentor

Olá! Obrigado por conferir este projeto!

Esta é uma solução para um desafio do Frontend Mentor que consiste em construir uma landing page que se pareça o mais próximo possível do design fornecido. O objetivo é melhorar minhas habilidades de layout web construindo um projeto realista.

1. Índice ✒️

fylo dark theme landing page - Frontend Mentor
- 1. Índice ✒️
- 2. Visão geral
  - O desafio
  - Como executar o projeto:
  - Ligações
- 3. Meu processo?
  - Construído com
  - O que eu aprendi
  - Recursos úteis
- 4. Autor ??

2. Visão geral

O desafio

Os usuários devem ser capazes de:

Veja o layout ideal para o site dependendo do tamanho da tela do dispositivo
Veja os estados de foco para todos os elementos interativos na página

Pré-visualização do design para <span class= desafio da página de destino do tema escuro fylo" style="max-width: 100%;">

Você pode conferir os detalhes do desafio na página Frontend Mentor.

Como executar o projeto:

Optei por utilizar o Adalab Starter Kit para trabalhar neste projeto, criado em Node e Gulp. Então antes de mais nada é necessário ter o Node JS instalado para poder executá-lo.

Abra o terminal na pasta raiz do repositório.
Instale as dependências locais usando o seguinte comando no terminal:

npm install

Comece a executar o projeto usando o seguinte comando que abrirá uma janela do navegador que mostra uma versão ativa da página.

npm start

Ligações

URL do site ativo: https://leireomadina.github.io/fylo-dark-theme-landing-page/
URL da solução: em breve

3. Meu processo?

Construído com

Marcação HTML5 semântica
Sistema de templates HTML
Propriedades personalizadas CSS3
Caixa flexível
Grade CSS
SASS com metodologia BEM
Gole
Design responsivo com fluxo de trabalho voltado para dispositivos móveis

O que eu aprendi

Use @for para criar loops no SCSS : neste caso eu queria selecionar apenas o segundo e o terceiro cartão da seção de depoimentos.

 .card {
  @for $i from 2 through 3 {
    & -#{$i} {
      margin-top : 1.8 rem ;
      @media all and ( min-width : 768 px ) {
        margin-top : 0 ;
      }
    }
  }
}

Use e gerencie arquivos SVG : use o atributo viewBox para modificar sua posição e dimensão, adicione título e tag desc para melhorar a acessibilidade, estilo inline e CSS, personalize cores usando preenchimento ou traço...
Use funções ARIA para melhorar a acessibilidade da web : por exemplo, dê uma olhada nessas funções do menu de navegação.

 < nav class =" header-menu " role =" navigation " >
  < ul class =" header-menu__list " role =" list " >
    < li class =" header-menu__list-item " role =" list-item " >
      < a class =" header-menu__link " href =" # " role =" link " >
        Features
      < a >
    </ li >
    ...
  </ ul >
</ nav >

Recursos úteis

Como usar @for para criar um Sass Loop: https://www.youtube.com/watch?v=6CbsNFXMYgs. Você também pode dar uma olhada na documentação oficial do SASS.
Lista de funções, estados e propriedades ARIA (MDN): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
Estilo SVG embutido: https://www.youtube.com/watch?v=af4ZQJ14yu8&t=844s
Mais recursos em breve..