Quero compartilhar com vocês a minha página depois do resultado de um curso que fiz aqui na escola! Vem muito mais por aí! Espero que gostem! Neste modelo, respeito a semântica da acessibilidade, tanto para pessoas que usam leitores de tela, quanto para pessoas que possui baixa visão. O Site também atende pessoas com visão, daltonismo e dislexia. Estou aberto a testes e sugestões!
<!DOCTYPE html>
<html>
<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>minhapagina</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#conteudo" class="sr-only">Pular para o conteúdo</a></li>
<li><a href="#rodape" class="sr-only">Pular para o rodapé</a></li>
</ul>
</nav>
</header>
<main id="conteudo">
<h1 class="titulo">Sobre mim</h1>
<p class="texto"><strong>Seja bem-vindo!</strong></p>
<p class="texto">Me chamo Felipe Garcia, sou Pessoa com Deficiência (PCD), Cid H54.0, com deficiência visual (cegueira).</p>
<h2 class="titulo">Entre em contato</h2>
</main>
<main id="conteudo">
<nav>
<ul>
<li><a href="#redes-sociais" class="sr-only">Redes sociais. (Atalho para a mesma página)</a></li>
</ul>
</nav>
<h3 id="redes-sociais">Redes sociais</h3>
<ul class="links">
<li><a class="redes__sociais" href="https://www.facebook.com/wendel.garcia.3572/about_overview" target="_blank">Ir para meu Perfil no Facebook. (O link abre em uma nova janela)</a></li>
<li><a class="redes__sociais" href="https://www.linkedin.com/feed/" target="_blank">Ir para meu perfil no Linkedin. (O link abre em uma nova janela)</a></li>
</ul>
</main>
<img src="imagem.jpg" alt="Foto de Felipe Garcia trabalhando em seu laptop. A um teclado externo em cima de uma mesa com aparelhos de informática. Na tela, um documento do Word sendo revisado.">
<footer id="rodape">
<h2>Os créditos deste aprendizado vão para a <strong>Alura!</strong></h2>
<nav>
<ul>
<li><a class="redes__sociais" href="https://www.alura.com.br/" target="_blank">Ir para o Site da Alura. (O link abre em uma nova janela)</a></li>
</ul>
</nav>
</footer>
</body>
</html>
```
* ``@import url('https://fonts.googleapis.com/css2?family=Arial, sans-serif');
- { margin: 0; padding: 0; /* Alterado para 0 para remover o preenchimento excessivo */ font-family: Arial, sans-serif; }
body { box-sizing: border-box; background-color: #000000; color: #F6F6F6; }
.titulo { margin: 10%; display: flex; align-items: center; justify-content: space-between; font-size: 21px; letter-spacing: 1.5px; }
.texto { font-size: 16px; letter-spacing: 1.5px; }
.conteudo { width: 100%; /* Use uma largura flexível para melhorar a responsividade / font-size: 16px; / Aumentado para melhor legibilidade / line-height: 1.5; / Espaçamento entre linhas adicionado */ }
.links a { font-size: 18px; /* Tamanho dos links ajustado para 18px para melhor legibilidade / text-decoration: underline; / Sublinhado adicionado para indicar que são links */ }
.redes__sociais { background-color: #22D4FD; width: 280px; text-align: center; border-radius: 16px; font-size: 18px; padding: 15px 0; /* Ajustado para espaçamento uniforme */ font-weight: 600; text-decoration: none; color: #000000; letter-spacing: 1.5px; }`
