Battle

🛠️ 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. Nessa página foi construído um menu de navegação, a seção banner hero com a funcionalidade de alterar o jogo destaque(Diablo, HearthStone e World of Warcraft), a listagem dos principais jogos da empresa e um rodapé contendo informações sobre o download do app battle.net.

🛠️ Funcionalidades do projeto

• Funcionalidade 1: Escolher jogo
• Funcionalidade 2: Download do app battle.net

Stack utilizada

Front-end: HTLM e CSS

Roadmap

• Versão desktop 1440px e 1920px
• Adicionar efeito nos botões
• Adicionar informações no menu

🛠️ 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

/* BG-footer */

.image-footer-container{
    background-image: url(../images/bg-footer.png);
    width: 375px ;
    height: 1090px;
    margin-top: 3em;
}

/* Imagem-footer */

.image-logo-battlenet{
   margin: -20% 7%;
   position: relative;
   width:160px;
   height:20px;
}

/* Conteúdo-footer-1 */

.titulo-footer {
    font-family: var(--fonte-header-titulo);
    color: var(--color-header);
    font-size: 28px;
    width: 277px;
    margin: 150px 30px;
}

/* Conteúdo-footer-2 */
.conteudo-footer-container_2{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-left: -4em;
    margin-top: -5em;
}

🛠️ Ferramentas utilizadas

🔗 Links