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>Darth Vader</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./estilo.css">
<link rel="stylesheet" href="./estilo2.css">
</head>
<body>
<header>
<h1><strong>Darth Vader</strong></h1>
</header>
<h2>Bem-vindo ao lado da tecnológico da força!</h2>
<p>Olá, eu sou Darth Vader, programador Front-end em treinamento. Após abandonar o Império (e o capacete por alguns instantes), decidi explorar os mistérios do desenvolvimento web.</p>
<p>Agora estou mergulhando no universo de <strong>HTML</strong> e <strong>CSS</strong>, dominando as melhores práticas para construir interfaces que são tão poderosas quanto a Estrela da Morte.</p>
<h2><strong>Minha Missão</strong></h2>
<p>Eliminar a resistência, à má usabilidade! Com código limpo, acessibilidade e design responsivo, estou pronto para transformar a galáxia digital.</p>
<h3><strong>Conecte-se Comigo</strong></h3>
<button><a href="mailto:darth.vader@imperio.com"><strong>Email</strong></a></button>
<button><a href="https://www.linkedin.com/in/seu-perfil" target="_blank"><strong><strong>Meu LinkedIn</strong></a></button>
<button><a href="github.com/seu-usuario" target="_blank"><strong>Meu GitHub</strong></a></button>
<img src="./DarthVander.jfif" alt="Darth Vader">
<footer>
<p><strong>© 2025 Darth Vader. Todos os direitos reservados. Que o código esteja com você!</strong></p>
</footer>
</body>
</html>
style.css
body {
background-color: black;
color: darkgray;
}
h1{
color: black;
text-shadow: 2px 2px 4px black;
text-align: center;
font-size: 40px;
}
button {
background-color: darkred;
border-radius: 8px;
padding: 5px 10px;
font-size: 15px;
cursor: pointer;
border: 2px solid black;
box-shadow: 2px 2px 4px black;
transition: background-color 0.3s, color 0.3s;
}
h2 {
color: darkred;
text-shadow: 2px 2px 4px black;
}
h3 {
color: darkred;
text-shadow: 2px 2px 4px black;
}
estilo.css
header {
background-color: darkred;
color: black
}
footer {
background-color: darkred;
color: black;
text-align: center;
padding: 3px ;
border-top: 0px solid black;
}
estilo2.css
a {
color: black;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: none;
color: red;
}
img {
width: 500px;
height: auto;
display: block;
margin: 0 auto;
}