Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
303 changes: 303 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -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) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uhuu, ficou certinho!

image

/* 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;
}

}
58 changes: 58 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Source+Sans+Pro&display=swap" rel="stylesheet">
<title>F4Bank</title>
</head>
<body>
<header>
<a href="index.html"><img id="logo-bank" src="f4bank.png" alt="logo"></a>
<nav>
<a href="quemsomos.html">Quem somos</a>
<a href="nossos-produtos.html">Nossos produtos</a>
<a href="nossotime.html">Nosso time</a>
</nav>
</header>

<section class="quem-somos-index">
<div class="texto-quem-somos">
<p>Um banco criado para você chamar de seu!</p>
<p>Aquele banco que há décadas pensa na sua segurança ;)</p>
</div>

<img src="https://cdn.pixabay.com/photo/2017/01/01/14/39/hacker-1944688_960_720.jpg" alt="">
</section>

<section class="produtos-index">
<div class="texto-produtos">
<p>Conheça os produtos desenhados especialmente para você!</p>
<p>Não deixe de conhecer os benefícios de ter um <u>cartão F4</u></p>
<p>Confira também nossa <u>Conta Corrente Digital</u></p>
</div>
<img src="https://cdn.pixabay.com/photo/2017/10/25/19/48/piggy-2889049_960_720.jpg">
</section>

<section class="nosso-time-index">
<div class="texto-nosso-time">
<p>E não poderíamos de deixar à sua disposição o melhor time do mercado financeiro!</p>
<p>Aqui cuidamos do seu dinheiro, para que você possa cuidar de você!</p>
</div>
<img src="https://cdn.pixabay.com/photo/2017/08/30/07/56/money-2696228_960_720.jpg">
</section>

<footer>
<p>Trabalhe conosco</p>
<p>Endereço</p>
<div class="redes-sociais">
<a href="https://www.twitter.com" target="_blank"><img src="https://image.flaticon.com/icons/png/512/8/8800.png"></a>
<a href="https://www.facebook.com" target="_blank"><img src="https://image.flaticon.com/icons/png/512/25/25305.png"/></a>
<a href="https://www.instagram.com" target="_blank"><img src="https://image.flaticon.com/icons/png/512/25/25425.png"/></a>
</div>
</footer>

</body>
</html>
Loading