Skip to content

Commit

Permalink
Merge pull request #24 from Jovens-do-futuro/edu-dev
Browse files Browse the repository at this point in the history 
feat: nodemail e fix: pagina de contato
  • Loading branch information
@EduLeal
EduLeal authored Jun 11, 2024
2 parents bfd4c9e + 81476c1 commit c5add1a
Show file tree
Hide file tree
Showing 7 changed files with 177 additions and 87 deletions.
Binary file added assets/icon-sem-efeito.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./global.css" />
<link rel="icon" type="image/x-icon" href="../../assets/icon-sem-efeito.png">

<script src="/scripts/loaders/header.js" type="module" ></script>
<script src="/scripts/loaders/footer.js" type="module" ></script>
Expand Down
24 changes: 0 additions & 24 deletions package-lock.json
View file

This file was deleted.

16 changes: 0 additions & 16 deletions package.json
View file

This file was deleted.

109 changes: 69 additions & 40 deletions pages/contato/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
<title>Contatos</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="../../global.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="icon" type="image/x-icon" href="../../assets/icon-sem-efeito.png">

<script src="/scripts/loaders/header.js" type="module"></script>
<script src="/scripts/loaders/footer.js" type="module"></script>
Expand All @@ -16,57 +18,84 @@
<body>
<header></header>
<main>
<section id="s-hero">
<section id="s-contato">
<div class="grid-layout">
<h1 class="h1-text">Página de contato</h1>
<p>Lorem ipsum</p>
<div class="titulo">
<h1 class="h1-text">Página de contato</h1>
<div class="linha"></div>
<p>Lorem ipsum</p>
</div>

<div class="controle">
<form>
<div class="form-control">
<label for="nome">Nome</label> <br>
<input type="text" id="nome" name="nome" placeholder="Informe seu nome" />
</div>

<div class="form-control">
<label for="email">E-mail</label> <br>
<input type="email" id="email" name="email" placeholder="Informe seu e-mail. Ex: [email protected]"/>
</div>

<div class="form-control">
<label for="mensagem">Mensagem</label> <br>
<textarea id="mensagem" name="mensagem" placeholder="Nos conte um pouco sobre você e o porquê de querer se juntar à nossa organização!"></textarea>
</div>

<div class="form-control">
<input type="checkbox" id="termos" name="termos" />
<label for="termos">I accept the Terms</label>
</div>

<div class="form-control">
<button type="submit" id="enviar">Enviar e-mail →</button>
</div>
<div class="form-control">
<label for="nome">Nome</label> <br />
<input
type="text"
id="nome"
name="nome"
placeholder="Informe seu nome e sobrenome"
/>
</div>

<div class="form-control">
<label for="email">E-mail</label> <br />
<input
type="email"
id="email"
name="email"
placeholder="Informe seu e-mail. Ex: [email protected]"
/>
</div>

<div class="form-control">
<label for="mensagem">Mensagem</label> <br />
<textarea
id="mensagem"
name="mensagem"
placeholder="Escreva sua mensagem"
></textarea>
</div>

<div class="form-control">
<input type="checkbox" class="termos" name="termos" />
<label for="termos" class="termos">Eu aceito os termos</label>
</div>

<div class="form-control">
<button type="button" id="enviar" class="button button-text">
Enviar e-mail →
</button>
</div>
</form>

<div class="infos">
<div class="email">
<bold>Email</bold>
<p>Lorem Ipsum</p>
<p class="exemplo">[email protected]</p>
</div>
<div class="telefone">
<bold>Telefone</bold>
<p>Lorem Ipsum</p>
<p class="exemplo">+1 (555) 000-0000</p>
<div class="superior">
<div class="email">
<p class="icone">@</p>
<bold>Email</bold>
<p class="exemplo">[email protected]</p>
</div>
<div class="telefone">
<p class="icone"><i class="bi bi-telephone-outbound"></i></p>
<bold>Telefone</bold>
<p class="exemplo">+55 (11) 9999-9999</p>
</div>
</div>

