diff --git a/index.css b/index.css new file mode 100644 index 0000000..768e66c --- /dev/null +++ b/index.css @@ -0,0 +1,303 @@ +/* font-family: 'Amatic SC', cursive; +font-family: 'Source Sans Pro', sans-serif; */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Amatic SC', cursive; + font-size: 30px; + font-weight: 600; +} + +h1 { + font-size: 2em; + padding: 10px; +} + +h3 { + font-size: 1.5em; + padding: 10px; +} + + +/* Início da formatação do HEADER */ +header { + padding: 20px; + background: #FFC583; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + z-index: 1; +} + +#logo-bank { + height: 100px; + margin-left: 20px; +} + +nav { + display: flex; + justify-content: space-evenly; + width: 50%; +} + +nav > a { + font-size: 35px; + color: #BA6A39; + font-weight: 900; +} + +nav > a:visited { + color: #744223; +} + +nav > a:link, nav > a:hover, +nav > a:active { + text-decoration: none; +} +/* Fim da formatação do HEADER */ + +/* Início da formatação do FOOTER */ +footer { + width: 100%; + background-color: #FFC583; + display: flex; + justify-content: space-between; + align-items: center; + padding: 30px 20px; +} + +footer > p { + font-family: 'Amatic SC', cursive; + color: #BA6A39; + font-weight: 900; + margin-left: 10px; +} + +.redes-sociais img { + width: 30px; + margin: 0 10px; +} +/* Fim da formatação do FOOTER */ + +/* Início da formação do INDEX */ +.quem-somos-index { + background-color: #FFD89E; + display: flex; + justify-content: space-around; + align-items: center; + padding: 30px; +} + +.texto-quem-somos > p { + padding: 20px 0; + text-align: center; +} + +.quem-somos-index > img { + height: 240px; + opacity: 70%; + border-radius: 30px; + max-width: 50%; +} + +.produtos-index { + background-color: #FFE7D9; + display: flex; + flex-direction: row-reverse; + justify-content: space-around; + align-items: center; + padding: 30px; +} + +.produtos-index > img { + height: 240px; + opacity: 90%; + border-radius: 10px; + max-width: 50%; +} + +.texto-produtos > p { + padding: 8px; +} + +.nosso-time-index { + background-color: #F4F4F4; + display: flex; + justify-content: space-around; + align-items: center; + padding: 30px; +} + +.texto-nosso-time > p { + padding: 20px 0; +} + +.nosso-time-index > img { + height: 240px; + opacity: 70%; + border-radius: 50%; + max-width: 50%; +} +/* Fim da formação do INDEX */ + +/* Pagina Quem Somos */ +.quem-somos{ + display: flex; + justify-content: space-between; + align-items: center; + text-align: center; + color: #BA6A39; + padding: 30px; +} +#imgQuemSomos{ + height: 300px; +} +/* Pagina Quem Somos */ + +/* Pagina Nosso time */ + +.nosso-time{ + display: flex; + justify-content: space-between; + align-items: center; + text-align: center; + color: #BA6A39; + padding: 30px; +} +#imgnossotime{ + height: 300px; +} + +/* Pagina Nosso Time */ + + +/* Pagina Nossos Produtos */ +.flex-container { + padding: 30px; + display: flex; + justify-content: space-between; +} + +.flex-container > article { + padding: 10px; +} + +.box > img { + height: 300px; +} + +/* Pagina Nossos Produtos */ + + +/* Responsividade */ +@media screen and (max-device-width : 480px) { + /* Início HEADER */ + * { + font-size: 25px; + } + + header { + flex-direction: column; + position: static; + } + + nav { + width: 100%; + margin-top: 20px; + flex-direction: column; + align-items: center; + } + + nav > a { + font-size: 30px; + } + + #logo-bank { + margin-left: 0; + } + /* Fim HEADER */ + + /*Início FOOTER */ + footer { + flex-wrap: wrap; + justify-content: center; + } + + footer > p { + width: 40%; + text-align: center; + } + + .redes-sociais { + margin-top: 20px; + } + /* Fim FOOTER */ + + /* Início INDEX */ + .quem-somos-index, .produtos-index, .nosso-time-index { + flex-direction: column; + + } + + .quem-somos-index > div, + .produtos-index > div, .nosso-time-index > div { + width: 100%; + } + + .quem-somos-index > img, + .produtos-index > img, .nosso-time-index > img { + width: 100%; + height: 120px; + } + /* Fim INDEX */ + + .quem-somos{ + justify-content: center; + flex-direction: column; + padding: 5px; + } + + .quem-somos div { + width: 100%; + } + + #imgQuemSomos { + height: 200px; + margin: 10px; + } + + .nosso-time{ + display: flex; + justify-content: center; + flex-direction: column; + padding: 5px; + } + + #imgnossotime { + height: 200px; + margin: 10px; + } + + .flex-container { + flex-direction: column; + padding: 5px; + } + + .flex-container:nth-child(2) { + flex-direction: column-reverse; + } + + .box { + width: 100%; + } + + .box > img { + height: 150px; + } + +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..cb2eb5e --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + + + + F4Bank + + +
+ logo + +
+ +
+
+

