diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..fa84d02 --- /dev/null +++ b/css/base.css @@ -0,0 +1,45 @@ +:root { + --branco: #FFF; + --azul-claro: #DFE3E5; + --vermelho-forte: #B72E2E; + --cinza-escuro: #4F4C4C; + --cinza-claro: #F7F4F4; + --cinza-medio: #D9D9D9; + + --fonte-link: #0084FF; + --fonte-cinza: #666; + --borda-cabecalho-mobile: #103D4A; + --bg-rodape: #333; + --bg-chamada-mobile: #00161C; + + --planos-cartao-start: #56CCF2; + --planos-cartao-ultra: #B04CD9; + --planos-cartao-mega: #E33B3B; + + --montserrat: 'Montserrat', sans-serif; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.container { + padding-right: 6%; + padding-left: 6%; +} + +.botao { + text-align: center; + + display: block; + + width: 100%; + max-width: 350px; + + box-sizing: border-box; + + padding: 1rem 2rem; + + border: 1px solid var(--branco); + border-radius: 5px; +} \ No newline at end of file diff --git a/css/cabecalho.css b/css/cabecalho.css new file mode 100644 index 0000000..378e70e --- /dev/null +++ b/css/cabecalho.css @@ -0,0 +1,36 @@ +.cabecalho { + color: var(--branco); + + width: 100%; + + box-sizing: border-box; + + display: flex; + flex-direction: column; + align-items: center; + + padding-top: .75rem; + padding-bottom: .75rem; + + border-bottom: 1px solid var(--borda-cabecalho-mobile); + + position: absolute; +} + +.cabecalho__logo { + margin-bottom: 1rem; +} + +.cabecalho__navegacao { + text-align: center; +} + +.cabecalho__link { + font-size: 1.1rem; + + display: inline-block; + + margin-right: .7rem; + margin-bottom: 1.25rem; + margin-left: .7rem; +} diff --git a/css/chamada.css b/css/chamada.css new file mode 100644 index 0000000..f70571a --- /dev/null +++ b/css/chamada.css @@ -0,0 +1,33 @@ +.chamada { + display: flex; + flex-direction: column; + align-items: center; + + color: var(--branco); + text-align: center; + + background-color: var(--bg-chamada-mobile); + + padding-top: 12.25rem; + padding-bottom: 2.5rem; +} + +.chamada__titulo { + font-family: var(--montserrat); + font-size: 2rem; + font-weight: 700; + text-transform: uppercase; + + margin-bottom: 1.5rem; +} + +.chamada__texto { + font-size: 1.25rem; + line-height: normal; + + margin: 0 auto 2.5rem; +} + +.chamada__botao { + width: 100%; +} diff --git a/css/contato.css b/css/contato.css new file mode 100644 index 0000000..923189c --- /dev/null +++ b/css/contato.css @@ -0,0 +1,29 @@ +.contato { + display: flex; + flex-direction: column; + align-items: center; + + text-align: center; + + padding-top: 2rem; + padding-bottom: 2rem; +} + +.contato__titulo { + color: var(--cinza-escuro); + font-weight: 700; + font-size: 1.5rem; + font-family: var(--montserrat); + text-transform: uppercase; + text-align: center; + + margin-bottom: 1.25rem; +} + +.contato__botao { + color: var(--cinza-escuro); + + border-color: var(--cinza-escuro); + + margin-top: 1rem; +} diff --git a/css/destaques.css b/css/destaques.css new file mode 100644 index 0000000..c8a0ae6 --- /dev/null +++ b/css/destaques.css @@ -0,0 +1,48 @@ +.destaques { + background-color: var(--azul-claro); + + padding-top: 2.5rem; + padding-bottom: 2rem; +} + +.destaques__titulo { + color: var(--cinza-escuro); + font-weight: 700; + font-size: 1.5rem; + font-family: var(--montserrat); + text-transform: uppercase; + text-align: center; + + margin-bottom: 2rem; +} + +.destaques__painel { + display: flex; + flex-direction: column; + align-items: center; + + margin-bottom: 2rem; +} + +.destaques__painel-imagem { + width: 100vw; + max-width: 600px; + + box-shadow: 0 2px 10px 5px #00000020; + + margin-bottom: .5rem; +} + +.destaques__painel-texto { + font-weight: 700; + font-size: 1.2rem; + line-height: normal; +} + +.destaques__botao { + color: var(--vermelho-forte); + + border-color: var(--vermelho-forte); + + margin: 0 auto; +} diff --git a/css/diferenciais.css b/css/diferenciais.css new file mode 100644 index 0000000..8710cf1 --- /dev/null +++ b/css/diferenciais.css @@ -0,0 +1,46 @@ +.diferenciais { + padding-top: 3.5rem; + padding-bottom: 3.5rem; +} + +.diferenciais__lista { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.diferenciais__item { + max-width: 350px; + + box-sizing: border-box; + + background-repeat: no-repeat; + background-position: top 1.25rem left 2.5rem; + + padding: 2rem 0 2rem 5rem; +} + +.diferenciais__item--tempo { + background-image: url(../img/icone-relogio.png); +} + +.diferenciais__item--foco { + background-image: url(../img/icone-dinheiro.png); +} + +.diferenciais__item--especialistas { + background-image: url(../img/icone-quimica.png); +} + +.item__titulo { + color: var(--cinza-escuro); + font-weight: 700; + font-size: 1.2rem; + text-transform: uppercase; + + margin-bottom: 1.5rem; +} + +.item__texto { + line-height: normal; +} \ No newline at end of file diff --git a/css/institucional.css b/css/institucional.css new file mode 100644 index 0000000..d104e07 --- /dev/null +++ b/css/institucional.css @@ -0,0 +1,54 @@ +.institucional { + display: flex; + flex-direction: column; + align-items: center; + + color: var(--fonte-cinza); + text-align: center; + + padding-top: 2rem; + padding-bottom: 2rem; +} + +.institucional__titulo { + color: var(--cinza-escuro); + font-weight: 700; + font-size: 1.5rem; + font-family: var(--montserrat); + text-transform: uppercase; + text-align: center; + + margin-bottom: 2rem; +} + +.institucional__descricao { + margin-bottom: 2rem; +} + +.institucional__endereco { + font-size: 1.5rem; + line-height: normal; + + margin-bottom: 2rem; +} + +.institucional__contato { + font-size: 1.2rem; + line-height: 1.8; + + margin-top: 2rem; +} + +.institucional__contato-telefone { + line-height: normal; +} + +.institucional__contato-email { + color: var(--fonte-link); + text-decoration: underline; + display: block; +} + +.institucional__video { + width: 100vw; +} diff --git a/css/planos.css b/css/planos.css new file mode 100644 index 0000000..81e4cbd --- /dev/null +++ b/css/planos.css @@ -0,0 +1,106 @@ +.planos { + background-color: var(--cinza-claro); + + padding-top: 3rem; + padding-bottom: 3rem; +} + +.planos__titulo { + color: var(--cinza-escuro); + font-weight: 700; + font-size: 1.5rem; + font-family: var(--montserrat); + text-transform: uppercase; + text-align: center; + + margin-bottom: 1.25rem; +} + +.planos__cartoes { + display: flex; + flex-direction: column; + align-items: center; +} + +.cartao { + display: flex; + flex-direction: column; + + background-color: var(--branco); + + width: 100%; + max-width: 300px; + + margin-bottom: 2rem; + + border-radius: 5px; + box-shadow: 0 2px 10px 2px #00000010; +} + +.cartao__titulo { + font-weight: 700; + font-size: 1.5rem; + text-align: center; + + padding: .75rem 0; + + margin-bottom: .5rem; + + border-bottom: 1px solid var(--azul-claro); +} + +.cartao__conteudo { + padding: 0 15%; +} + +.cartao__preco { + font-weight: 700; + font-size: 3rem; + text-align: center; + + margin-top: 1.25rem; + margin-bottom: 1.25rem; +} + +.cartao__texto { + color: var(--fonte-cinza); + line-height: 28px; +} + +.cartao__botao { + font-size: 1.2rem; + font-weight: 700; + + width: 100%; + + align-self: center; + + padding: .75rem 2rem; + + margin-top: 1rem; + margin-bottom: 1rem; +} + +.cartao--start { + color: var(--planos-cartao-start); +} + +.cartao--ultra { + color: var(--planos-cartao-ultra); +} + +.cartao--mega { + color: var(--planos-cartao-mega); +} + +.cartao__botao--start { + border-color: var(--planos-cartao-start); +} + +.cartao__botao--ultra { + border-color: var(--planos-cartao-ultra); +} + +.cartao__botao--mega { + border-color: var(--planos-cartao-mega); +} \ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..2c3888f --- /dev/null +++ b/css/reset.css @@ -0,0 +1,48 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +a { + color: inherit; + text-decoration: none; +} \ No newline at end of file diff --git a/css/rodape.css b/css/rodape.css new file mode 100644 index 0000000..0edf202 --- /dev/null +++ b/css/rodape.css @@ -0,0 +1,36 @@ +.rodape { + display: flex; + flex-direction: column; + align-items: center; + + background-color: var(--bg-rodape); + + padding-top: 2.5rem; + padding-bottom: 2rem; +} + +.rodape__social { + display: flex; +} + +.rodape__midia { + display: block; + + width: 42px; + height: 42px; + + margin: 2rem 1rem; +} + +.rodape__navegacao { + color: var(--branco); + text-align: center; + line-height: 3; +} + + +.rodape__link { + display: inline-block; + + margin: 0 .5rem .7rem; +} diff --git a/css/sobre.css b/css/sobre.css new file mode 100644 index 0000000..21a546f --- /dev/null +++ b/css/sobre.css @@ -0,0 +1,34 @@ +.sobre { + padding-top: 3rem; + padding-bottom: 3rem; +} + +.sobre__titulo { + color: var(--cinza-escuro); + font-weight: 700; + font-size: 1.5rem; + font-family: var(--montserrat); + text-transform: uppercase; + text-align: center; + + margin-bottom: 1.25rem; +} + +.sobre__texto { + line-height: normal; + + margin-bottom: 1rem; +} + +.sobre__texto--destaque { + color: var(--cinza-escuro); + font-weight: 700; +} + +.sobre__plataformas { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + + margin-bottom: 1rem; +} \ No newline at end of file diff --git a/img/10-aplicativos-mais-baixados.png b/img/10-aplicativos-mais-baixados.png new file mode 100644 index 0000000..e45e1c8 Binary files /dev/null and b/img/10-aplicativos-mais-baixados.png differ diff --git a/img/android.png b/img/android.png new file mode 100644 index 0000000..ef87c36 Binary files /dev/null and b/img/android.png differ diff --git a/img/apple.png b/img/apple.png new file mode 100644 index 0000000..04aed10 Binary files /dev/null and b/img/apple.png differ diff --git a/img/bg-intro.jpg b/img/bg-intro.jpg new file mode 100644 index 0000000..09037e6 Binary files /dev/null and b/img/bg-intro.jpg differ diff --git a/img/blackberry.png b/img/blackberry.png new file mode 100644 index 0000000..ed408bb Binary files /dev/null and b/img/blackberry.png differ diff --git a/img/comecando-criar-logotipo.png b/img/comecando-criar-logotipo.png new file mode 100644 index 0000000..e2d22c9 Binary files /dev/null and b/img/comecando-criar-logotipo.png differ diff --git a/img/dicas-acessibilidade.jpg b/img/dicas-acessibilidade.jpg new file mode 100644 index 0000000..0bfcdfe Binary files /dev/null and b/img/dicas-acessibilidade.jpg differ diff --git a/img/dicas-fotografia.png b/img/dicas-fotografia.png new file mode 100644 index 0000000..e8250b2 Binary files /dev/null and b/img/dicas-fotografia.png differ diff --git a/img/email-hover.png b/img/email-hover.png new file mode 100644 index 0000000..eeb675e Binary files /dev/null and b/img/email-hover.png differ diff --git a/img/email.png b/img/email.png new file mode 100644 index 0000000..199b5cd Binary files /dev/null and b/img/email.png differ diff --git a/img/facebook.png b/img/facebook.png new file mode 100644 index 0000000..c9bbbe9 Binary files /dev/null and b/img/facebook.png differ diff --git a/img/fechar.svg b/img/fechar.svg new file mode 100644 index 0000000..340911f --- /dev/null +++ b/img/fechar.svg @@ -0,0 +1,12 @@ + +x +Created using Figma + + + + + + + + + diff --git a/img/formacao-java.mp4 b/img/formacao-java.mp4 new file mode 100644 index 0000000..d49b7c6 Binary files /dev/null and b/img/formacao-java.mp4 differ diff --git a/img/icone-dinheiro.png b/img/icone-dinheiro.png new file mode 100644 index 0000000..845e417 Binary files /dev/null and b/img/icone-dinheiro.png differ diff --git a/img/icone-quimica.png b/img/icone-quimica.png new file mode 100644 index 0000000..9a2c776 Binary files /dev/null and b/img/icone-quimica.png differ diff --git a/img/icone-relogio.png b/img/icone-relogio.png new file mode 100644 index 0000000..0ab673d Binary files /dev/null and b/img/icone-relogio.png differ diff --git a/img/instagram.png b/img/instagram.png new file mode 100644 index 0000000..f07f13f Binary files /dev/null and b/img/instagram.png differ diff --git a/img/legenda-portugues-brasil.vtt b/img/legenda-portugues-brasil.vtt new file mode 100644 index 0000000..6d7b347 --- /dev/null +++ b/img/legenda-portugues-brasil.vtt @@ -0,0 +1,13 @@ +WEBVTT + +1 +00:00:00.000 --> 00:00:03.000 a:start +O Java é uma das linguagens que está em todos os lugares + +2 +00:00:03.000 --> 00:00:08.000 +Se você procura no mercado de trabalho uma vaga para ingressar na carreira de tecnologia... + +3 +00:00:08.000 --> 00:00:12.000 +você vai ver que uma das principais tecnologias, é o Java. diff --git a/img/logo-apeperia.svg b/img/logo-apeperia.svg new file mode 100644 index 0000000..2d2962e --- /dev/null +++ b/img/logo-apeperia.svg @@ -0,0 +1,22 @@ + +Logo do Apeperia +Created using Figma + + + + + + + + + diff --git a/img/sobre-apeperia.png b/img/sobre-apeperia.png new file mode 100644 index 0000000..d9da80b Binary files /dev/null and b/img/sobre-apeperia.png differ diff --git a/img/twitter.png b/img/twitter.png new file mode 100644 index 0000000..e126864 Binary files /dev/null and b/img/twitter.png differ diff --git a/img/ux-usabilidade.jpg b/img/ux-usabilidade.jpg new file mode 100644 index 0000000..dec6206 Binary files /dev/null and b/img/ux-usabilidade.jpg differ diff --git a/img/validacao-erro.png b/img/validacao-erro.png new file mode 100644 index 0000000..7744fb0 Binary files /dev/null and b/img/validacao-erro.png differ diff --git a/img/validacao-sucesso.png b/img/validacao-sucesso.png new file mode 100644 index 0000000..e716e23 Binary files /dev/null and b/img/validacao-sucesso.png differ diff --git a/img/windowsphone.png b/img/windowsphone.png new file mode 100644 index 0000000..0f586c6 Binary files /dev/null and b/img/windowsphone.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1c8c5be --- /dev/null +++ b/index.html @@ -0,0 +1,162 @@ + + + + + + Home | Apeperia + + + + + + + + + + + + + + +
+ + +
+
+
+

Aplicativos Na Medida

+

Apeperia tem um jeito inovador de comparar e montar aplicativos para pequenas e médias empresas.

+ Conheça os planos +
+
+

Destaques

+ +
+ Painel do post sobre criação de logotipo +
Conheça as primeiras etapas para a criação de um logotipo
+
+ + +
+ Painel do post sobre fotografia com celular +
Veja dicas de como fotografar usando seu celular
+
+ + Receber destaques por email +
+
+ +
+
+

Sobre

+

Criamos aplicativos personalizados para todas as pessoas!

+

+ A manutenção de um aplicativo não pode ser um custo extra para o cliente, Na Apeperia você assina nosso serviço e a manutenção já está inclusa. Assim, você não se preocupa com manutenção, é tudo por nossa conta. +

+

+ Conte com uma equipe especializada e exclusiva pra projetos incríveis em qualquer plataforma. +

+ +

Desenvolvemos aplicativos para todas as plataformas

+
+
+

Planos

+ +
+
+

Contato

+

Entre em contato com a gente

+ Entre em contato +
+
+

Institucional

+

Um pouco mais sobre a Apeperia

+
+ Rua Vergueiro, 3185
+ Vila Mariana, São Paulo + +
+ +
+
+ + + \ No newline at end of file