<br />
<div class="loc">
<p class="icone"><i class="bi bi-geo-alt"></i></p>
<bold>Localização</bold>
<p>123 Sample St, Sydney NSW 2000 AU</p>
<p>R. Piraju, 300 - Jardim Almeida, São Paulo - SP, 04866-240</p>
<a
href="https://www.google.com.br/maps/dir//R.+Piraju,+300+-+Jardim+Almeida,+S%C3%A3o+
Paulo+-+SP,+04866-240/@-23.8005129,-46.7296555,17z/data=!4m17!1m7!3m6!1s0x94ce490d696814ef:
0xa88b2ffd7d06715e!2sR.+Piraju,+300+-+Jardim+Almeida,+S%C3%A3o+Paulo+-+SP,+04866-240!3b1!8m2!3d-23.8005178!4d-46.7270806!4m8!1m0!1m5!1
m1!1s0x94ce490d696814ef:0xa88b2ffd7d06715e!2m2!1d-46.7270806!2d-23.8005178!3e3?entry=ttu" target="_blank">Como chegar? ></a>
</div>
</div>

</div>


</div>
</section>
</main>
Expand Down
21 changes: 21 additions & 0 deletions pages/contato/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
//fetch
var mensagem = document.querySelector("#mensagem")
document.querySelector("#enviar").addEventListener("click", function teste2() {
teste(data);
})

async function teste(data) {
const response = await fetch("https://web-production-e061.up.railway.app/send/text", {
method: "post",
headers: {"Content-Type": "application/json"},
body: JSON.stringify(data)
})
console.log(response)
return response.json()
}

const data = {
"to": "[email protected]",
"subject": "Assunto do email",
"text": mensagem.value
}
93 changes: 86 additions & 7 deletions pages/contato/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,96 @@
main #s-hero .grid-layout h1 {
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css");

main #s-contato {
margin: 150px 0px;
}

main #s-contato .grid-layout .titulo {
width: 720px;
height: 108px;
margin-bottom: 24px;
}

main #s-contato .grid-layout .titulo h1 {
color: var(--blue);
}

main #s-hero .grid-layout .controle {
main #s-contato .grid-layout .titulo .linha {
height: 1px;
background-color: var(--grey);
margin-bottom: 24px;
}

main #s-contato .grid-layout .controle {
display: flex;
justify-content: space-between;
width: 1012px;
}

main #s-hero .grid-layout .controle form .form-control textarea {
main #s-contato .grid-layout .controle form {
margin-right: 80px;
}

main #s-contato .grid-layout .controle form .form-control textarea,
main #s-contato .grid-layout .controle form .form-control input[type="text"],
main #s-contato .grid-layout .controle form .form-control input[type="email"]
{
width: 616px;
border-radius: 5px;
border: 1px solid var(--grey);
margin: 5px 0px 15px 0px;
}

main #s-contato .grid-layout .controle form .form-control textarea {
height: 212px;
padding-left: 12px;
}
main #s-hero .grid-layout .controle form .form-control input[type="text"],
main #s-hero .grid-layout .controle form .form-control input[type="email"] {
width: 616px;
main #s-contato .grid-layout .controle form .form-control input[type="text"],
main #s-contato .grid-layout .controle form .form-control input[type="email"] {
height: 41px;
padding-left: 12px
}

main #s-contato .grid-layout .controle form .form-control .termos {
margin: 5px 0px 24px 0px;
}

main #s-contato .grid-layout .controle .infos {
max-width: 316px;
height: 368px;
}

main #s-contato .grid-layout .controle .infos .superior {
display: flex;
margin-bottom: 40px;
}

main #s-contato .grid-layout .controle .infos .superior .email,
main #s-contato .grid-layout .controle .infos .superior .telefone {
width: 146px;
height: 116px;
}

main #s-contato .grid-layout .controle .infos .superior .email .icone,
main #s-contato .grid-layout .controle .infos .superior .telefone .icone,
main #s-contato .grid-layout .controle .infos .loc .icone {
color: var(--blue-light);
margin-bottom: 16px;
font-size: 24px;
}

main #s-contato .grid-layout .controle .infos .superior .email bold,
main #s-contato .grid-layout .controle .infos .superior .telefone bold,
main #s-contato .grid-layout .controle .infos .loc bold
{
font-size: 20px;
}

main #s-contato .grid-layout .controle .infos .superior .email p,
main #s-contato .grid-layout .controle .infos .superior .telefone p,
main #s-contato .grid-layout .controle .infos .loc p,
main #s-contato .grid-layout .controle .infos .loc a{
font-size: 16px;
color:black;
}
main #s-contato .grid-layout .controle .infos .loc a:hover{
color: var(--blue)
}

0 comments on commit c5add1a

Please sign in to comment.