Wireframe Html5+css e form salvando em planilha google docs

### wireframe html+css ###
gostaria de uma estrutura(esqueleto) limpa para landing page(ou site "one page") que permita a criação de blocos separados para incluir elementos prontos(galeria, formulários, videos etc) com classes simples para as divs que definam de forma pratica seu comportamento(posição, proporção e se aparece ou não nos dispositivos). Exemplo:
<div class="2colunas fixa esqtop bgpordosol">

Com as seguintes classes/ids etc:

___________________
*Tipos de sessions*
Cada bloco(session) poderia ser algo como:
FULL- Ocupando todo espaço da tela com uma img bg parallax ou cor de bg, por exemplo.
E
BOX - Com elementos mais centralizados, alturas fixas ou nao, paddings laterais e cor de bg.


O comportamento de cada session dever ser setado diretamente no próprio HTML, full ou box. Exemplo:

<section class="full parallax2 bgpordosol">
Aqui o session teria um comportamento de parallax(de vários comportamentos e imgs possíveis, definidas no css) para seu bg(bgpordosol) e poderia cria ou não um conteúdo sobre eles.
OU
<section class="box bgazul fixo1">
Aqui teria uma altura fixa(definida no css ou adptada pelos elementos internos) e paddings definidos por mim para essa classe(fixo1) no css.


_______________
*Ate 5 colunas*
Preciso de uma opção simples para dividir ou não, cada session em colunas e/ou linhas(row), exemplo:
<section class="full col4">
<div 2col></div>
<div 2col><div 2row></div></div>
</section>

________________
*Menu ou barras*
Definir um elemento como menu ou barra flutuante. Fixas no topo e no rodapé.
Com ou sem transição de dobra exemplo:
Desktop:
Barra1 - topo, logo branca, 3btns e height:12rem
Barra1 - Apos 1a dobra, topo, logo preta, menu sanduíche e height:8rem
Barra1 mobile e tablet - rodapé, sanduíche e height:12rem

____________________
*Elemento flutuante*
- Uma div que pode estar fixa sobre o conteúdo, acompanhando a rolagem, em 6 posições na tela(esqtop, esqdn, centrotop, centrodn, dirtop e dirdn).

- Uma div que pode estar dentro de uma session solta, em 6 posições na tela.
- Ambos com cor de bg, alinhamento interno dos elementos, com ou sem padding e onde aparece tmb.
- Botoes de spam
- btns de form
- bts de img

___________
*Animações*
Conexão/integração(classes e estrutura css compativel) com uma boa biblioteca de animação, para ser usada em qualquer elemento.


*Parallax*
- automático (tela inteira, comum)
- controlado (definindo qnt ele vai se mover com a rolagem, para imgs nao tao altas)

Como serão usados elementos externos preciso q essa estrutura seja pensada de forma q "neutralize" ao máximo, a influencia dos elementos de cada session, divs etc no restante da estrutura.
_______________________________________________________________________________
### Integração form > Planilha Google docs e Whatzap ###
Um botão qq no site(mobile) abre um popup fullscreen com um formulário simples:
- Campo NOME
- Btn enviar
Este btn tem duas funções:
1. Grava na planilha do Google, Nome digitado, id, data e hora;
2.
Abre uma conversa no whatzap com o nome digitado no campo