Skip to content

entrega exercicio anna-beatriz #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

entrega exercicio anna-beatriz #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
81 changes: 81 additions & 0 deletions entrega/anna-beatriz/exemplo1/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
* {
box-sizing: border-box;
}

body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #1d8dc0;
background-image: url('../../../../assets/news.png');
background-repeat: no-repeat;
background-size: cover;
}

.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}

.news {
width: 30%;
margin: 0 auto;
padding: 5px;
background-color: rgba(76, 0, 255, 0.274);
}

.news__title {
color: #ffffff;
top: -130px;
}

.news__form {
}

.news__form-group {
position: relative;
width: 100%;
}

.news__label {
display: block;
color: #ffffff;
}

.news__input {
width: 100%;
border-radius: 2px;
border: 1px solid #ffffff;
height: 40px;
padding: 10px;
font-size: 14px;
}

.error {
border: 3px solid #ff0101;
}

.news__button {
background-color: #ecddf3;
color: #000000;
border-radius: 50px;
border: 0;
padding: 10px 20px;
width: 130px;
position: absolute;
bottom: -50px;
font-weight: bold;
left: 50%;
margin-left: -65px;
font-size: 16px;
transition: 0.3s;
cursor: pointer;
}

.news__button:hover {
background-color: #053c55;
color: #ffffff;
transition: 0.3s;
}
39 changes: 39 additions & 0 deletions entrega/anna-beatriz/exemplo1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!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">
<title>DevGirl Newsletter</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="wrapper">
<div class="news">
<h1 class="news__title" id="formTitle">Hey DevGirl, assine nossa newsletter!</h1>

<div class="mensagem">
</div>

<form action="" class="news__form">
<div class="news__form-group">
<label for="newsInputEmail" class="news__label">
Email
</label>
<input type="email" class="news__input" id="newsInputEmail" placeholder="nome@email.com">
</div>
<div class="news__form-group">
<button class="button news__button">Enviar</button>
</div>
</form>
</div>
</div>

<script src="./script/script.js"></script>
</body>

</html>
7 changes: 7 additions & 0 deletions entrega/anna-beatriz/exemplo1/script/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
//Capturar o valor inserido no input quando acionar o botão
//Retornar em um pop-up uma mensagem de sucesso para o usuário quando acionar o botão
//Adicionar um novo campo para a mensagem de sucesso quando acionar o botão
//Adicionar uma mensagem de sucesso personalizada com o email informado
//Alterar a cor do texto caso o email tenha sido cadastrado com sucesso
//Validar se os campos estão vazios ou não

89 changes: 89 additions & 0 deletions entrega/anna-beatriz/exemplo2/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
/* GERAL */
* {
box-sizing: border-box;
}

body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: rgb(172, 12, 221);
padding: 20px;
}

.wrapper {
padding: 20px;
background-color: #1e013242;
}

.transacao {
width: 100%;
margin: 0 auto;
position: relative;
}

.transacao__form {
display: flex;
justify-content: space-between;
}

.transacao__title {
color: #ffffff;
}

.transacao__form-group {
position: relative;
width: 100%;
}

.transacao__label {
display: block;
color: #000000;
}

.transacao__input {
width: 90%;
border-radius: 2px;
border: 1px solid #ecddf3;
height: 40px;
padding: 10px;
font-size: 14px;
}

.transacao__button {
background-color: #a414ea;
color: #ffffff;
border-radius: 10px;
width: 90%;
font-weight: bold;
font-size: 16px;
transition: 0.3s;
cursor: pointer;
margin-top: 21px;
height: 40px;
}

.transacao__button:hover {
background-color: #7f29aa;
color: #140a1a;
transition: 0.3s;
}

.extrato__table {
width: 100%;
text-align: left;
}

.extrato__header span + span {
border-left: 1px solid #ecddf3;
padding: 10px;
}

.extrato__header span + span {
border-left: 1px solid #ecddf3;
padding: 10px;
}

.extrato div:last-of-type span + span {
border-left: 1px solid #ecddf3;
padding: 10px;
}
52 changes: 52 additions & 0 deletions entrega/anna-beatriz/exemplo2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!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">
<title>MyBank</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="wrapper">
<div class="transacao">
<h1 class="transacao__title title">Controle Financeiro MyBank</h1>
<h2 class="transacao__subtitle subtitle">Adicionar Gastos</h2>
<form action="" class="transacao__form">
<div class="transacao__form-group">
<label for="transacaoInputName" class="transacao__label">Meu último gasto</label>
<input type="text" class="transacao__input" id="transacaoInputName"
placeholder="Insira aqui o seu último gasto">
</div>
<div class="transacao__form-group">
<label for="transacaoInputMoney" class="transacao__label">Valor</label>
<input type="number" class="transacao__input" id="transacaoInputMoney" placeholder="R$ 0,00">
</div>
<div class="transacao__form-group">
<label for="transacaoInputDate" class="transacao__label">Data</label>
<input type="text" class="transacao__input" id="transacaoInputDate" placeholder="dd/mm/aaaa">
</div>
<div class="transacao__form-group">
<button class="button transacao__button">Adicionar novo gasto</button>
</div>
</form>
</div>
<div class="extrato">
<h2 class="extrato__subtitle subtitle">Relatório de Gastos</h2>
<div class="extrato__table">
<h2 class="extrato__header">
<span>Nome da transação</span>
<span>Valor</span>
<span>Data</span>
</h2>
</div>
</div>
</div>
<script src="./script/script.js"></script>
</body>

</html>
10 changes: 10 additions & 0 deletions entrega/anna-beatriz/exemplo2/script/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
//adicionar um novo gasto nos inputs e ao clicar o botão adicionar as informações devem aparecer abaixo do campo relatório de gastos

// validar os três campos de input para que nenhum valor vazio possa ser adicionado

const inputGastos = document.getElementById("transacaoInputName")
const inputValor = document.getElementById("transacaoInputMoney")
const inputData = document.getElementById
const botao = document.getElementById
const extrato = document.getElementById

94 changes: 94 additions & 0 deletions entrega/anna-beatriz/exercicioParaCasa/1/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
* {
margin: 0;
padding: 0;
font-family: 'montserrat', sans-serif;
box-sizing: border-box;
}

body {
background-image: url('../img/study.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 100vh;
}

.container {
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
width: 300px;
margin: 0 auto;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
}

input {
width: 100%;
border: none;
border-bottom: 3px solid #000;
background: none;
padding: 10px;
outline: none;
font-size: 18px;
}

h1 {
text-align: center;
margin-bottom: 20px;
text-transform: uppercase;
font-size: 1.2rem;
}

h3 {
margin: 10px 0;
}

input {
margin-bottom: 20px;
}

#button {
background-color: royalblue;
border: none;
padding: 15px;
color: aliceblue;
font-size: 20px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
letter-spacing: 2px;
cursor: pointer;
border-radius: 10px;
margin-top: 20px;
line-height: 25px;
text-align: center;
}

.media-titulo {
margin-top: 15px;
}

.aprovacao {
background-color: green;
padding: 20px;
border-radius: 10px;
color: whitesmoke;
text-align: center;

}

.reprovacao {
background-color: red;
padding: 20px;
border-radius: 10px;
color: whitesmoke;
text-align: center;

}

.mensagem-de-erro {
color: red;
}
Binary file added entrega/anna-beatriz/exercicioParaCasa/1/img/study.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading