Titoalmwida/index.html

## index.html
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfólio - Eliton Tito de Araújo Bento</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header>
    <div class="logo">
      <h1>Eliton Tito de Araújo Bento</h1>
    </div>
    <nav>
      <a href="#hero">Home</a>
      <a href="#experiencia">Experiência</a>
      <a href="#educacao">Educação</a>
      <a href="#habilidades">Habilidades</a>
      <a href="#contato">Contato</a>
    </nav>
  </header>

  <section id="hero" class="hero">
    <div class="hero-content">
      <h2>Bem-vindo ao meu Portfólio</h2>
      <p>Cursando Ciência da Computação na UERR, com experiência em Help Desk e paixão por programação.</p>
    </div>
  </section>

  <section id="experiencia" class="experiencia">
    <div class="container">
      <h2>Experiência Profissional</h2>
      <div class="experiencia-item">
        <h3>CONAB - Help Desk</h3>
        <p>Atualmente trabalhando no setor de Help Desk na CONAB (Companhia Nacional de Abastecimento).</p>
      </div>
      <div class="experiencia-item">
        <h3>Guaraná Mania - Atendente</h3>
        <p>Trabalhei como atendente no Guaraná Mania em 2021, oferecendo um excelente atendimento ao cliente.</p>
      </div>
    </div>
  </section>

  <section id="educacao" class="educacao">
    <div class="container">
      <h2>Educação</h2>
      <div class="educacao-item">
        <h3>Universidade Estadual de Roraima (UERR)</h3>
        <p>Cursando o 6º semestre de Ciência da Computação, adquirindo conhecimentos avançados em programação e desenvolvimento de sistemas.</p>
      </div>
      <div class="educacao-item">
        <h3>Ensino Médio - Centro de Educação SESC</h3>
        <p>Concluí o Ensino Médio no Centro de Educação SESC em 2020, com forte foco em disciplinas de exatas e tecnologia.</p>
      </div>
    </div>
  </section>

  <section id="habilidades" class="habilidades">
    <div class="container">
      <h2>Habilidades</h2>
      <ul>
        <li>Programação em Python</li>
        <li>Desenvolvimento Web (HTML, CSS, JavaScript)</li>
        <li>Banco de Dados (MySQL, PostgreSQL)</li>
        <li>Redes de Computadores</li>
        <li>Suporte Técnico e Help Desk</li>
      </ul>
    </div>
  </section>

  <section id="contato" class="contato">
    <div class="container">
      <h2>Entre em Contato</h2>
      <p>Gostou do meu portfólio? Tem algo em mente para discutirmos? Me envie uma mensagem!</p>
      <form action="#" method="POST" id="contact-form" class="contact-form">
        <input type="text" name="nome" placeholder="Seu Nome" required class="input-field">
        <input type="email" name="email" placeholder="Seu Email" required class="input-field">
        <textarea name="mensagem" rows="5" placeholder="Sua Mensagem" required class="input-field"></textarea>
        <button type="submit" class="submit-btn">Enviar Mensagem</button>
      </form>
    </div>
  </section>

  <footer>
    <p>&copy; 2024 Eliton Tito de Araújo Bento. Todos os direitos reservados.</p>
  </footer>

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

</html>

## portifolio-eliton-tito.markdown

      
    Raw
  

              portifolio-eliton-tito.markdown
            
          
    portifolio eliton tito

A Pen by Eliton Tito on CodePen.
License.

  
## script.js
document
  .getElementById("contact-form")
  .addEventListener("submit", function (e) {
    e.preventDefault(); // Evita o envio real do formulário

    const name = e.target.name.value;
    const email = e.target.email.value;
    const message = e.target.message.value;

    // Exibe a mensagem do formulário
    alert(
      `Mensagem recebida!\nNome: ${name}\nE-mail: ${email}\nMensagem: ${message}`
    );

    // Limpa os campos do formulário
    e.target.reset();
  });

## style.css
/* Reset básico e fontes */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.6;
  background-color: #111;
  color: #ddd;
  overflow-x: hidden;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}

/* Header */
header {
  background-color: #121212;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  position: sticky;
  top: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 10;
  transition: background-color 0.3s ease;
}

header .logo h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2px;
}

header nav a {
  color: #bbb;
  text-decoration: none;
  margin-left: 20px;
  font-weight: 400;
  transition: color 0.3s ease, transform 0.3s ease;
}