Um banco criado para você chamar de seu!

+

Aquele banco que há décadas pensa na sua segurança ;)

+
+ + +
+ +
+
+

Conheça os produtos desenhados especialmente para você!

+

Não deixe de conhecer os benefícios de ter um cartão F4

+

Confira também nossa Conta Corrente Digital

+
+ +
+ +
+
+

E não poderíamos de deixar à sua disposição o melhor time do mercado financeiro!

+

Aqui cuidamos do seu dinheiro, para que você possa cuidar de você!

+
+ +
+ + + + + \ No newline at end of file diff --git a/index.md b/index.md new file mode 100644 index 0000000..cb2eb5e --- /dev/null +++ b/index.md @@ -0,0 +1,58 @@ + + + + + + + + + F4Bank + + +
+ logo + +
+ +
+
+

Um banco criado para você chamar de seu!

+

Aquele banco que há décadas pensa na sua segurança ;)

+
+ + +
+ +
+
+

Conheça os produtos desenhados especialmente para você!

+

Não deixe de conhecer os benefícios de ter um cartão F4

+

Confira também nossa Conta Corrente Digital

+
+ +
+ +
+
+

E não poderíamos de deixar à sua disposição o melhor time do mercado financeiro!

+

Aqui cuidamos do seu dinheiro, para que você possa cuidar de você!

+
+ +
+ + + + + \ No newline at end of file diff --git a/nossos-produtos.html b/nossos-produtos.html new file mode 100644 index 0000000..3b86857 --- /dev/null +++ b/nossos-produtos.html @@ -0,0 +1,68 @@ + + + + + + + + + F4Bank + + +
+ logo + +
+ +
+
+ Conta Digital +
+
+

Controle na sua mão

+

+
+

Tudo o que você precisa em um só aplicativo, completo e gratuito, para economizar seu tempo com o que realmente importa. Sem agências, filas, burocracias e taxas. Você é quem manda no seu dinheiro.

+
+
+ +
+
+

Cartão Internacional Mastercard® sem taxas

+

Você pode fazer compras internacionais no crédito, além de ter saques gratuitos nos caixas Banco24Horas e Saque Pague. Você ainda conta com a função débito para compras nacionais. Tudo isso com os benefícios Mastercard.

+
+

O débito já está pronto para uso e você pode pedir uma análise de crédito.

+
+
+ Mastercard +
+
+ +
+
+ Segurança +
+
+

Segurança em primeiro lugar

+

+
+

O F4Bank conta com a tecnologia 4-Safety, uma ferramenta que reforça sua segurança no acesso e nas transações realizadas, através da autenticação feita por códigos temporários gerados no próprio aplicativo.

+
+
+ + + + + \ No newline at end of file diff --git a/nossotime.html b/nossotime.html new file mode 100644 index 0000000..c9e6363 --- /dev/null +++ b/nossotime.html @@ -0,0 +1,44 @@ + + + + + + + + + F4Bank + + +
+ logo +
+ +
+
+

Como os times trabalham no F4Bank

+

O F4 se inspirou no modelo do Spotify, com times autônomos chamados Squads focados em objetivos específicos.

+

Os squads possuem pessoas com diferentes habilidades que sentam juntas e têm total responsabilidade sobre o que estão criando: design, código, lançamento, manutenção, operações, etc..

+
+
+ QuemSomos +
+
+ + + + + \ No newline at end of file diff --git a/quemsomos.html b/quemsomos.html new file mode 100644 index 0000000..70fa270 --- /dev/null +++ b/quemsomos.html @@ -0,0 +1,48 @@ + + + + + + + + + F4Bank + + +
+ logo +
+ +
+
+ QuemSomos +
+
+

Somos a F4Bank

+

Somos uma startup que desenvolve soluções simples, seguras e 100% digitais para você ter o controle do seu dinheiro literalmente nas suas mãos.

+

Somos F4 - justos e transparentes na conduta, diretos e objetivos na comunicação, e tratamos cada cliente como uma pessoa.

+

Somos contra burocracia, papelada, agências e centrais de atendimento caras e ineficientes.

+

Somos a favor de ouvir e valorizar a sua opinião, e de merecer a sua confiança como cliente.

+

Ajude a reinventar o possível

+

Se você cansou das mesmas soluções para problemas antigos, se você quer ter e testar novas ideias e se você acredita que design, tecnologia e um bom atendimento resolvem qualquer problema, conheça as nossas carreiras. Procuramos pessoas para simplificar o mundo

+
+
+ + + + + \ No newline at end of file