1Historias.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>History</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="1index.html" class="navbar-logo"><img class="navbar-logo" src="img/image 27.png"></a>
    <ul class="navbar-menu">
      <li><a href="1index.html">Home</a></li>
      <li class="dropdown">
        <a href="#">Dyslexia</a>
        <div class="dropdown-content">
          <a href="1O_que_e.html">What is it?</a>
          <a href="1Causa_e_Sintomas.html">Symptoms and Reasons</a>
          <a href="1Diagnostico.html">Diagnoses</a>
          <a href="1Historias.html">History</a>
          <a href="1tratamento.html">Treatments</a>
        </div>
      </li>
      <li class="dropdown">
        <a href="#">More</a>
        <div class="dropdown-content">
          <a href="1Impacto_aprendizagem.html">Impacts on learning</a>
          <a href="1Estrategias_de_ensino.html">Teaching Strategies</a>
          <a href="1Leis.html">Rights and legislation</a>
          <a href="1Acessibilidade_Online.html">Online Accessibility</a>
          <a href="1materiais2.html">Materials and resources</a>
          <a href="1Bibliografia.html">Bibliography</a>
        </div>
      </li>
      <li><a href="1Sobre_nos.html">About us</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>Register</h2>
        <form>
            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Your email" required>

            <label for="senha">Password</label>
            <input type="password" id="senha" name="senha" placeholder="Your password" required>

            <button type="submit">sign in</button>
             
        </form>
       <p>Don't have a registration yet? <br> Click here to<A href="1cadastrobia.html"> Register</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>History</b></h2>
<br>
  <nav>
      <a class="menu" href="#books">The Origin of the Term "Dyslexia" </a>
      <a class="menu" href="#software">Initial Challenges in Understanding Dyslexia </a>
      <a class="menu" href="#aplicativos"> On the Path to Educational Inclusion </a>
  </nav>
  <br>

  <h2 id="Books"><strong>The Origin of the Term "Dyslexia" </strong></h2>


  <div class="content">
      <p>The understanding of dyslexia has undergone many transformations throughout history. The term “dyslexia” was first mentioned in 1887 by German ophthalmologist Rudolf Berlin, who used the word to describe patients with specific reading and writing difficulties despite normal intelligence and cognitive abilities. In the years that followed, experts debated whether dyslexia was a visual problem or another. </p>
      <br>

      <h2 id="software"><strong>Initial Challenges in Understanding Dyslexia </strong></h2>
      <p>It was only in the 20th century, with the advancement of neuroscience and psychology, that the neurological bases of dyslexia were identified. Studies have shown that dyslexia has genetic causes and that the brain of a person with dyslexia processes language differently. Today, dyslexia is understood as a difference in phonological and orthographic processing that affects reading, writing and spelling.  </p>

      <div style="text-align: center;"> <img src="img/img.9.jpg" style="height: 500px; "></div>
      
      <br>
      <h2 id="aplicativos"><b> On the Path to Educational Inclusion </b></h2>
  </div>
      
      
      </main>
     
 
     <div class="content">
      <p>In addition, there is a growing awareness of the importance of inclusive and personalized teaching methods, leading to the creation of specialized programs and legislation to ensure the right to adapted education for people with dyslexia. The history of dyslexia reflects a path of understanding and inclusion, in search of a fairer and more accessible education for all. </p>
        
        <br>
        
        <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>