Historias.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>História</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="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_helplexi/img_helplexi/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>História</b></h2>
  <br>
    <nav>
        <a class="menu" href="#livros">A Origem do Termo "Dislexia" </a>
        <a class="menu" href="#software">Desafios Iniciais na Compreensão da Dislexia </a>
        <a class="menu" href="#aplicativos"> A Caminho da Inclusão Educacional </a>
    </nav>
    <br>

    <h2 id="Livros"><strong>A Origem do Termo "Dislexia" </strong></h2>

  
    <div class="content">
        <p>A compreensão da dislexia passou por muitas transformações ao longo da história. O termo “dislexia” foi mencionado pela primeira vez em 1887 pelo oftalmologista alemão Rudolf Berlin, que usou a palavra para descrever pacientes com dificuldades específicas de leitura e escrita, apesar de inteligência e habilidades cognitivas normais. Nos anos que se seguiram, especialistas debateram se a dislexia era um problema visual ou de outra natureza. </p>
        <br>

        <h2 id="software"><strong>Desafios Iniciais na Compreensão da Dislexia </strong></h2>
        <p>Foi só no século XX, com o avanço da neurociência e da psicologia, que se identificaram as bases neurológicas da dislexia. Estudos mostraram que a dislexia tem causas genéticas e que o cérebro de uma pessoa com dislexia processa a linguagem de forma distinta. Hoje, a dislexia é entendida como uma diferença no processamento fonológico e ortográfico que afeta a leitura, escrita e ortografia.  </p>

        <div style="text-align: center;"> <img src="img_helplexi/img_helplexi/img.9.jpg" style="height: 500px; "></div>
        
        <br>
        <h2 id="aplicativos"><b> A Caminho da Inclusão Educacional </b></h2>
    </div>
        
        
        </main>
       
   
       <div class="content">
        <p>Além disso, há uma crescente conscientização sobre a importância de métodos de ensino inclusivos e personalizados, levando à criação de programas especializados e legislação para assegurar o direito à educação adaptada para pessoas com dislexia. A história da dislexia reflete um caminho de compreensão e inclusão, em busca de uma educação mais justa e acessível para todos. </p>

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


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

</html>