Nessa etapa, você deverá adaptar todos os elementos da tela a largura entre 1024px e 1199px de largura.
Adaptando todos os elementos para que fiquem distribuídos da melhor forma.
Você deverá utilizar media queries no CSS para ajustar o layout e possivelmente precisará ajustar algumas coisas no html e javascript. Lembrando que as demais versões não poderão ser afetadas.
O que você precisará fazer:
[Menu] Modificar o estilo do menu para esse formato. Vou deixar um link de exemplo de como fazer isso.
Section 1
Aqui você terá que transformar a coluna 1 em uma coluna única que tenha a largura total do container.
A coluna 2 ficará abaixo da coluna 1, também com a largura total do container.
As 3 colunas abaixo, também poderão se transformar cada uma delas em uma coluna única, onde ficará um item abaixo do outro com os elementos centralizados.
Section 2
Mesma ideia da section 1, porém a coluna 2 fica acima da coluna 1.
Section 3
Nessa section, creio que o melhor seria transformar em um carrossel. Onde nas resoluções acima de 1200px de largura não tem alteração, mas entre 1024px e 1199px deve exibir apenas dois planos e para ver o terceiro precisa clicar em uma seta ou nos bullets. Segue link de um script que pode ajudar a fazer isso.
Section 4
Nessa section, o título e mapa seguem na mesma distribuição, cuidando apenas para manter a proporção.
As marcas/logotipos que ficam na coluna de baixo, podem utilizar a mesma ideia de carrossel do item 4, ou coloque um abaixo do outro. Faça como achar melhor.
Section 5
Aqui só precisa ajustar o carrossel para exibir apenas 1 ou 2 depoimentos, conforme ficar melhor de ler nessa largura de tela.
O subscribe provavelmente terá que adaptar também, colocando o botão subscribe new para baixo do texto da esquerda.
Section 6
Deverá deixar a coluna 2 aparecendo primeiro, ocupando toda a largura. A distribuição dos elementos dessa coluna podem permanecer do mesmo jeito que estão.
A coluna 1 fica abaixo da coluna 2 e todos os elementos deverão ficar centralizados.
Nessa etapa, você deverá adaptar todos os elementos da tela a largura entre 1024px e 1199px de largura. Adaptando todos os elementos para que fiquem distribuídos da melhor forma. Você deverá utilizar media queries no CSS para ajustar o layout e possivelmente precisará ajustar algumas coisas no html e javascript. Lembrando que as demais versões não poderão ser afetadas.
O que você precisará fazer: [Menu] Modificar o estilo do menu para esse formato. Vou deixar um link de exemplo de como fazer isso.
Section 1
Aqui você terá que transformar a coluna 1 em uma coluna única que tenha a largura total do container.
A coluna 2 ficará abaixo da coluna 1, também com a largura total do container.
As 3 colunas abaixo, também poderão se transformar cada uma delas em uma coluna única, onde ficará um item abaixo do outro com os elementos centralizados.
Section 2
Mesma ideia da section 1, porém a coluna 2 fica acima da coluna 1.
Section 3
Nessa section, creio que o melhor seria transformar em um carrossel. Onde nas resoluções acima de 1200px de largura não tem alteração, mas entre 1024px e 1199px deve exibir apenas dois planos e para ver o terceiro precisa clicar em uma seta ou nos bullets. Segue link de um script que pode ajudar a fazer isso.
Section 4
Nessa section, o título e mapa seguem na mesma distribuição, cuidando apenas para manter a proporção.
As marcas/logotipos que ficam na coluna de baixo, podem utilizar a mesma ideia de carrossel do item 4, ou coloque um abaixo do outro. Faça como achar melhor.
Section 5
Aqui só precisa ajustar o carrossel para exibir apenas 1 ou 2 depoimentos, conforme ficar melhor de ler nessa largura de tela.
O subscribe provavelmente terá que adaptar também, colocando o botão subscribe new para baixo do texto da esquerda.
Section 6
Deverá deixar a coluna 2 aparecendo primeiro, ocupando toda a largura. A distribuição dos elementos dessa coluna podem permanecer do mesmo jeito que estão.
A coluna 1 fica abaixo da coluna 2 e todos os elementos deverão ficar centralizados.