1
resposta

[Projeto] 11 Lista de exercícios

Olá colegas, mais uma vez aqui, como de costume vou estar deixando aqui o código que desenvolvi durante a realização da atividade (mesmo já tendo deixando alguns posts aqui pelos forúns, ainda sou iniciante...agradeço a compreensão e desejo sorte,foco e força para todos nós)

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Atividade 02</title>
    </head>
    <body>
        <style>h1{
            color: rgb(19, 143, 101);
            font-style: normal 17px arial;
        }
        p{
            color: black;
            font-style: normal 17px arial;
        }
        button{
          background-color: rgb(88, 126, 1);
          color: rgb(10, 158, 101);
          border: rgb(0, 0, 0);
          border-style: solid;
          border-radius: 50px;
        }
        </style>
        <header>
            <img src="image 7.png" alt="Codando">
        </header>

        <main>

            <h1> <strong>Isso é só uma atividade
                e eu acho interessante</strong>
            </h1>
            <p>Eu sou um DJ e Produtor musical</p>
            <p>Além de Engenheiro de Software e Segurança do trabalho</p>         
        </main>

        <footer>
            <button>
                <a href="https://www.linkedin.com/in/francisco-jos%C3%A9-sampaio-cruz-3101a5267/">Linkedin </a>
            </button>
            <button>
            <a href="https://github.com/franciscojosesampaio">GitHub</a>
            </button>
        </footer>
    </body>
</html>

Explicação do código: nesse código eu defini o codificador para o utf-8 (como solicitado na atividade), permiti que o mesmo fosse compatível com o microsoft Edge),defini a "escala da tela"...alguma das tags como a header,main e footer ela são mais especificas para que não aja problema em relação ao navegador (no quesito de "rodar melhor o código"), enfim, o código não tá dos melhores, mais nada que os ajustes não resolva (Obs, não consegui fazer os botões melhores que esse, preciso me aprofundar nesse aspecto)

1 resposta

Olá Francisco!

Seu código está bem estruturado e você já está aplicando várias boas práticas em HTML e CSS, voce está em um caminho muito bacana, e foi muito legal da sua parte explicar o código, continue assim!

Os botões estão bons e, ao longo das aulas, você irá se aprimorar. Mas se desejar melhorar a aparência, sugiro adicionar padding e mudar a cor do texto dos links para branco, criando um contraste melhor com o fundo verde. Também acrescentei cursor: pointer para indicar que os botões são clicáveis.

button {
        background-color: rgb(88, 126, 1);
        color: white; 
        border: 1px solid black;
        border-radius: 50px;
        padding: 10px 20px; /* Adiciona espaçamento interno */
        cursor: pointer; /* Muda o cursor para indicar que é clicável */
    }
    button a {
        color: white; /* Mantém o texto do link branco */
        text-decoration: none; /* Remove o sublinhado do link */
    }

Espero ter ajudado! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!