Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Desafio

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags, no capítulo Super estilizando o seu CSS e atividade Desafio: compartilhe seu projeto com o mundo

por SAMUEL MODESTO NUNES
| 6.1k xp | 3 posts

Apesar de muito simples, esse o resultado do projeto deste primeiro curso, com alguns adicionais que vi nos projetos dos colegas do fórum!imagem do resultado do meu projeto 

<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>ATV 2</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <header>
        <img src="header.jpg" alt="Imagens de simbolos ligados a biologia em fundo verde." width="1880px" height="150px">
    </header>
    <main>
        <h1>Biologia é uma coisa, né?</h1>
        <p>Não obstante em ser a <span>cência natural</span> mais trabalhada no ensino fundamental, é literalmente <strong>O ESTUDO DA VIDA</strong>. <br>A prova disso é que a biologia está tão relacionada a tudo que fazemos que é recorrente que professores de ciências percam aulas a fio dissertando sobre curiosidades da vida de seus alunos ou de pessoas proximas a eles.</p>
        <img src="foto.jpg" alt="Foto de Samuel Modesto no espelho de um elevador." width="200px">
        <p>Se quiser saber mais sobre o tema, de forma interessante, siga minhas contas:</p>
        <a href="https://www.instagram.com">Instagram</a> <br>
        <a href="https://www.github.com" alt="Acesso para o github">Github</a>
    </main>
    <footer>
        <h3>Lista de contatos de interesse comercial:</h3><br>
        <ul>
            <li>Número profissional</li>
            <li>Número pessoal</li>
        </ul>
        <a href="https://gmail.com">nunesmsamuel@gmail.com</a>
    </footer>
</body>
</html>
body {
    background-color: #665953;
    color: #BA7859;
}
main { text-align: center;}
main a{ color: #332721;}
main p { font-size: larger;}

strong {
    color: #332721;
}
span {
    color: #332721;
    border: 1px solid #916D5D;
    padding: 2px;
}
li {color: black;}
h1 {
    font-style: italic;
    color: black;
}
footer a {
    background-color: #916D5D;
    border: 2px solid #916D5D;
    border-radius: 10px;
    color: #332721;
    padding: 10px;
}
1 resposta
solução!
por Lorena Garcia
| 8372k xp | 12222 posts
Alura Scuba Team Suporte Educacional

Olá Samuel!

Parabéns pelo progresso no seu projeto! Está ficando muito bom! Vou te dar algumas sugestões para melhorar ainda mais:

  • Correção de texto: Há um pequeno erro de digitação na palavra "ciência". Ela está escrita como "cência". Além disso, você pode adicionar um pouco mais de espaçamento entre os parágrafos para melhorar a legibilidade.

  • Melhorar o contraste das cores: Algumas cores podem estar com pouco contraste, dificultando a leitura.

Um exemplo de como você pode ajustar seu código:

HTML 

<!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>ATV 2</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <header>
        <img src="header.jpg" alt="Imagens de simbolos ligados a biologia em fundo verde.">
    </header>
    <main>
        <h1>Biologia é uma coisa, né?</h1>
        <p>Não obstante em ser a <span>ciência natural</span> mais trabalhada no ensino fundamental, é literalmente <strong>O ESTUDO DA VIDA</strong>. <br>A prova disso é que a biologia está tão relacionada a tudo que fazemos que é recorrente que professores de ciências percam aulas a fio dissertando sobre curiosidades da vida de seus alunos ou de pessoas próximas a eles.</p>
        <img src="foto.jpg" alt="Foto de Samuel Modesto no espelho de um elevador.">
        <p>Se quiser saber mais sobre o tema, de forma interessante, siga minhas contas:</p>
        <a href="https://www.instagram.com">Instagram</a> <br>
        <a href="https://www.github.com">Github</a>
    </main>
    <footer>
        <h3>Lista de contatos de interesse comercial:</h3>
        <ul>
            <li>Número profissional</li>
            <li>Número pessoal</li>
        </ul>
        <a href="https://gmail.com">nunesmsamuel@gmail.com</a>
    </footer>
</body>
</html>

CSS

body {
    background-color: #665953;
    color: #BA7859;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header img {
    width: 100%;
    height: auto;
}

main {
    text-align: center;
    padding: 20px;
}

main a {
    color: #332721;
}

main p {
    font-size: larger;
    margin-bottom: 20px;
}

strong {
    color: #332721;
}

span {
    color: #332721;
    border: 1px solid #916D5D;
    padding: 2px;
}

li {
    color: black;
}

h1 {
    font-style: italic;
    color: black;
}

footer {
    background-color: #916D5D;
    padding: 20px;
    text-align: center;
}

footer a {
    background-color: #332721;
    border: 2px solid #332721;
    border-radius: 10px;
    color: #FFF;
    padding: 10px;
    text-decoration: none;
}

footer a:hover {
    background-color: #FFF;
    color: #332721;
}

Espero ter ajudado.

Um abraço e bons estudos.