Seja bem-vindo(a) a mais uma aula ROCK aqui no play da UpInside. Hoje vamos ver como estruturar uma landing page que segue o modelo de Single-Page Application usando todos os conceitos de estrutura com CSS Flexbox.
Vamos aplicar o conceito em diferentes níveis da estrutura para entender o comportamento e aplicação desse conceito para estruturar o layout e distribuir o conteúdo.
Material da aula:
Você pode fazer o download do material da aula diretamente no nosso GIT e conta com o exemplo finalizado no diretório raiz.
E para acompanhar a aula você tem a pasta PLAY, onde tem o HTML com marcação inicial e o CSS zerado para executar o passo a passo da aula.
CLICA AQUI que eu te levo até o repo deste play ;)
O Layout:
Durante a aula vamos estruturar uma landing page de alta conversão, veremos dobras de conteúdo que servem CTA, bullet-points, sobre o autor e formulário de optin.
Mas a ideia principal da aula é mostrar a você o conceito de FlexBox aplicado em uma página do zero até o layout pronto para ir para a produção.
Veja como ficou:
Então é isso. Espero que esse play possa tirar todas as suas dúvidas sobre como estruturar qualquer projeto utilizando o FlexBox, que sem sombra de dúvidas nos deixa infinitamente mais produtivos.
Aquele forte abraço e nos vemos nos comentários!
Deixe seu comentário: