Fylo

🛠️ Descrição do projeto

Projeto desenvolvido para interagir com o CSS, tendo um avanço para melhor entendimento da funcionalidade do mobile first. Tendo a possibilidade de visualizar por mobile 375px e desktop 1440px, tornando assim um site responsivo. Utilizando elementos na página tais como plugins externos, carrossel foi importar do plugin Swiperjs e media queries.

🛠️ Funcionalidades do projeto

• Funcionalidade 1: Armazena todos os seus arquivos mais importantes em um local seguro
• Funcionalidade 2: Acesse-os em qualquer lugar você precisa
• Funcionalidade 3: Compartilhe e colabore com amigo, família e colegas de trabalho

Stack utilizada

Front-end: HTLM e CSS

Roadmap

• Aumentar a fonte na versão desktop
• Melhorar o espaçamento entre os elementos
• Aumentar o tamanho de tela para o desktop

🛠️ Processo de evolução do projeto

Etapa 1

• Analisar quais ferramentas utilizar;

• Definir a localização de cada conteúdo;

• Fazer as divisões no HTML.

Etapa 2

• Integrar CSS no HTML;

• Importar e usar fontes do google fonts

• Adicionar informações de cores e fonte;

• Usar a extensão live-server;

• Aplicar o reset.css

Etapa 3

• Construir um header;

• Transformar elementos em flex-containers e flex-items com FlexBox;

• Associar arquivos CSS através do @import;

• Position relative e absolute

• Editar input e seu placeholder

Etapa 4

• Aplicar plugins externos através de CDN;

• Utilizar o plugin SwiperJS;

• Reforçar o aprendizado de flexbox.

Etapa 5

• Reutilizar elementos e estilos

• Usar media queries

• Aplicar diferentes estilos para diferentes tamanhos de tela;

• Retirar elementos da tela;

• Aplicar elementos na tela de acordo com o tamanho do dispositivo.

Uso/Exemplos

@media screen and (min-width: 1440px) {
    
     /* Conteúdo rodapé */
    .logo-fylo-footer{
        width: 20%;
    }

    .img-footer {
        width: 2%;  
    }

    .icon-phone-footer{
        padding: 1em 0 1em 0;
    }

    /* Link - Conteúdo rodapé */

    .link-container-1 {
        font-size: 14px;
        text-align: right;
        margin: 4em 6em;
     }

     /* Social- Conteúdo rodapé */

    .social-container-2 img {
        width: 6%;
    }

    .social-container-2 {
        display: flex;
        align-items: center;
        margin: 2em 2em 0 40em;
        padding: 0 2em;
    }

    /* Dev- Conteúdo rodapé */

    .dev-container {
        text-align: center;
        padding: 0em 2em;
        margin: 1em 2em 8em 2em;
        line-height: 1.5em;
        
    }

}

🛠️ Ferramentas utilizadas

🔗 Links