refactor: semantic html and add card info header style

index.html

@@ -43,6 +43,57 @@
 
     </div>
 
+    <!-- Information -->
+
+    <div class="panel panel-info">
+      <div class="panel-heading ifr-cardInfo__heading">
+        <span>
+          🇺🇸&nbsp;&nbsp;More information about the iFractions Project
+        </span>
+        <img src="./assets/img/info_cards/mini_games.png" width="100px" title="Examples of iFractions mini-games" />
+      </div>
+      <div class="panel-body">
+        <ul>
+          <li>Free software to promote learning with private data!</li>
+          <li>Developed by
+            <a href="https://www.usp.br/line" class="ref2" title="LInE's web page" target="_blank">Laboratory of
+              Informatics in Education</a>.
+          </li>
+          <li>For more information about mini-games to introduce fractions see the <a href="about/"
+              title="see documentation">iFractions documentation</a>.
+          </li>
+          <li>If you are a developer interested in colaborating with the project, see the <a
+              href="about/paginas/documentacao.html#sou-dev" title="see documentation to developers">Development
+              section</a> of the documentation.
+          </li>
+        </ul>
+        <!-- <a href="ifractions_www.tgz" title="download to use in your computer, school...">download</a> -->
+      </div>
+    </div>
+
+    <div class="panel panel-info">
+      <div class="panel-heading ifr-cardInfo__heading">
+        <span>🇧🇷&nbsp;&nbsp;Mais informações sobre o Projeto iFrações</span>
+        <img src="./assets/img/info_cards/mini_games.png" width="100px" title="Examples of iFractions mini-games" />
+      </div>
+      <div class="panel-body">
+        <ul>
+          <li><em>Software</em> livre para promover aprendizado mantendo dados privativo!</li>
+          <li>Desenvolvido pelo
+            <a href="https://www.usp.br/line" class="ref2" title="Página web do LInE" target="_blank">Laboratorio de
+              Informática na Educação</a>.
+          </li>
+          <li>Para mais informações sobre mini-jogos para
+            introduzir
+            frações veja a <a href="about/" title="see documentation">documentação do iFrações</a>.</li>
+          <li>Se você é um programador interessado em colaborar com o projeto, veja a <a
+              href="about/paginas/documentacao.html#sou-dev" title="veja documentação para desenvolvedores">sessão de
+              desenvolvimento</a> da documentação.
+          </li>
+        </ul>
+      </div>
+    </div>
+
     <!-- Load all js files -->
     <script src="./js/menus/preMenu_boot.js"></script>
     <script src="./js/menus/preMenu_lang.js"></script>
@@ -95,93 +146,8 @@
       game.state.start('boot');
     </script>
 
-  <!-- Information -->
-
-  <!--
-  <div class="panel panel-info">
-   <div class="panel-heading">iFractions Project information</div>
-   <div class="panel-body">
-    Free software to promote learning with private data! By
-    <a href="https://www.usp.br/line" class="ref2"
-       title="Web page LInE" target="_blank">Laboratory of Informatics in Education</a>.
-    <center>
-     <table>
-      <tr><td><img src="img/mini_games_1.png" width="300" title="several mini-games" /></td></tr>
-      <tr><td><strong>Mini-games</strong> to introduce fractions</td></tr>
-      <tr><td><strong>Free software, private data:</strong>
-              <a href="ifractions_2023_09_07.tgz" title="download to use in your computer, school...">download</a></td></tr>
-     </table>
-    </center>
-   </div>
-  </div>  
-
-  <div class="panel panel-info">
-    <div class="panel-heading">Sobre o iFra&ccedil;&otilde;es</div>
-    <div class="panel-body">
-      O <b>iFra&ccedil;&otilde;es</b> &eacute; um "software" livre desenvolvido pelo
-      <a href="http://www.usp.br/line" title="Pagina do Laboratorio de Informatica na Educacao (LInE)">LInE</a>.
-      <br/>
-      <i>Software</i> livre para promover o aprendizado, mantendo os dados de modo privativo!
-      -->
-      <!--
-      Para mais informa&ccedil;&otilde;es sobre o <i>iFra&ccedil;&otilde;es</i> 
-      <a href="sobre/" title="Mais informacoes sobre o iFracoes">clique aqui</a>.
-      -->
-      <!--
-    </div>
-  </div>-->
-
-    <div class="panel panel-info">
-      <div class="panel-heading"><table width="100%"><tr><td align="left">
-	🇺🇸&nbsp;&nbsp;More information about the iFractions Project</td>
-        <td align="right"><img src="img/mini_games_1.png" width="100" title="Examples of iFractions mini-games" /></td></tr>
-      </table></div>
-      <div class="panel-body">
-        <ul>
-          <li>Free software to promote learning with private data!</li>
-          <li>Developed by
-            <a href="https://www.usp.br/line" class="ref2" title="LInE's web page" target="_blank">Laboratory of
-              Informatics in Education</a>.
-          </li>
-          <li>For more information about mini-games to introduce fractions see the <a href="about/"
-              title="see documentation">iFractions documentation</a>.
-          </li>
-          <li>If you are a developer interested in colaborating with the project, see the <a
-              href="about/paginas/documentacao.html#sou-dev" title="see documentation to developers">Development
-              section</a> of the documentation.
-          </li>
-        </ul>
-        <!--        <a href="ifractions_www.tgz" title="download to use in your computer, school...">download</a> -->
-      </div>
-    </div>
-
-    <div class="panel panel-info">
-
-      <div class="panel-heading"><table width="100%"><tr><td align="left">
-	🇧🇷&nbsp;&nbsp;Mais informações sobre o Projeto iFrações</td>
-        <td align="right"><img src="img/mini_games_1.png" width="100" title="Exemplos de mini-jogos do iFrações" /></td></tr>
-      </table></div>
-      <div class="panel-body">
-        <ul>
-          <li><em>Software</em> livre para promover aprendizado mantendo dados privativo!</li>
-          <li>Desenvolvido pelo
-            <a href="https://www.usp.br/line" class="ref2" title="Página web do LInE" target="_blank">Laboratorio de
-              Informática na Educação</a>.
-          </li>
-          <li>Para mais informações sobre mini-jogos para
-            introduzir
-            frações veja a <a href="about/" title="see documentation">documentação do iFrações</a>.</li>
-          <li>Se você é um programador interessado em colaborar com o projeto, veja a <a
-              href="about/paginas/documentacao.html#sou-dev" title="veja documentação para desenvolvedores">sessão de
-              desenvolvimento</a> da documentação.
-          </li>
-        </ul>
-      </div>
-    </div>
-
   </div>
 
-  
 </body>
 
 </html>

style/IFractions.css

@@ -120,4 +120,10 @@
 
 .ifr-infoBox__menu__img {
   width: 60%; 
+}
+
+.ifr-cardInfo__heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center
 }