From a31c5b9ed02926ee6106be0f4f61f785b7cb7189 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hern=C3=A1n=20Eduardo=20Sabino=20Barrientos?= <62484185+hernanbarrientos@users.noreply.github.com> Date: Sun, 11 Jul 2021 21:17:49 -0300 Subject: [PATCH] Landing page secoes --- index.html | 133 +++++++++++++++++ script.js | 9 ++ style.css | 425 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 567 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..b852093 --- /dev/null +++ b/index.html @@ -0,0 +1,133 @@ + + + + + + + + + + F4BANK + + + +
+ + + + + + +
+
+

O banco digital!

+

Completo para todos.
+ Ideal para você!

+ +

Uma startup de serviços financeiros, com o intuito de facilitar o processo para todos os brasileiros, + possuindo a mesma segurança de um banco tradicional com décadas de história no país!
+ + Quem gosta de perder tempo para acessar a conta e fazer uma simples transação? + Foi pensando em você que nós da F4BANK trabalhamos super motivados para entregar + segurança, agilidade e claro muita praticidade para o seu dia dia! + Não fique de fora, todo mundo está abrindo uma conta aqui, no banco que foi projetado + para você! +

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

Quem tem F4Bank, tem soluções completas para todos os momentos. + Chega de confusão e complicações na hora de efetuar suas operações! + Filas em banco? Esquece isso! + Nossa plataforma além de segura é intuitiva e caso tenha alguma dúvida + temos a melhor equipe, treinada especialmente para levar a solução até você! + Simples assim! +