header nav a:hover {
  color: #b94e48;
  transform: scale(1.1);
}

/* Hero Section */
.hero {
  background: url("https://via.placeholder.com/1600x600") no-repeat center
    center/cover;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  background-color: #000;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
  animation: fadeInUp 2s ease-out forwards;
}

/* Seções */
.container {
  width: 80%;
  margin: 0 auto;
}

h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #b94e48;
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 1s ease-out forwards;
}

/* Cards de Experiência e Habilidades */
.experiencia-item,
.habilidades ul li,
.educacao-item {
  background-color: #1e1e1e;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  transform: translateY(30px);
  animation: slideInUp 1s ease-out forwards;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.experiencia-item:hover,
.habilidades ul li:hover,
.educacao-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
}

/* Efeitos de paralaxe */
.hero {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

/* Animações para a navegação */
header nav a {
  position: relative;
  display: inline-block;
  padding: 5px;
}

header nav a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: #b94e48;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

header nav a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Estilos de formulário */
.input-field {
  width: 100%;
  padding: 14px;
  margin-bottom: 18px;
  border: 1px solid #444;
  border-radius: 6px;
  background-color: #333;
  color: #fff;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.input-field:focus {
  border-color: #b94e48;
  transform: scale(1.02);
}

.submit-btn {
  background-color: #005f6b;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.submit-btn:hover {
  background-color: #003d44;
  transform: translateY(-3px);
}

/* Efeitos de transição no footer */
footer {
  background-color: #121212;
  color: white;
  text-align: center;
  padding: 30px 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: fadeInUp 1.5s ease-in-out forwards 1s;
}

/* Keyframes para animações */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
	<!DOCTYPE html>
	<html lang="pt-br">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Portfólio - Eliton Tito de Araújo Bento</title>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<header>
	<div class="logo">
	<h1>Eliton Tito de Araújo Bento</h1>
	</div>
	<nav>
	<a href="#hero">Home</a>
	<a href="#experiencia">Experiência</a>
	<a href="#educacao">Educação</a>
	<a href="#habilidades">Habilidades</a>
	<a href="#contato">Contato</a>
	</nav>
	</header>

	<section id="hero" class="hero">
	<div class="hero-content">
	<h2>Bem-vindo ao meu Portfólio</h2>
	<p>Cursando Ciência da Computação na UERR, com experiência em Help Desk e paixão por programação.</p>
	</div>
	</section>

	<section id="experiencia" class="experiencia">
	<div class="container">
	<h2>Experiência Profissional</h2>
	<div class="experiencia-item">
	<h3>CONAB - Help Desk</h3>
	<p>Atualmente trabalhando no setor de Help Desk na CONAB (Companhia Nacional de Abastecimento).</p>
	</div>
	<div class="experiencia-item">
	<h3>Guaraná Mania - Atendente</h3>
	<p>Trabalhei como atendente no Guaraná Mania em 2021, oferecendo um excelente atendimento ao cliente.</p>
	</div>
	</div>
	</section>

	<section id="educacao" class="educacao">
	<div class="container">
	<h2>Educação</h2>
	<div class="educacao-item">
	<h3>Universidade Estadual de Roraima (UERR)</h3>
	<p>Cursando o 6º semestre de Ciência da Computação, adquirindo conhecimentos avançados em programação e desenvolvimento de sistemas.</p>
	</div>
	<div class="educacao-item">
	<h3>Ensino Médio - Centro de Educação SESC</h3>
	<p>Concluí o Ensino Médio no Centro de Educação SESC em 2020, com forte foco em disciplinas de exatas e tecnologia.</p>
	</div>
	</div>
	</section>

	<section id="habilidades" class="habilidades">
	<div class="container">
	<h2>Habilidades</h2>
	<ul>
	<li>Programação em Python</li>
	<li>Desenvolvimento Web (HTML, CSS, JavaScript)</li>
	<li>Banco de Dados (MySQL, PostgreSQL)</li>
	<li>Redes de Computadores</li>
	<li>Suporte Técnico e Help Desk</li>
	</ul>
	</div>
	</section>

	<section id="contato" class="contato">
	<div class="container">
	<h2>Entre em Contato</h2>
	<p>Gostou do meu portfólio? Tem algo em mente para discutirmos? Me envie uma mensagem!</p>
	<form action="#" method="POST" id="contact-form" class="contact-form">
	<input type="text" name="nome" placeholder="Seu Nome" required class="input-field">
	<input type="email" name="email" placeholder="Seu Email" required class="input-field">
	<textarea name="mensagem" rows="5" placeholder="Sua Mensagem" required class="input-field"></textarea>
	<button type="submit" class="submit-btn">Enviar Mensagem</button>
	</form>
	</div>
	</section>

	<footer>
	<p>© 2024 Eliton Tito de Araújo Bento. Todos os direitos reservados.</p>
	</footer>

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

	</html>
	document
	.getElementById("contact-form")
	.addEventListener("submit", function (e) {
	e.preventDefault(); // Evita o envio real do formulário

	const name = e.target.name.value;
	const email = e.target.email.value;
	const message = e.target.message.value;

	// Exibe a mensagem do formulário
	alert(
	`Mensagem recebida!\nNome: ${name}\nE-mail: ${email}\nMensagem: ${message}`
	);

	// Limpa os campos do formulário
	e.target.reset();
	});
	/* Reset básico e fontes */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: "Roboto", sans-serif;
	line-height: 1.6;
	background-color: #111;
	color: #ddd;
	overflow-x: hidden;
	font-size: 18px;
	transition: all 0.3s ease-in-out;
	}

	/* Header */
	header {
	background-color: #121212;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 40px;
	position: sticky;
	top: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	z-index: 10;
	transition: background-color 0.3s ease;
	}

	header .logo h1 {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 2px;
	}

	header nav a {
	color: #bbb;
	text-decoration: none;
	margin-left: 20px;
	font-weight: 400;
	transition: color 0.3s ease, transform 0.3s ease;
	}

	header nav a:hover {
	color: #b94e48;
	transform: scale(1.1);
	}

	/* Hero Section */
	.hero {
	background: url("https://via.placeholder.com/1600x600") no-repeat center
	center/cover;
	height: 60vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-align: center;
	background-color: #000;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
	animation: fadeInUp 2s ease-out forwards;
	}

	/* Seções */
	.container {
	width: 80%;
	margin: 0 auto;
	}

	h2 {
	font-size: 36px;
	margin-bottom: 20px;
	color: #b94e48;
	text-transform: uppercase;
	font-weight: 600;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	animation: fadeInUp 1s ease-out forwards;
	}

	/* Cards de Experiência e Habilidades */
	.experiencia-item,
	.habilidades ul li,
	.educacao-item {
	background-color: #1e1e1e;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
	transform: translateY(30px);
	animation: slideInUp 1s ease-out forwards;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	}

	.experiencia-item:hover,
	.habilidades ul li:hover,
	.educacao-item:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
	}

	/* Efeitos de paralaxe */
	.hero {
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	}

	/* Animações para a navegação */
	header nav a {
	position: relative;
	display: inline-block;
	padding: 5px;
	}

	header nav a::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	background: #b94e48;
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform 0.3s ease;
	}

	header nav a:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
	}

	/* Estilos de formulário */
	.input-field {
	width: 100%;
	padding: 14px;
	margin-bottom: 18px;
	border: 1px solid #444;
	border-radius: 6px;
	background-color: #333;
	color: #fff;
	transition: border-color 0.3s ease, transform 0.3s ease;
	}

	.input-field:focus {
	border-color: #b94e48;
	transform: scale(1.02);
	}

	.submit-btn {
	background-color: #005f6b;
	color: white;
	padding: 15px 30px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.3s ease, transform 0.3s ease;
	}

	.submit-btn:hover {
	background-color: #003d44;
	transform: translateY(-3px);
	}

	/* Efeitos de transição no footer */
	footer {
	background-color: #121212;
	color: white;
	text-align: center;
	padding: 30px 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	opacity: 0;
	animation: fadeInUp 1.5s ease-in-out forwards 1s;
	}

	/* Keyframes para animações */
	@keyframes fadeInUp {
	0% {
	opacity: 0;
	transform: translateY(30px);
	}
	100% {
	opacity: 1;
	transform: translateY(0);
	}
	}

	@keyframes slideInUp {
	0% {
	opacity: 0;
	transform: translateY(50px);
	}
	100% {
	opacity: 1;
	transform: translateY(0);
	}
	}