Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@karinacmartins
karinacmartins committed Aug 5, 2024
1 parent e1f0be9 commit c5960d2
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 1 deletion.
71 changes: 71 additions & 0 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,20 @@ nav ul li a {
background-color: #ba55d3;
}

button {
background-color: #4CAF50; /* Cor de fundo do botão */
border: none; /* Remove a borda padrão do botão */
color: white; /* Cor do texto do botão */
padding: 10px 20px; /* Espaçamento interno do botão */
text-align: center; /* Alinha o texto ao centro */
text-decoration: none; /* Remove o sublinhado do texto */
display: inline-block; /* Faz com que o botão se comporte como um bloco em linha */
font-size: 16px; /* Tamanho da fonte do botão */
margin: 4px 2px; /* Margem ao redor do botão */
cursor: pointer; /* Muda o cursor para uma mãozinha ao passar sobre o botão */
border-radius: 12px; /* Bordas arredondadas do botão */
transition: background-color 0.3s, transform 0.3s; /* Transição suave para as mudanças de cor e transformação */
}

.skills {
margin-top: 3rem;
Expand Down Expand Up @@ -229,6 +243,51 @@ button {
cursor: pointer;
}

/* Estilos específicos para a página de confirmação */
.confirmation {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
text-align: center;
}

.confirmation-box {
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.confirmation-box:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.confirmation-box h1 {
color: #ba55d3;
}

.confirmation-box p {
color: #333;
}

.confirmation-box a {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background-color: #ba55d3;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.confirmation-box a:hover {
background-color: #ba55d3;
}

footer {
background-color: #ba55d3;
color: #fff;
Expand Down Expand Up @@ -412,6 +471,18 @@ a:hover {
opacity: 0.8;
}


/* Efeito ao passar o mouse sobre o botão */
button:hover {
background-color: #45a049; /* Cor de fundo ao passar o mouse sobre o botão */
transform: scale(1.05); /* Aumenta o tamanho do botão ao passar o mouse */
}

/* Efeito ao passar o mouse sobre o botão de limpar */
button[type="reset"]:hover {
background-color: #e53935; /* Cor de fundo ao passar o mouse sobre o botão de limpar */
}

/* Estilos de foco visíveis */
a:focus, button:focus, input:focus, iframe:focus {
outline: 3px solid #fff /* Cor de destaque para foco */
Expand Down
47 changes: 47 additions & 0 deletions assets/pages/confirm.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirmação</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav aria-label="Navegação principal">
<ul>
<li><a href="../../index.html">Home</a></li>
<li><a href="about.html">Sobre</a></li>
<li><a href="projects.html">Projetos</a></li>
<li><a href="contact.html">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section class="confirmation">
<div class="confirmation-box">
<h1>Mensagem Enviada!</h1>
<p>Obrigado por entrar em contato. Sua mensagem foi enviada com sucesso.</p>
<p><a href="../../index.html">Voltar para a página inicial</a></p>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<p>&copy; 2024. KM Todos os direitos reservados.</p>
<div class="social">
Made with 🤍
<a href="https://www.instagram.com/karinamartins_eu/" target="_blank" aria-label="Instagram de Karina Martins">
<img src="../images/instagram.svg" alt="Ícone do Instagram de Karina Martins">
</a>
<a href="https://www.linkedin.com/in/karinacmartins/" target="_blank" aria-label="LinkedIn de Karina Martins">
<img src="../images/linkedin.svg" alt="Ícone do LinkedIn de Karina Martins">
</a>
<a href="/~https://github.com/karinacmartins" target="_blank" aria-label="GitHub de Karina Martins">
<img src="../images/github.svg" alt="Ícone do GitHub de Karina Martins">
</a>
</div>
</div>
</footer>
</body>
</html>
4 changes: 3 additions & 1 deletion assets/pages/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<h1 id="contact-heading">Contato</h1>
<p id="contact-description">Gostaria de saber mais sobre meu trabalho? Preencha o formulário abaixo ou entre em contato através das minhas redes sociais.</p>

<form action="enviar-contato.php" method="POST" aria-labelledby="contact-heading" aria-describedby="contact-description">
<form action="confirm.html" method="GET" aria-labelledby="contact-heading" aria-describedby="contact-description">
<div>
<label for="name">Nome:</label>
<input type="text" id="name" name="name" required aria-required="true">
Expand All @@ -43,6 +43,8 @@ <h1 id="contact-heading">Contato</h1>
<button type="submit">Enviar</button>

</form>



<div class="resume-link">
<p>Para mais detalhes sobre minha experiência e habilidades, <a href="https://karinacmartins.github.io/curriculo-web/" target="_blank">acesse meu currículo web</a>.</p>
Expand Down

1 comment on commit c5960d2

@karinacmartins
Copy link
Owner Author

Choose a reason for hiding this comment

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

ok

Please sign in to comment.