+ +
+ + + + + +
+ +
+
+ + + + +
+ Quero ser F4BANK +
+
+ +
+ + +
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..435a50a --- /dev/null +++ b/script.js @@ -0,0 +1,9 @@ +const btnMobile = document.getElementById('menu-mobile') + +function toggleMenu(){ + const navBar = document.getElementById('navbar') + navBar.classList.toggle('active') +} + + +btnMobile.addEventListener('click',toggleMenu) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..dc94aea --- /dev/null +++ b/style.css @@ -0,0 +1,425 @@ +/* Configuração inicial */ +@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + list-style: none; + outline: none; +} +:root { + --orange: #ff904d; + --orange-light: #ffbd59; + --white: #f7f7f7; +} +/* rolagem suave da pagina sem script */ +html{ + scroll-behavior: smooth; +} +/* Corpo da página */ +body { + font-family: "Noto Sans", sans-serif; + font-size: 62.5%; +} + +/* Cabeçalho */ + +header { + + width: 100%; + min-height: 100vh; + background: var(--orange); +} +/* Menu */ +nav { + overflow: hidden; + position: fixed; + z-index: 2; + display: flex; + align-items: center; + justify-content: space-around; + width: 100%; + height: 50px; + padding: 30px; + background-color:#ff904d; ; +} + +.logo-nav { + font-size: 1.2rem; + font-weight: 700; +} + +#menu { + display: flex; + align-items: center; + justify-content: center; +} +ul li a { + font-size: 1rem; + margin-left: 30px; + position: relative; +} + +a { + letter-spacing: 0.11rem; + color: var(--white); + font-weight: 700; + transition: all 0.3s; + padding: 10px; +} +a:hover { + color: var(--orange-light); +} +/* 1ª seção banner */ +.banner { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + position: relative; +} + +.text-banner { + width: 50%; + color: var(--white); + height: 350px; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10%; +} + +.text-banner h1 { + width: 100%; + font-size: 3.2rem; + text-align: center; + margin-bottom: 15px; + font-weight: 700; +} + +.text-banner p { + font-size: 1.2rem; + text-align: center; + margin-bottom: 50px; +} +.text-banner a { + font-size: 1.2rem; + background: var(--orange-light); + padding: 8px 20px; + cursor: pointer; + transition: all 0.3s; +} +.text-banner a:hover { + background-color: var(--orange); + color: var(--orange-light); +} + +/* 2ª Seção sobre o banco */ +.bank{ + display: flex; + justify-content: center; + flex-wrap: wrap; + align-items:center; + position: relative; + height: 600px; + width: 100%; + +} +.text-bank{ + width: 40%; + +} + +h2{ + font-size: 3rem; + color: var(--white); +} +h3{ + font-size: 2rem; + color: var(--white); +} +p{ + font-size: 1.2rem; + color: var(--white); +} +.card-right{ + width: 31%; + height: 300px; + display: flex; +} + +img{ + width: 100%; + justify-content: center; +} + +/* 3ª Seção Pra você */ + +.f4you{ + display: flex; + margin-top: 10px; + align-items: center; + justify-content:space-around; + flex-direction: row; + height:650px; + width: 100%; + +} + +.text-f4you{ + margin-left: 25px; + width: 40%; + height: 350px; + color: var(--white); + display: flex; + flex-direction: column; + align-items: center; +} +.text-f4you p{ + text-align: left; +} + +.img-vovo2{ + margin-left: 32px; + width: 45%; + +} + +/* 4ª Seção Abra sua conta */ + +.account{ + width: 100%; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; + position: relative; + +} + +.text-account{ + position: absolute; + z-index: 1; + left: 50%; + top: 40%; + transform: translate(-50%,-50%); + +} + +.text-account p{ + font-size: 2rem; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.678); + color: var(--white); + font-weight: 500px; + +} + +.account .text-account{ + width: 50%; + text-align: center; +} + +.container-btn{ + position: absolute; + bottom: 45%; + left: 50%; + transform: translate(-50%,-50%); + margin-top: 30px; +} + +.container-btn .btn{ + font-size: 1.2rem; + background: var(--orange-light); + padding: 8px 20px; + cursor: pointer; + transition: all 0.3s; + border: none; + color: var(--white); +} + +.container-btn .btn:hover{ + background-color: var(--orange); + color: var(--orange-light); +} + +.img-pravc img{ + opacity: 0.4; +} +.img-pravc{ + position: relative; + +} + +/* Footer */ + +.footer { + height: 70px; + width:100%; + background-color: #ff904d; + align-items: center; + display: flex; + flex-direction: column; + text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.678); + +} + +.redes { + margin-top: 5px; + align-items: center; + display: flex; + color: white; + font-family: "Noto Sans", sans-serif; + font-size:1.4rem; + +} + +.face { + margin: 4px; + height: 38px; + width:38px; + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.349); + border-radius: 0.3em; +} + + +.insta { + margin: 4px; + height: 38px; + width:38px; + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.349); + border-radius: 0.3em; +} + +.twt { + margin: 4px; + height: 38px; + width:38px; + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.349); + border-radius: 0.3em; +} + +/* Configuração de texto */ +.text { + width: 70%; + height: 350px; + color: var(--white); + display: flex; + flex-direction: column; + align-items: center; + } + + .text h2 { + width: 100%; + font-size: 2rem; + text-align: center; + margin-bottom: 2px; + font-weight: 700; +} + +.text p { + font-size: 1.2rem; + text-align: center; + margin-bottom: 10px; +} + +/* Configuração Logo */ + +.logo { + width: 50%; + display: flex; + flex-direction: column; + align-items: center; +} + +.logo img { + width: 72%; + animation: move 2.5s linear infinite; +} + +@keyframes move { + 0% { + transform: translate(-15px, 0px); + } + 50% { + transform: translate(0px, 15px); + } + 100% { + transform: translate(-15px, 0px); + } +} + +.text a { + font-size: 1.2rem; + background: var(--orange-light); + padding: 8px 20px; + cursor: pointer; + transition: all 0.3s; +} +.text a:hover { + background-color: var(--orange); + color: var(--orange-light); +} + +#menu-mobile { + display: none; +} +/* Responsividade */ +@media (max-width: 1000px) { + #menu-mobile { + display: block; + font-size: 2.5rem; + color: var(--white); + transition: all 0.3s; + cursor: pointer; + } + #menu-mobile:hover { + color: var(--orange-light); + } + + #menu { + display: block; + position: absolute; + text-align: center; + width: 100%; + top: 80px; + background: var(--orange); + z-index: 1000; + height: 0px; + transition: 0.6s; + visibility: hidden; + overflow-y: hidden; + } + #menu li { + padding: 40px; + cursor: pointer; + } + #menu li:hover { + background: var(--orange-light); + } + #menu a { + color: var(--white); + font-size: 1.5rem; + } + + #navbar.active #menu { + height: calc(100vh - 80px); + visibility: visible; + } + + .banner { + flex-direction: column; + margin-top: 10%; + } + + .logo { + margin-top: 5%; + + } + + .logo img { + width: 64%; + animation: none; + } +}