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 + + +
+ Logo + +
+

Faça seu cadastro

+ + + + + + + + + + + + + +
+
+ + \ 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

+ + + + +
+ + +
+ + +
+

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

+ Dedo humano segurando cartão 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/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 + + +
+ Logo +
+ + + + + + + + + + Esqueci minha senha + + + + + Ainda não sou cliente + + +
+
+ + \ 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