Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Meu Projeto Final

Apenas deixando registrado aqui o meu projeto final. Não é pra ser nada incrível, na verdade acho que podemos chamar apenas de experimentação, visto que ainda estou aprendendo o básico das duas linguagens.

Código HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header></header>
    <main>
        <h1>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Angelo Alves, desenvolvedor Front-end com especialidade em <span>JS HTML e CSS</span>. Ajudo
            pequenos
            negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>

        <div class="buttons-container">
            <a href="https://instagram.com/angelo_aoliveira" target="_blank"> <button>Instagram</button></a>
            <a href="https://github.com/AngeloxAlves" target="_blank"> <button>Github</button></a>
            <img src="fotoAngelo.jpeg" alt="Foto de Angelo Alves">
    </main>
    <footer></footer>
</body>

</html>

Código CSS

body {
background-color: #111d13;
color: white;
}

span {
    color: #f3b700;
}

strong {
    color: #22d4fd;
}

img {
    width: 250px;
    height: auto;
}
1 resposta
solução!

Oi, Angelo! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Seu projeto ficou muito bem estruturado, utilizando corretamente as tags HTML e as regras de CSS para destacar elementos importantes, como o span e o strong. Esse tipo de prática faz toda a diferença para fixar os aprendizados.

Uma dica interessante para o futuro é utilizar a propriedade hover no CSS para deixar os botões mais interativos. Veja este exemplo:


button {
    background-color: #22d4fd;
    color: #000;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    background-color: #f3b700;
    color: #111d13;
}

Isso faz com que, ao passar o mouse sobre o botão, ele mude de cor, criando uma experiência mais agradável para quem navega no seu site.

Alura

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!