Acessibilidade_Online.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acessibilidade Online</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/materiais2.css">
    <link rel="stylesheet" href="css/estilo_login.css">
    <link rel="stylesheet" href="css/botao.css">

</head>

<body>
  <button id="btnTopo" onclick="voltarAoTopo()"><img class="imagem-editar" src="img/SetaCima.webp"></button>
  <script src="js\botao.js"></script>
  <style>
    body {
      font-family: "Arial", sans-serif;
      margin: 0;
    }
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #1E3D51;
      padding: 8px;
      font-size: small;
    }
    .navbar-logo {
      color: white;
      font-size: 24px;
      text-decoration: none;
      padding-left: 10px;
      width: 8rem;
      height: auto;
    }
    .navbar-menu {
      display: flex;
      justify-content: center;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    .navbar-menu li {
      position: relative;
    }
    .navbar-menu li a {
font-family: "Montserrat", sans-serif;

      color: white;
      padding: 14px 20px;
      text-decoration: none;
      display: block;
    }
    .navbar-menu li a:hover {
      background-color: #2a5674;
border-radius: 5px;

    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #2a5674;
      min-width: 160px;
      z-index: 1;
    }
    .dropdown-content a {
      padding: 12px 16px;
    }
    .dropdown:hover .dropdown-content {
      display: block;
      background-color: #1E3D51;
    }
    
    h2,h1{
    font-family: "Montserrat", sans-serif;
      color: #326A8F; 
      padding-left: 2rem;
    }
  
  </style>
</head>
<body>

  <nav class="navbar">
    <a href="index.html" class="navbar-logo"><img class="navbar-logo" src="img/image 27.png"></a>
    <ul class="navbar-menu">
      <li><a href="index.html">Home</a></li>
      <li class="dropdown">
        <a href="#">Dislexia</a>
        <div class="dropdown-content">
          <a href="O_que_e.html">O que é?</a>
          <a href="Causa_e_Sintomas.html">Sintomas e Causas</a>
          <a href="Diagnostico.html">Diagnósticos</a>
          <a href="Historias.html">Histórias</a>
          <a href="tratamento.html">Tratamento</a>
        </div>
      </li>
      <li class="dropdown">
        <a href="#">Mais</a>
        <div class="dropdown-content">
          <a href="Impacto_aprendizagem.html">Impactos na aprendizagem</a>
          <a href="Estrategias_de_ensino.html">Estratégias de Ensino</a>
          <a href="Leis.html">Direitos e legislação</a>
          <a href="Acessibilidade_Online.html">Acessibilidade Online</a>
          <a href="materiais2.html">Materias e recursos</a>
          <a href="Bibliografia.html">Bibliografia</a>
        </div>
      </li>
      <li><a href="Sobre_nos.html">Sobre nós</a></li>
<li class="open-modal-btn" style='font-family: "Montserrat", sans-serif;'>Login</li>
      

    </ul>
  </nav>
  <div id="modal" class="modal-overlay">
    <div class="modal-content">
        <button class="fechar" id="fechar"> X</button>
        <h2>Cadastro</h2>
        <form>
            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Seu email" required>

            <label for="senha">Senha</label>
            <input type="password" id="senha" name="senha" placeholder="Sua senha" required>

            <button type="submit">Efetuar Login</button>
             
        </form>
       <p>Ainda não tem cadastro? <br> Clique aqui para <A href="cadastrobia.html">Cadastrar-se</A>
    </div>
</div>

<script>
   const modal = document.getElementById('modal');
const openModalBtn = document.querySelector('.open-modal-btn');
const fechar = document.querySelector('.fechar');

openModalBtn.addEventListener('click', () => {
modal.style.display = 'flex';
});

fechar.addEventListener('click', () => {
modal.style.display = 'none';
});
window.addEventListener('click', (e) => {
if (e.target === modal) {
    modal.style.display = 'none';
}
});
</script>
<br>
    <h2 style="color:#326A8F"><b>Acessibilidade Online</b></h2>
  <br>
    <nav>
        <a class="menu" href="#livros">Fontes</a>
        <a class="menu" href="#software">Formatação</a>
    </nav>
    <br>

    <h2 id="Livros"><strong>Fontes</strong></h2>

  
    <div class="content">
        <p>As fontes são a principal parte para a uma boa navegação na internet. Fontes serifadas como a “Times New Roman”, “Coutier” e “Georgia”, podem atrapalhar a leitura dos portadores da dislexia, por conta das serifas, os traços nas extremidades das letras. As fontes sem serifa como a “Arial”, “Verdana” e “Tahoma” são mais recomendadas, trazendo mais acessibilidade para o site.</p>
        <p>Existem fontes especificas para disléxicos, elas marcam bem as diferenças entre as letras, projetando as de maneira única para que não haja confusão, são sem serifa e bem espaçadas, são elas “Open Dislexic” e “Dyslexie”.</p>
        <p>O tamanho das fontes também pode atrapalhar na leitura. O tamanho da fonte muito pequena, menores que 10, não recomendadas para os sites e documentos escritos. Tamanhos maiores que 12, são mais recomendadas para sites e documentos.</p>
        <p>Os estilos de formatação de letras, como o itálico, negrito e a caixa alta, devem ser usados com muita sabedoria, apenas para ênfase de palavras chaves dos textos. O layout do texto também é importante, para que não haja complicação na leitura, frases curtas e o espaçamento bom entre as linhas.</p>
        
        <br>
        <div style="text-align: center;"> <img src="img/img.5.jpg" style="height: 500px; "></div>
        <br>

        <h2 id="software"><strong>Formatação</strong></h2>
        <p>O sumário para a navegação dentro do texto, pode facilitar a leitura dele. Os títulos com palavras chaves, ajudam na visibilidade do texto e o uso das imagens auxiliam no entendimento no texto. As cores do fundo devem trazer leveza, não é recomendado uso de cores vibrantes, como o azul, vermelho e roxo, use cores que não briguem com os textos, como o branco, branco-azulado ou amarelado, cores que acalmem. Os ícones e animações são importantes, não devem chamar muita atenção para não gerar conflitos com as informações do site.</p>

        
        <br>
    </div>
        
        
        </main>
       
   
       <div class="content">

        
        <br>
</div>
<footer class="footer" style="margin-top: 60px;">
  <div class="footer-logo">
    <img src="img/image 27.png" alt="Logo da Página">
  </div>


  <div class="footer-links-right">
    <a href="#">
      <img src="img/footer/facebook.png" class="fotter-img-size"> 
           Helplexia <i class="icon-class"></i>
      </a>
      <a href="#">
          <img src="img/footer/instagram.png" class="fotter-img-size"> 
          Helplexia <i class="icon-class"></i>
      </a>
      <a href="#">
          <img src="img/footer/email.png" class="fotter-img-size"> 
        Helplexia@gmail.com <i class="icon-class"></i>
      </a>
  </div>
</footer>
</body>

</html>