start-index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>UX-element</title>
  <link rel="stylesheet" type="text/css" href="./foundation.css">
  <link rel="stylesheet" type="text/css" href="./start-index.css">
</head>
<body>

  <!-- TOOLTIP -->
  <section id="tooltip">
    <div class="tooltip">
      <div class="tooltip-content">
        information concise
      </div>
      <div class="triangle">
      </div>
    </div>
    <div class="tooltip-target target">
      Hover me !
    </div>
  </section>

  <!-- MODAL -->
  <section id="modal">
    <a href="#modal-content">
      <button class="open target">click me !</button>
    </a>
    <div class="modal-content" id="modal-content">
      <div class="text-box">
        
        <p>Founda on for Puerto Rico fue fundada en el 2011 como una organi- zación sin fines de lucro exenta bajo el código de rentas internas 501(c)3 y el estado libre asociado de Puerto Rico.</p>
        <a href="#">
          <button class="target close"> Fermer</button>
        </a>
      </div>
    </div>
  </section>


  <section id="dropdown">
      <div class="dropdown">
        <div class="target">DROPDOWN</div>
        <ul class="expandable">
          <li>liste1</li>
          <li>liste2</li>
          <li>liste3</li>
        </ul>
      </div>
  </section>

  <section id="accordeon">
    <div class="conteneur target">
     <a>
       <button>close menu</button>
     </a>
     <div>
      <div class="click-me">
       <a href="#accordion1">
         <button>Click me !</button>
       </a>
       <div class="expandable accordion" id="accordion1" >
         <p>information supplémentaire</p>
     </div> 

     <div>
       <div class="click-me">
         <a href="#accordion2">
           <button>Click me !</button>
         </a>
         <div class="expandable accordion" id="accordion2">
           <p>information supplémentaire</p>
         </div>
      </div>
         
     </div>

     <div>
     <div class="click-me">
       <a href="#accordion3">
        <button>Click me !</button>
      </a>
    <div class="expandable accordion" id="accordion3">
        <p>information supplémentaire</p>
    </div>

  </div>

</section>

</body>
</html>