diff --git a/README.md b/README.md index 0b7a7d4..baac953 100644 --- a/README.md +++ b/README.md @@ -1 +1,20 @@ # landing-page-template +Esta é uma Landing page para a marca fictícia F4bank. +O trabalho foi desenvolvido por Ayla Silva dos Santos, Hellen Marina Barbosa Ferreira e Wellynton Alves Benicio. O site foi desenvolvido em conjunto, sem separações. Cada dia um componente do grupo ajustava/criava uma parte da página. O Wellynton não esteve tão presente pois estava com problemas de saúde. Mas no geral, todo colaboraram para o término do trabalho. +O site é responsivo para os iphones 6/7/8 e foi desevolvido com a estratégia desktop first. +Ao clicar nos botões do header, o usuário é redirecionado para a página específica que escolheu e na parte Home, ao clicar em Login o usuário tem acesso à página de Login da F4bank. Ao final, ao clicar nos botões de contato, o usuário é redirecionado para suas redes sociais, telefone e email (respectivamente de acordo com os simbolos). +https://wonderful-jellyfish.surge.sh/ +![image](https://user-images.githubusercontent.com/86899002/132114284-ef088c63-2a6c-41f9-a6cb-8cb2d22b42bd.png) +![image](https://user-images.githubusercontent.com/86899002/132114292-433fbb1b-9e84-4dc3-8e5c-96d6a0a60b52.png) +![image](https://user-images.githubusercontent.com/86899002/132114307-6d011e89-25de-4ffb-9f85-f28757f0b2cc.png) +![image](https://user-images.githubusercontent.com/86899002/132114318-7928c65f-e7e5-4edd-a092-597f042e487d.png) +![image](https://user-images.githubusercontent.com/86899002/132114326-8767ba28-550b-4171-bb2a-83d35d1fc002.png) +![image](https://user-images.githubusercontent.com/86899002/132114335-929350f7-2e91-4941-8ad6-325c307924d5.png) +![image](https://user-images.githubusercontent.com/86899002/132114341-36f23f37-b8c9-4b11-8fa8-5f196e610506.png) +![image](https://user-images.githubusercontent.com/86899002/132114347-3a516815-b2dd-4c34-90cb-6e3cf372bf71.png) +![image](https://user-images.githubusercontent.com/86899002/132114353-0d971c85-c839-45b6-b613-e6a6331a64d2.png) +![image](https://user-images.githubusercontent.com/86899002/132114361-5962fd03-02d7-4915-b688-0581b2292ea1.png) +![image](https://user-images.githubusercontent.com/86899002/132114364-5ecdb562-c6c1-4455-b034-e46f85b06a81.png) +![image](https://user-images.githubusercontent.com/86899002/132114370-8dd3a614-38f9-4249-a68f-92a701502bfa.png) +![image](https://user-images.githubusercontent.com/86899002/132114376-4758d24f-a89f-48b6-8e1f-3abb96675738.png) +![image](https://user-images.githubusercontent.com/86899002/132114384-e7711100-031f-4893-82ae-53516da6afb8.png) diff --git "a/f4bank/img/cart\303\243o.png" "b/f4bank/img/cart\303\243o.png" new file mode 100644 index 0000000..d40150c Binary files /dev/null and "b/f4bank/img/cart\303\243o.png" differ diff --git a/f4bank/img/digital-bank.jpg b/f4bank/img/digital-bank.jpg new file mode 100644 index 0000000..9f30eae Binary files /dev/null and b/f4bank/img/digital-bank.jpg differ diff --git a/f4bank/img/digital-bank.png b/f4bank/img/digital-bank.png new file mode 100644 index 0000000..17c37e8 Binary files /dev/null and b/f4bank/img/digital-bank.png differ diff --git a/f4bank/img/email.png b/f4bank/img/email.png new file mode 100644 index 0000000..8d6f20a Binary files /dev/null and b/f4bank/img/email.png differ diff --git a/f4bank/img/f4bank.png b/f4bank/img/f4bank.png new file mode 100644 index 0000000..789a8ce Binary files /dev/null and b/f4bank/img/f4bank.png differ diff --git a/f4bank/img/facebook-logo-3-1.png b/f4bank/img/facebook-logo-3-1.png new file mode 100644 index 0000000..74100b8 Binary files /dev/null and b/f4bank/img/facebook-logo-3-1.png differ diff --git a/f4bank/img/foto1orange.png b/f4bank/img/foto1orange.png new file mode 100644 index 0000000..f93d057 Binary files /dev/null and b/f4bank/img/foto1orange.png differ diff --git a/f4bank/img/instragam laranja.png b/f4bank/img/instragam laranja.png new file mode 100644 index 0000000..5a914fe Binary files /dev/null and b/f4bank/img/instragam laranja.png differ diff --git a/f4bank/img/people happy.jpeg b/f4bank/img/people happy.jpeg new file mode 100644 index 0000000..520812b Binary files /dev/null and b/f4bank/img/people happy.jpeg differ diff --git a/f4bank/img/pix.jpg b/f4bank/img/pix.jpg new file mode 100644 index 0000000..d61e9d1 Binary files /dev/null and b/f4bank/img/pix.jpg differ diff --git a/f4bank/img/telefone laranja.png b/f4bank/img/telefone laranja.png new file mode 100644 index 0000000..e3626c3 Binary files /dev/null and b/f4bank/img/telefone laranja.png differ diff --git a/f4bank/img/twitter-logo-3.png b/f4bank/img/twitter-logo-3.png new file mode 100644 index 0000000..6d43eb5 Binary files /dev/null and b/f4bank/img/twitter-logo-3.png differ diff --git a/f4bank/index.html b/f4bank/index.html new file mode 100644 index 0000000..bbeff80 --- /dev/null +++ b/f4bank/index.html @@ -0,0 +1,125 @@ + + + + + + + + Home + + +
+ + Logo f4bank +
  • Home
    •  +
  • Quem Somos
    •  +
  • Nossos Serviços
    •  +
  • Contato
    •  + +     +
    + +
    + +
    +

    Seja F4bank

    +

    Menos taxas e burocracia, mais simplicidade e inovação.

    +
    + +
    +
    + Mulher Feliz +
    +
    +
    + + + +
    +

    Quem Somos

    +
    +
    +
    +

    + Somos uma empresa de tecnologia, que desenvolve soluções seguras e simples para a sua vida financeira ultilizando uma abordagem inovadora. Queremos que o mundo conheça nosso jeito de transformar a vida das pessoas, nosso jeito de simplificar e reiventar o mundo. +

    +
    +
    +

    + O F4bank surgiu para construir este mundo com você. Trabalhamos com transparência e segurança, construindo produtos justos, tratando nossos clientes como pessoas e não como números. +

    +
    +
    +
    + +
    + +

    Nossos Serviços

    + +
    + +
    + Banco Digital +

    F4bank Digital

    +

    Receba, movimente e guarde seu dinheiro de forma simples e segura.

    +
    + +
    + cartão de crédito +

    Cartão de crédito

    +

    Fácil, prático e seguro, nosso laranjinha foi feito pra você.

    +
    + +
    + PIX +

    Pix

    +

    Não poderia faltar a instantaneidade do pix! Transfira e receba em apenas 1 segundo.

    + +
    +
    +
    +
    + +
    +

    Entre em contato conosco por:

    +
    +
    +
    + # +

    0000 000 0000

     +
    +
    + # +

    f4bankajuda@gmail.com

     +
    +
    + # +

    @f4bank

     +
    +
    + # +

    F4bank

     +
    +
    + # +

    @f4bankOficial

     +
    +
    +
    + + + + \ No newline at end of file diff --git a/f4bank/index.js b/f4bank/index.js new file mode 100644 index 0000000..e69de29 diff --git a/f4bank/login.html b/f4bank/login.html new file mode 100644 index 0000000..0028a3b --- /dev/null +++ b/f4bank/login.html @@ -0,0 +1,48 @@ + + + + + + + + LOGIN + + +
    +
    + # +
    +
    +
    +
    +

    Faça seu login

    +

    CPF

    + +
    +

    Senha

    + +
    +
    + +
    +
    + + + + + + \ No newline at end of file diff --git a/f4bank/style.css b/f4bank/style.css new file mode 100644 index 0000000..bad07cd --- /dev/null +++ b/f4bank/style.css @@ -0,0 +1,594 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +a { + text-decoration: none; + color: inherit; +} + +/* Configurações
    */ +.header { + background-color: rgba(255,145,77,255); + display: flex; + flex-direction: column; + width: 100vw; + height: 13vh; + position: fixed; +} +/* Esta é a estilização do Home*/ + +.containerHome { + height: 100vh; + padding-top: 80px; + background-color: rgb(250, 245, 242); + display: flex; + justify-content: space-between; +} + +.texto-convite { + font-size: 25px; + width: 28vw; + margin: 15%; + color: rgb(107, 44, 4); + display: flex; + flex-direction: column; + justify-content: center; + +} + +#button-home { + padding: 10px 10px 10px 10px; + background-color: rgb(250, 245, 242); + border-radius: 20px; + color: rgb(107, 44, 4); + border: 1px solid rgb(107, 44, 4); +} + + +#button-home:hover { + color: rgba(255,145,77,255); + border: 1px solid rgba(255,145,77,255); + box-shadow: + 1px 1px rgba(107, 44, 4, 0.2), + 2px 2px rgba(107, 44, 4, 0.2), + 3px 3px rgba(107, 44, 4, 0.2); + -webkit-transform: translateX(-3px); + transform: translateX(-3px); +} + +#img-home { + margin-top: 10px; + height: 95%; +} +/* Esta é a estilização do menu da Home*/ + +#logo-header-home{ + height: 8vh; +} + +.menu-header { + list-style-type: none; + display: flex; + align-items: center; + padding-left: 20px; + padding: 10px; + font-size: 20px; + +} + +.menu-header li { + margin-right: 4vw; + padding: 15px; + color: white; +} + +.menu-header li:hover { + color: black; +} + +/* Esta é a estilização do container Quem Somos*/ + +.containerQuemSomos { + width: 98,5vw; + height: 98,5vh; + color: white; + background-image: url(./img/people\ happy.jpeg); + background-position: center; + background-size: cover; +} + +#tituloQuemSomos { + text-align: center; + font-size: 45px; + padding-bottom: 10vh; + padding-top: 10vh; +} + +.container2QuemSomos { + display: flex; + justify-content: space-evenly; + font-size: 20px; + padding-top: 20vh; +} + +#lateralEsquerda { + width: 25vw; + height: 70vh; + text-align:start; +} + +#lateralDireita { + width: 25vw; + height: 70vh; + text-align:start; + padding-top: 30vh; +} + + /* Esta é a estilização do container Nossos Serviços */ + + + .container3NossosServiços { + height: 100vh; + background-color: rgb(250, 245, 242); + } + + .container3NossosServiços>h1 { + color: rgba(255,145,77,255); + font-size: 50px; + padding-top: 2%; + text-align: center; + padding-bottom: 1%; + } + + .nossos-serviços { + display: flex; + justify-content: center; + align-items: center; + padding-top: 5%; + } + + .img-card { + width: 100%; + height: 100%; + } + + + .card-serviço { + height: 58vh; + width: 18vw; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 2px 2px 5px rgb(189, 113, 0); + margin: 0 20px 20px; + padding-bottom: 2%; + transition: all 0.3s ease; + border-radius: 4px; + overflow: hidden; + } + + .card-serviço> h2 { + color: rgba(255,145,77); + font-size: 22px; + padding: 10px 10px 10px 10px; + } + + .card-serviço> p { + color: rgb(107, 44, 4); + font-size: 15px; + } + + .card-serviço:hover { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); + } + /* Esta é a estilização do menu dos contatos */ + + + .div-cards{ + display:flex; + justify-content:center; + align-items:center; + background-color: rgb(250, 245, 242); + } + .header-contatos{ + display:flex; + justify-content:center; + align-items:center; + font-size:35px; + height:50vh; + background-color: rgba(255,145,77,255); + color:white; + } + + .card-contatos{ + display:flex; + justify-content:center; + align-items:center; + flex-direction: column; + font-size:20px; + color: rgb(107, 44, 4); + height:40vh; + width:20vw; + margin-right:2%; + } + + .img-contatos{ + margin-right:2%; + width:40px; + height:40px; + } + + .card-contatos:hover{ + color: rgba(255,145,77,255); + } + + footer{ + display:flex; + justify-content:space-evenly; + align-items:center; + background-color:rgb(41, 40, 40); + color:white; + height: 12vh; + } + + .Transparência{ + display:flex; + justify-content:space-evenly; + } + + .Transparência>p{ + padding:10px 10px 10px 10px; + margin-right:10px; + } + + .Ouvidoria{ + display:flex; + justify-content:space-evenly; + } + + .Ouvidoria>p{ + padding:10px 10px 10px 10px; + margin-right:10px; + } + + + /* Esta é a estilização da minha página de login */ + + .header-login{ + height: 14vh; + background-color:rgba(255,145,77,255); + display: flex; + justify-content: center; + align-items: center; + } + + #icone-header{ + height:90px; + } + + .main-login{ + background-color: rgb(250, 245, 242); + height:80vh; + display:flex; + align-items:center; + justify-content:center; + } + + .login{ + display:flex; + align-items:center; + justify-content:center; + flex-direction:column; + height:80%; + width:30%; + background-color:rgba(255,145,77,1); + border-radius:15%; + color:white; + box-shadow:2px 2px 5px rgba(189, 113, 0, 0.9); + } + + .login > h1 { + font-size: 22px; + padding-bottom: 50px; + } + .login > h2 { + font-size: 15px; + padding-bottom: 10px; + } + + .caixa{ + border: 1px solid white; + border-radius:5%; + height:10%; + width:60%; + background-color:rgba(255,145,77,0); + padding:10px 10px 10px 10px; + } + + #botao-entrar{ + padding: 8px 8px 8px 8px; + background-color:rgba(255,145,77,0); + border-radius: 20px; + border: 1px solid white; + color:white; + height:10%; + width:20%; + } + + #botao-entrar:hover{ + color:black; + border: 1px solid black; + } + + input::placeholder{ + color:white; + margin-right:5%; + padding:10px 10px 10px 10px; + } + + input:focus{ + outline: 0; + } + + + @media screen and (min-device-width : 320px) and (max-device-width : 480px) { + +/* Esta é a responsividade do Home*/ + +.containerHome { + height: 100vh; + padding-top: 80px; + background-color: rgb(250, 245, 242); + display: flex; + justify-content: space-between; + align-items: center; +} + +.texto-convite { + font-size: 15px; + width: 60px; + margin: 15%; + color: rgb(107, 44, 4); + display: flex; + flex-direction: column; + justify-content: center; +} + + +#img-home { + margin-top: 20px; + height: 200px; +} + + + /* Configurações responsividade
    */ + +.menu-header { + list-style-type: none; + display: flex; + align-items: center; + padding-left: 20px; + padding: 10px; + font-size: 12px; +} + +/* Esta é a responsividade do container Quem Somos*/ + +.containerQuemSomos { + width: 100vw; + height: 100vh; + color: white; + background-image: url(./img/people\ happy.jpeg); + background-position:left; + background-size: cover; +} + +#tituloQuemSomos { + text-align: center; + font-size: 25px; +} + +.container2QuemSomos { + display: flex; + justify-content:center; + font-size: 20px; + padding: 0; +} + +#lateralEsquerda { + font-size: 15px; + width: 80vw; + height: 30vh; + margin: 10px; +} + +#lateralDireita { + font-size: 15px; + width: 50vw; + height: 30vh; + margin: 10px; +} + +/* Esta é a responsividade do container Nossos Serviços */ + + +.container3NossosServiços { + height: 155vh; + background-color: rgb(250, 245, 242); +} + +.container3NossosServiços>h1 { + color: rgba(255,145,77,255); + font-size: 25px; + padding-top: 2%; + text-align: center; + padding-bottom: 1%; +} + +.nossos-serviços { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding-top: 5%; +} + +.img-card { + width: 100%; + height: 100%; +} + +.card-serviço { + height: 45vh; + width: 60vw; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 2px 2px 5px rgb(189, 113, 0); + margin: 0 20px 20px; + padding-bottom: 2%; + transition: all 0.3s ease; + border-radius: 4px; + overflow: hidden; +} + +.card-serviço> h2 { + color: rgba(255,145,77); + font-size: 15px; + padding: 10px 10px 10px 10px; +} + +.card-serviço> p { + color: rgb(107, 44, 4); + font-size: 10px; +} + +.card-serviço:hover { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} + + /* Esta é a responsividade do menu dos contatos */ + + + .div-cards{ + display:flex; + justify-content:center; + align-items:center; + background-color: rgb(250, 245, 242); +} + +.header-contatos{ + display:flex; + justify-content:center; + align-items:center; + font-size:25px; + height:30vh; + background-color: rgba(255,145,77,255); + color:white; +} + + .card-contatos{ + display:flex; + justify-content:center; + align-items:center; + flex-direction: column; + font-size:8px; + color: rgb(107, 44, 4); + height:40vh; + width:50vw; + margin-left: 2%; + } + + .img-contatos{ + margin-right:2%; + width:20px; + height:20px; + } + + .card-contatos:hover{ + color: rgba(255,145,77,255); + } + + /* Esta é a responsividade do footer */ + + footer{ + display:flex; + justify-content:center; + align-items:center; + background-color:rgb(41, 40, 40); + color:white; + height: 30vh; + font-size: 8px; + } + + .Transparência{ + display:flex; + justify-content:center; + margin-bottom: 10vh; + text-align: center; + } + + .Transparência>p{ + padding:0; + margin-right:3px; + } + + .Ouvidoria{ + display:flex; + justify-content:center; + margin-bottom: 10vh; + text-align: center; + } + + .Ouvidoria>p{ + padding:0; + margin-right:3px; + } + + + /* Esta é a responsividade da page login*/ + + .login{ + display:flex; + align-items:center; + justify-content:center; + flex-direction:column; + height:45vh; + width:60vw; + background-color:rgba(255,145,77,1); + border-radius:15%; + color:white; + box-shadow:2px 2px 5px rgba(189, 113, 0, 0.9); + } + + #botao-entrar{ + padding: 4px 4px 4px 4px; + background-color:rgba(255,145,77,0); + border-radius: 20px; + border: 1px solid white; + color:white; + height:10%; + width:25%; + } + + .login > h1 { + font-size: 18px; + padding-bottom: 40px; + padding-top: 5px; + } + .login > h2 { + font-size: 12px; + padding-bottom: 10px; + } + } +