PORTFOLICO
<!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 Pessoal</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<nav>
<a href="#sobre">Sobre Mim</a>
<a href="#projetos">Projetos</a>
<a href="#hobbies">Hobbies</a>
<a href="#certificacoes">Certificações</a>
<a href="#contato">Contato</a>
<button id="modo-escuro"></button>
</nav>
</header>
<section id="sobre" class="fade-in">
<h1>Olá, eu sou [Seu Nome]!</h1>
<p>Sou estudante apaixonado por desenvolvimento web e estou sempre em busca de
novos desafios.</p>
</section>
<section id="projetos" class="fade-in">
<h2>Meus Projetos</h2>
<div id="carrossel">
<img src="[Link]" alt="Projeto 1" class="ativo">
<img src="[Link]" alt="Projeto 2">
<img src="[Link]" alt="Projeto 3">
</div>
</section>
<section id="hobbies" class="fade-in">
<h2>Meus Hobbies</h2>
<ul>
<li> Tocar guitarra</li>
<li> Jogar videogames</li>
<li> Ler livros de ficção científica</li>
</ul>
</section>
<section id="certificacoes" class="fade-in">
<h2>Certificações</h2>
<ul>
<li> Certificação em HTML e CSS - Plataforma X</li>
<li> Certificação em JavaScript - Plataforma Y</li>
</ul>
</section>
<section id="contato" class="fade-in">
<h2>Entre em Contato</h2>
<form id="form-contato">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem" required></textarea>
<button type="submit">Enviar</button>
</form>
</section>
<footer>
<p>© 2024 - Meu Portfólio</p>
</footer>
<script src="[Link]"></script>
</body>
</html>
Css ([Link])
/* Reset e Estilo Base */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
transition: background-color 0.5s, color 0.5s;
header {
background-color: #333;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
nav a:hover {
color: #ffcc00;
#modo-escuro {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 20px;
/* Animações */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease, transform 1s ease;
.[Link] {
opacity: 1;
transform: translateY(0);
}
/* Carrossel */
#carrossel {
position: relative;
max-width: 600px;
margin: 0 auto;
#carrossel img {
width: 100%;
display: none;
#carrossel [Link] {
display: block;
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
@media (max-width: 600px) {
nav {
flex-direction: column;
nav a {
margin: 10px 0;
}
[Link]
// Scroll suave
[Link]('nav a').forEach(anchor => {
[Link]('click', function(e) {
[Link]();
const targetId = [Link]('href');
[Link](targetId).scrollIntoView({
behavior: 'smooth'
});
});
});
// Validação do formulário
[Link]('form-contato').addEventListener('submit', function(e) {
[Link]();
const nome = [Link]('nome').value;
const email = [Link]('email').value;
const mensagem = [Link]('mensagem').value;
if (nome && email && mensagem) {
alert('Mensagem enviada com sucesso!');
[Link]();
} else {
alert('Por favor, preencha todos os campos.');
});
// Modo claro/escuro
const botaoModoEscuro = [Link]('modo-escuro');
[Link]('click', () => {
[Link]('modo-escuro');
});
// Carrossel de imagens
let indiceAtual = 0;
const imagens = [Link]('#carrossel img');
function mostrarProximaImagem() {
imagens[indiceAtual].[Link]('ativo');
indiceAtual = (indiceAtual + 1) % [Link];
imagens[indiceAtual].[Link]('ativo');
setInterval(mostrarProximaImagem, 3000); // Troca de imagem a cada 3 segundos
// Animações de entrada
const secoes = [Link]('.fade-in');
[Link]('scroll', () => {
[Link](secao => {
const posicaoTop = [Link]().top;
if (posicaoTop < [Link] - 50) {
[Link]('show');
});
});
