diff --git a/README.md b/README.md
index 0b7a7d4..7c873fe 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,24 @@
-# landing-page-template
+# F4bank
+O menu a animação do menu, e pagina principal.
+A pagina completa do login.
+A pagina completa do cadastro.
+O footer a animação do footer, fiz edição da imagem dentro do celular.
+Usei javascript icones do instagram, twitter, youtube e facebook.
+Adicionei o favicon nas paginas.
+A imagem da logo está com link para o menu principal.
+
+F4bank
+
+O menu a animação do menu, e pagina principal desktop e mobile.
+A pagina completa do login desktop e mobile.
+A pagina completa do cadastro desktop e mobile.
+O footer a animação do footer, fiz edição da imagem dentro do celular desktop e mobile
+Usei javascript icones do instagram, twitter, youtube e facebook.
+Adicionei o favicon nas paginas.
+A imagem da logo está com link para o menu principal.
+
+O que não funciona
+
+
+Link do projeto
+https://holistic-motion.surge.sh/
\ No newline at end of file
diff --git a/cadastro.css b/cadastro.css
new file mode 100644
index 0000000..77d2664
--- /dev/null
+++ b/cadastro.css
@@ -0,0 +1,150 @@
+*{
+ margin: 0;
+ padding: 0;
+}
+
+*:focus {
+ outline: none;
+}
+
+.login{
+ display: flex;
+ position: relative;
+ background-color: #ff914d;
+ width: 100%;
+ height: 100vh;
+ justify-content: center;
+ align-items: center;
+}
+
+img{
+ width: 100px;
+ height: 80px;
+ padding: 10px 15px;
+ position: absolute;
+ left: 5px;
+ top: 5px;
+}
+
+.centro{
+ display: inline-block;
+ position: absolute;
+ width: 374px;
+ padding: 15px;
+ background-color: rgb(255, 255, 255);
+ border-radius: 10px;
+ box-shadow: 0px 5px 8px 0px #a85d2e87;
+}
+
+.seu-cadastro{
+ display: flex;
+ color: #ff914d;
+ margin-top: 55px;
+ margin-left: 95px;
+ flex-wrap: nowrap;
+ font-family: Arial, Helvetica, sans-serif;
+
+}
+
+.cpf{
+ display: inline-block;
+ width: 264px;
+ height: 45px;
+ margin-top: 40px;
+ margin-left: calc(50% - 132px);
+ border-radius: 30px;
+ border-color: #ff914d;
+ text-align: center;
+}
+
+.nome{
+ display: inline-block;
+ width: 264px;
+ height: 45px;
+ margin-top: 25px;
+ margin-left: calc(50% - 132px);
+ border-radius: 30px;
+ border-color: #ff914d;
+ text-align: center;
+}
+
+.email{
+ display: inline-block;
+ width: 264px;
+ height: 45px;
+ margin-top: 25px;
+ margin-left: calc(50% - 132px);
+ border-radius: 30px;
+ border-color: #ff914d;
+ text-align: center;
+}
+
+.span{
+ display: flex;
+ text-align: justify;
+
+
+}
+
+button{
+ display: inline-block;
+ width: 264px;
+ height: 45px;
+ border-radius: 30px;
+ text-align: center;
+ color: white;
+ background-color: #ff914d;
+ margin-left: calc(50% - 132px);
+ box-shadow: 0px 5px 8px 0px #ff914d87;
+ border: none;
+
+}
+
+button:hover{
+ color: #febd59;
+ background-color: white;
+}
+
+button:active{
+ color: white;
+ background-color: #febd59;
+}
+
+.reativa-senha{
+ display: flex;
+ color: #ff914d;
+ margin-top: 35px;
+ margin-left: 120px;
+ flex-wrap: nowrap;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+.cadastro{
+ display: flex;
+ color: #ff914d;
+ margin-top: 25px;
+ margin-left: 120px;
+ flex-wrap: nowrap;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+.termos {
+ display: block;
+ padding: 30px 36px;
+ font-family: sans-serif;
+ text-align: justify;
+ font-size: 14px;
+}
+
+@media screen and (max-width: 700px) {
+ .login {
+ display: block;
+
+ }
+ .termos{
+ display: block;
+ }
+ .centro {
+ margin-top: 90px;
+ }
+}
\ No newline at end of file
diff --git a/cadastro.html b/cadastro.html
new file mode 100644
index 0000000..e8b25b9
--- /dev/null
+++ b/cadastro.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+ F4 bank
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/imagem_F4bank.jpeg b/imagem_F4bank.jpeg
new file mode 100644
index 0000000..5cebb60
Binary files /dev/null and b/imagem_F4bank.jpeg differ
diff --git a/imagem_cadastro.png b/imagem_cadastro.png
new file mode 100644
index 0000000..bc262ad
Binary files /dev/null and b/imagem_cadastro.png differ
diff --git a/img/celular.png b/img/celular.png
new file mode 100644
index 0000000..a8cff56
Binary files /dev/null and b/img/celular.png differ
diff --git a/img/favicon.ico b/img/favicon.ico
new file mode 100644
index 0000000..eb4d5d8
Binary files /dev/null and b/img/favicon.ico differ
diff --git a/img/logo.jpeg b/img/logo.jpeg
new file mode 100644
index 0000000..98aa3bf
Binary files /dev/null and b/img/logo.jpeg differ
diff --git a/img/photothumb.db b/img/photothumb.db
new file mode 100644
index 0000000..4eae9ff
Binary files /dev/null and b/img/photothumb.db differ
diff --git a/img/site.webmanifest b/img/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/img/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..cf875fb
--- /dev/null
+++ b/index.css
@@ -0,0 +1,420 @@
+*{
+ margin: 0;
+ padding: 0;
+}
+
+*:focus {
+ outline: none;
+}
+
+.topbar{
+ position: relative;
+ background-color: #ff914d;
+ width: calc(100% - 96px);
+ padding: 0px 48px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-family: sans-serif;
+}
+
+.topbar .logo{
+ width: 65px;
+}
+
+.topbar .links{
+ display: flex;
+ align-items: center;
+}
+
+.topbar .links .menu-flil{
+ margin-left: 20px;
+}
+
+.topbar .links .menu-flil a{
+ padding: 2px 10px;
+ color: #ffffff;
+ text-decoration: none;
+ font-weight: 600;
+ font-size: 14px;
+}
+
+.topbar .dropdown-content{
+ display: none;
+ background-color: #ffffff;
+ width: calc(100vw - 50px);
+ position: absolute;
+ top: 55px;
+ left: -247px;
+ padding: 25px;
+}
+
+.topbar .link-menu{
+ color: #ff914d;
+ font-weight: 700;
+ margin-left: 10px;
+ margin-bottom: 10px;
+}
+
+.column{
+ width: 33%;
+}
+.topbar .login{
+ color: white;
+ text-decoration: none;
+ font-weight: 600;
+ font-size: 14px;
+}
+.topbar .links .dropbtn {
+ padding: 2px 10px;
+ color: white;
+ text-decoration: none;
+ font-weight: 600;
+ font-size: 14px;
+ background-color: #ff914d;
+ border: none;
+ height: 54px;
+ cursor: pointer;
+}
+
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f1f1f1;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgb(255 145 77 / 26%);
+ z-index: 1;
+ transition: 0.5s;
+ overflow: hidden;
+}
+
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown:hover .dropdown-content {
+ display: flex;
+ justify-content: space-around;
+ flex-direction: row;
+}
+
+.topbar .column a {
+ color: #ffbd56 !important;
+ transition: 0.5s;
+}
+
+.topbar .column a:hover{
+ color: #ff914d !important;
+}
+
+.topbar .menu .dropbtn {
+ padding: 2px 10px;
+ color: white;
+ text-decoration: none;
+ font-weight: 600;
+ font-size: 14px;
+ background-color: #ff914d;
+ border: none;
+ height: 54px;
+ cursor: pointer;
+}
+
+.topbar .menu {
+ display: none;
+}
+
+.informacao{
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.876);
+ position: relative;
+ color: white;
+ display: flex;
+ justify-content: space-evenly;
+ align-content: center;
+ flex-direction: row;
+ overflow: hidden;
+}
+
+ul{
+ list-style-type: none;
+
+}
+
+.part-um, .part-dois{
+ display: flex;
+ justify-content: center;
+ align-content: center;
+ flex-direction: column;
+ font-family: sans-serif;
+ font-size: 16px;
+
+}
+
+.part-tres{
+ display: flex;
+ justify-content: center;
+ align-content: center;
+ flex-direction: column;
+ margin-top: 22px;
+ font-family: sans-serif;
+ font-size: 16px;
+}
+
+.part-um a, .part-dois a, .part-tres a{
+ display: flex;
+ color: #f1f1f1;
+ flex-direction: column;
+ text-decoration: none;
+ padding: 3px;
+}
+
+.part-um a:hover, .part-dois a:hover, .part-tres a:hover{
+ transition: 0.5s;
+ color: #ff914d;
+}
+
+.celular{
+ height: 40vh;
+ width: 10vw;
+ padding: 20px 70px;
+}
+
+.row{
+ position: absolute;
+ left: 66px;
+ bottom: 10px;
+ width: calc(100% - 110px);
+ padding: 0px 381px;
+ font-family: sans-serif;
+ font-size: 12px;
+}
+
+hr{
+ width: 65%;
+ color: white;
+}
+
+.rede{
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ margin-top: 5px;
+}
+
+/* ketryn fim */
+
+/* vitor inicio */
+.parte-um-registro{
+ display: flex;
+ color: #ff914d;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ margin-top: 51px;
+ /* margin-left: 41px; */
+ /* flex-wrap: nowrap; */
+ font-family: sans-serif;
+}
+
+/* estilização da imagem do homem apontando */
+
+.tela-sessao{
+ height: 388px;
+
+}
+
+/* estilização do plano de fundo */
+
+.sessao{
+ background-color: #f5c44e;
+ display: inline-block;
+ /* display: block; */
+ width: 100%;
+ height: 388px;
+ /* background-color: #f5c44e;
+ width: 100%;
+ height: 375px; */
+}
+
+
+
+/* estilização do bloco de cadasto */
+
+.primeiro-bloco{
+ display: flex;
+ position: relative;
+ width: 416px;
+ height: 294px;
+ background-color: rgb(255, 255, 255);
+ border-radius: 10px;
+ box-shadow: 0px 7px 8px 35px #f5c44e;
+ margin-top: -341px;
+ flex-direction: column;
+ margin-left: 455px;
+ /* flex-wrap: nowrap; */
+ overflow: hidden;
+}
+
+/* estilização do input */
+
+.cadastro{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding: 13px 39px;
+ width: 197px;
+ /* height: 85px; */
+ margin-top: 50px;
+ margin-left: 65px;
+ border-radius: 30px;
+ border-color: #ff914d;
+ text-align: center;
+}
+
+/* estilização do button */
+
+.part-butao{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 278px;
+ height: 47px;
+ margin-top: 33px;
+ margin-left: 70px;
+ border-radius: 30px;
+ text-align: center;
+ color: white;
+ background-color: #ff914d;
+ flex-direction: column;
+ box-shadow: 0px 5px 8px 0px #ff914d87;
+ border: none;
+}
+
+/* estilização do button ao clicar */
+
+.part-butao:active{
+ color: white;
+ background-color: #f3b455;
+ text-decoration: none;
+}
+
+/* estilização da imagem do celular */
+
+.celular-um{
+ position: relative;
+ display: flex;
+ width: 189px;
+ margin-left: 1006px;
+ margin-top: -326px;
+ height: 360px;
+ background-color: rgba(173, 173, 173, 0);
+
+}
+/* vitor fim */
+.produtos{
+ display: flex;
+ flex-direction: row;
+ padding: 10px;
+ margin: 15px 25px 40px 25px;
+ box-shadow: 0px 10px 19px 0px rgb(235 148 7 / 51%);
+ border-radius: 25px;
+}
+.produtos .item{
+ padding: 15px;
+}
+.produtos .item h2{
+ font-size: 22px;
+ font-family: sans-serif;
+ color: #ff914d;
+
+}
+.produtos .item p{
+ font-size: 14px;
+ font-family: sans-serif;
+ color: dimgray;
+
+}
+.titulo-produto{
+ text-align: center;
+ margin-top: 25px;
+ font-family: sans-serif;
+ color: #fff;
+ background-color: #ff914d;
+ position: relative;
+ display: initial;
+ left: calc(50% - 351px);
+ padding: 5px 15px;
+ top: 12px;
+ border-radius: 10px 10px 0px 0px;
+}
+
+.part-produto{
+ margin-top: 50px;
+ margin-bottom: 70px;
+}
+
+
+@media screen and (max-width: 700px) {
+ .topbar .links .menu-flil{
+ display: none;
+}
+ .topbar .login {
+ display: none;
+ }
+ .topbar .menu {
+ display: block;
+ flex-direction: column;
+ }
+ .informacao {
+ flex-direction: column;
+ }
+ .celular{
+ height: 200px;
+ width: 100px;
+ padding: 20px 20px; /* ketryn*/
+ }
+ .celular-um{
+ display: none;
+ }
+ .cadastro, .part-butao{
+ margin-left: 15px
+ }
+ .primeiro-bloco{
+ width: 307px;
+ height: 309px;
+ margin-left: 34px;
+ margin-top: -356px;
+ box-shadow: none;
+ }
+ .parte-um-registro{
+ margin-left: 40px;
+ }
+ .sessao{
+ display: block;
+ }
+ .tela-sessao{
+ width: 100%;
+ }
+ img {
+ width: 36vh;
+ }
+ .produtos{
+ flex-direction: column;
+
+ }
+ .titulo-produto{
+ left: 0;
+ display: block;
+ margin: 0px 45px 0px 45px;
+ margin-bottom: -7px;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d255f43
--- /dev/null
+++ b/index.html
@@ -0,0 +1,193 @@
+
+
+
+
+
+
+
+
+
+
+ F4Bank
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Faça seu cadastro no F4Bank
+
+
+
Continuar
+
+
+
+
+
+
+
+
+
Por que abrir uma conta digital no F4 Bank?
+
+
+
Cartão de Crédito
+
O cartão do F4Bank é um cartão de crédito sem anuidades, com a bandeira Mastercard e que é totalmente controlado pelo smartphone, através do app F4Bank – é possível pedir aumento do limite, mudar a data de vencimento da fatura, bloquear
+ e desbloquear o cartão, ativar o aviso viagem, entre outras coisas.
+
+
+
Conta PJ
+
Uma conta digital focada em pessoas jurídicas e pequenas empresas. A versão inicial da nossa conta PJ terá algumas funções similares às oferecidas que a F4Conta oferece – como transferências gratuitas para outros bancos e entre contas
+ do F4 Bank, pagamento de boletos e tributos, depósito via boleto e a função “cobrar dinheiro“.
+
+
+
Conta Digital
+
-Rendimento automático de 100% do CDI: taxa maior que a da poupança, mesmo com a cobrança de IR e IOF.
+
-Cartão com a função débito para fazer compras com o saldo da F4Conta. Se você quiser ter um cartão com a função débito ligado a sua F4Conta, basta solicitar o seu através do nosso aplicativo – não cobraremos nada por isso.
+
-Transferências ilimitadas e gratuitas para outros bancos (TED) e outras F4Contas.
+
+
+
Empréstimo
+
Pra tudo que você imaginar, o F4 Bank tem a solução. Conheça os empréstimos e as linhas de crédito pessoal disponíveis, aproveite a carência para se planejar e comece a pagar a primeira parcela em até 180 dias*.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index/img/pessoas.png b/index/img/pessoas.png
new file mode 100644
index 0000000..6f7120d
Binary files /dev/null and b/index/img/pessoas.png differ
diff --git a/index/img/propaganda2.jpg b/index/img/propaganda2.jpg
new file mode 100644
index 0000000..bd82a21
Binary files /dev/null and b/index/img/propaganda2.jpg differ
diff --git a/index/img/sectionwhite.jpg b/index/img/sectionwhite.jpg
new file mode 100644
index 0000000..72a208e
Binary files /dev/null and b/index/img/sectionwhite.jpg differ
diff --git a/index/index.html b/index/index.html
new file mode 100644
index 0000000..7d93f2e
--- /dev/null
+++ b/index/index.html
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+ Produtos e Serviços
+
+
+
+
+
+
+
+
+
+
+ A conta digital que vai levar você ao controle da sua vida financeira.
+
+
+
+ Nossos valores e ideais que nos movem, todos os dias, para oferecer a você produtos e serviços que proporcionem mais tranquilidade, segurança e conveniência.
+
+
+
+ Por que abrir uma conta digital no F4 Bank?
+
+
+
+ Pague no débito em diversos sites e aplicativos com segurança e praticidade.
+ Você já pode fazer compras em diversas plataformas online e pagar com o cartão na função débito direto nos seus sites e aplicativos favoritos.
+
+
+ Ganhe tempo, faça pagamentos por aproximação.
+ O F4 Bank é ainda mais prático com a função contactless. Não precisa inserir cartão na maquininha, nem colocar a senha. De quebra, ainda evita contato com dinheiro.
+
+
+ Preço baixo
+ Temos Seguro Residencial com parcelas a partir de R$ 15 por mês e você ainda ganha desconto se contratar por mais de um ano..
+
+
+
+
+ O seguro ideal, pra você proteger o que realmente importa.
+ Uma plataforma com opções de seguros para o seu momento, com várias modalidades, pra você, sua família e sua empresa.
+
+
+ Organize sua vida financeira aqui!
+ Usando nossos serviços, você aprende a fazer muito mais com o seu dinheiro. Taxas desnecessárias? Nem pensar! Transferências grátis, investimentos a partir de R$ 10, compras online sem precisar passar por uma aprovação de crédito,
+ pagamentos de contas e muito mais? É pra já!
+
+
+ Cartão de crédito sem anuidade
+
+ Você só paga o que gastar e pode pedir o seu direto no app F4 Bank.
+
+ -Cartão virtual
+ -Débito automático
+ -Controle simplificado
+
+
+
+
COMODIDADE EM SUAS MÃOS
+
+
+
+
+
Cartão de Crédito
+
O cartão do F4Bank é um cartão de crédito sem anuidades, com a bandeira Mastercard e que é totalmente controlado pelo smartphone, através do app F4Bank – é possível pedir aumento do limite, mudar a data de vencimento da fatura, bloquear
+ e desbloquear o cartão, ativar o aviso viagem, entre outras coisas.
+
+
+
Conta PJ
+
Uma conta digital focada em pessoas jurídicas e pequenas empresas. A versão inicial da nossa conta PJ terá algumas funções similares às oferecidas que a F4Conta oferece – como transferências gratuitas para outros bancos e entre contas
+ do F4 Bank, pagamento de boletos e tributos, depósito via boleto e a função “cobrar dinheiro“.
+
+
+
Conta Digital
+
-Rendimento automático de 100% do CDI: taxa maior que a da poupança, mesmo com a cobrança de IR e IOF.
+
-Cartão com a função débito para fazer compras com o saldo da F4Conta. Se você quiser ter um cartão com a função débito ligado a sua F4Conta, basta solicitar o seu através do nosso aplicativo – não cobraremos nada por isso.
+
-Transferências ilimitadas e gratuitas para outros bancos (TED) e outras F4Contas.
+
+
+
Empréstimo
+
Pra tudo que você imaginar, o F4 Bank tem a solução. Conheça os empréstimos e as linhas de crédito pessoal disponíveis, aproveite a carência para se planejar e comece a pagar a primeira parcela em até 180 dias*.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index/style.css b/index/style.css
new file mode 100644
index 0000000..3efe5b1
--- /dev/null
+++ b/index/style.css
@@ -0,0 +1,203 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+.body {
+ width: 100vw;
+ height: 100vh;
+ font-family: 'Segoe UI';
+}
+
+.header {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ justify-items: end;
+ background-color: #3b4f66;
+ padding: 1em 1em;
+ width: 100vw;
+ align-items: center;
+}
+
+
+/*Background que contém o logo e frase de efeito do site*/
+
+.fourbank {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ justify-items: center;
+ background-color: #ff914d;
+ padding: 1em 1em;
+ color: snow;
+}
+
+.fourbank_segundo {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ justify-items: center;
+ background-color: white;
+ padding: 1em 1em;
+ color: #ff914d;
+}
+
+.fourbank_segundo>p {
+ text-align: center;
+ padding-top: 1em;
+ padding-left: 1em;
+ font-size: 10vh;
+ text-shadow: #a85d2e87 5px 5px 5px;
+}
+
+.fourbank>p {
+ padding-top: 72px;
+ padding-left: 48px;
+ font-size: 58px;
+}
+
+h1 {
+ color: snow;
+ background-color: #ff914d;
+ font-size: 4vh;
+}
+
+.all-browsers {
+ display: grid;
+ background-color: #ff914d;
+}
+
+.all-browsers>h1,
+.browser {
+ margin: 2px 2px 2px 2px;
+ text-align: center;
+}
+
+.browser {
+ background: white;
+ grid-row: 1/span 1;
+ border-radius: 15px;
+ box-shadow: 5px 5px 5px 5px #c58156c9;
+}
+
+.browser>h2,
+p {
+ margin: 3px 2px 3px 2px;
+ font-size: 22px;
+}
+
+img {
+ height: 90vh;
+ width: 85vh;
+}
+
+.produtos {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ column-gap: 25px;
+ justify-items: center;
+ padding-left: 16px;
+ padding-right: 16px;
+}
+
+#conta-digital,
+#emprestimo,
+#conta-pj,
+#cartao-credito {
+ border-radius: 15px;
+ box-shadow: 5px 5px 5px 5px #ca5c17c9;
+ background-color: snow;
+ font-family: Verdana;
+ font-size: 2vh;
+}
+
+#conta-digital>p,
+#emprestimo>p,
+#conta-pj>p,
+#cartao-credito>p {
+ color: rgb(47, 21, 5);
+ padding: 5px 5px 5px 5px;
+ font-size: 2vh;
+}
+
+.imagem_cartaoF4Bank {
+ margin-top: 16px;
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ justify-items: stretch;
+ color: #ff914d;
+ align-items: center;
+}
+
+.imagem_cartaoF4Bank>h3 {
+ font-size: 16vh;
+ font-family: 'Segoe UI';
+ text-align: center;
+ text-shadow: #a85d2e87 5px 5px 5px;
+}
+
+@media screen and (max-width:700px) {
+ * {
+ display: block;
+ }
+ img {
+ height: 32vh;
+ width: 36vh;
+ }
+ .fourbank>p {
+ display: flex;
+ flex-direction: column;
+ font-size: 4vh;
+ }
+ .fourbank_segundo>p {
+ font-size: 4vh;
+ }
+ .all-browsers {
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ padding: 1em;
+ background-color: lightgray;
+ }
+ main {
+ display: flex;
+ flex-direction: column;
+ }
+ .fourbank_segundo {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ }
+ h1 {
+ font-size: 25px;
+ }
+ .fourbank_segundo>p {
+ font-size: 4vh;
+ }
+ .fourbank {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 1em 1em;
+ }
+ .fourbank>p {
+ font-size: 4vh;
+ }
+ .imagem_cartaoF4Bank>h3 {
+ font-size: 3vh;
+ }
+ .imagem_cartaoF4Bank>img {
+ display: none;
+ }
+ .produtos {
+ display: flex;
+ flex-direction: column;
+ }
+ #conta-digital,
+ #emprestimo,
+ #conta-pj,
+ #cartao-credito {
+ margin-top: 6px;
+ margin-bottom: 4px;
+ font-size: 2vh;
+ }
+}
\ No newline at end of file
diff --git a/login.css b/login.css
new file mode 100644
index 0000000..26760ae
--- /dev/null
+++ b/login.css
@@ -0,0 +1,158 @@
+*{
+ margin: 0;
+ padding: 0;
+}
+
+*:focus {
+ outline: none;
+}
+
+.login{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ background-color: #ff914d;
+ width: 100%;
+ height: 100vh;
+}
+
+img{
+ width: 100px;
+ height: 80px;
+ padding: 10px 15px;
+ position: absolute;
+ left: 5px;
+ top: 5px;
+}
+
+.centro{
+ display: inline-block;
+ position: absolute;
+ width: 374px;
+ height: 512px;
+ background-color: rgb(255, 255, 255);
+ border-radius: 10px;
+ box-shadow: 0px 5px 8px 0px #a85d2e87;
+}
+
+.seu-login{
+ display: flex;
+ color: #ff914d;
+ margin-top: 85px;
+ margin-left: 110px;
+ flex-wrap: nowrap;
+ font-family: Arial, Helvetica, sans-serif;
+
+}
+
+.email{
+ display: inline-block;
+ width: 264px;
+ height: 45px;
+ margin-top: 50px;
+ margin-left: 63px;
+ border-radius: 30px;
+ border-color: #ff914d;
+ text-align: center;
+}
+
+.senha{
+ display: inline-block;
+ width: 264px;
+ height: 45px;
+ margin-top: 25px;
+ margin-left: 63px;
+ border-radius: 30px;
+ border-color: #ff914d;
+ text-align: center;
+}
+
+button{
+ display: inline-block;
+ width: 264px;
+ height: 45px;
+ margin-top: 30px;
+ margin-left: 63px;
+ border-radius: 30px;
+ text-align: center;
+ color: white;
+ background-color: #ff914d;
+ box-shadow: 0px 5px 8px 0px #ff914d87;
+ border: none;
+}
+
+button:hover{
+ color: #febd59;
+ background-color: white;
+}
+
+button:active{
+ color: white;
+ background-color: #febd59;
+}
+
+.reativa-senha{
+ display: flex;
+ justify-content: center;
+ color: #ff914d;
+ margin-top: 35px;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+.cadastro{
+ display: flex;
+ color: #ff914d;
+ margin-top: 25px;
+ font-family: Arial, Helvetica, sans-serif;
+ justify-content: center;
+}
+
+a{
+ text-decoration: none;
+}
+
+.reativa-senha:hover{
+ color: #febd59;
+
+}
+
+.cadastro:hover{
+ color: #febd59;
+}
+
+@media screen and (max-width: 700px) {
+ .login {
+ display: block;
+ justify-content: center;
+ align-content: center;
+ }
+ .centro{
+ display: inline-block;
+ position: absolute;
+ width: 375px;
+ height: 412px;
+ margin-top: 98px;
+ }
+ .seu-login {
+ display: block;
+ margin-top: 40px;
+ }
+ .email{
+ display: block;
+ }
+ .senha{
+ display: block;
+ margin-top: 10px;
+ }
+ .reativa-senha{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .cadastro{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+}
\ No newline at end of file
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..eb6005e
--- /dev/null
+++ b/login.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+ F4 bank
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/logo_f4bank.png b/logo_f4bank.png
new file mode 100644
index 0000000..0f01306
Binary files /dev/null and b/logo_f4bank.png differ
diff --git a/photothumb.db b/photothumb.db
new file mode 100644
index 0000000..5b12707
Binary files /dev/null and b/photothumb.db differ
diff --git a/pix-cadastro.png b/pix-cadastro.png
new file mode 100644
index 0000000..a6f24ff
Binary files /dev/null and b/pix-cadastro.png differ
diff --git a/tela_inteira.jpeg b/tela_inteira.jpeg
new file mode 100644
index 0000000..de31e32
Binary files /dev/null and b/tela_inteira.jpeg differ